78 votes

Dans RC.1, certains styles ne peuvent pas être ajoutés à l'aide de la syntaxe de liaison

Des styles comme

 <div [style.background-image]="\'url(\' + image + \')\'">Background</div>
<div [style.transform]="rotate(7deg)"
 

ne sont plus ajoutés

122voto

Günter Zöchbauer Points 21340

mise à jour (2.0.0 final)

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SafeHtml implements PipeTransform {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustStyle(html);
    // return this.sanitizer.bypassSecurityTrustHtml(html);
    // return this.sanitizer.bypassSecurityTrustScript(html);
    // return this.sanitizer.bypassSecurityTrustUrl(html);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(html);
  }
}

Voir aussi https://angular.io/api/platform-browser/DomSanitizer

<div [innerHTML]="someHtml | safeHtml"

mise à jour

DomSanitizationService va être renommé DomSanitizer en RC.6

d'origine

Ce doit être fixé dans la RC.2

Voir aussi Angular2 Guide du Développeur - Sécurité


Angular2 intruduced stérilisation de la CSS des valeurs et des biens de liaison comme [innerHTML]=... et [src]="..." en RC.1

Voir aussi https://github.com/angular/angular/issues/8491#issuecomment-217467582

Les valeurs peuvent être marqués comme digne de confiance en utilisant DomSanitizer.bypassSecurityTrustStyle(...)

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(sanitizer: DomSanitizationService) {
  this.backgroundImageStyle = sanitizer.bypassSecurityTrustStyle('url(' + this.image + ')');
  // for HTML
  // this.backgroundImageStyle = sanitizer.bypassSecurityTrustHtml(...);

}

et la liaison à cette valeur à la place de la non fiables chaîne simple.

Cela peut aussi être enveloppé dans une pipe comme

@Pipe({name: 'safeStyle'})
export class Safe {
  constructor(private sanitizer:Sanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustHtml(style);
    // return this.sanitizer.bypassSecurityTrustScript(value);
    // return this.sanitizer.bypassSecurityTrustUrl(value);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(value);
  }
}
<div [ngStyle]="someStyle | safeStyle"></div>

avec

someHtml = `<a href="#" onClick="alert(document.cookie);">click to see the awesome</a>`;

fonctionne toujours bien :-[ (travail en cours)

Plunker exemple (Angulaire 2.0.0-rc-1)

Voir aussi Angulaire 2 le Suivi de la Sécurité Problème

et https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

Allusion à propos de {{...}}

Épurés contenu ne peut pas être lié à l'aide de prop="{{sanitizedContent}}" car {{}} stringyfies la valeur avant il est affecté à laquelle les pauses d'assainissement.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X