css - personalizado - En RC.1, algunos estilos no se pueden agregar utilizando la sintaxis de enlace
tooltip html ejemplos (1)
Estilos como
<div [style.background-image]="/'url(/' + image + /')/'">Background</div>
<div [style.transform]="rotate(7deg)"
ya no se agregan
actualización (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);
}
}
Ver también https://angular.io/api/platform-browser/DomSanitizer
<div [innerHTML]="someHtml | safeHtml"
actualizar
DomSanitizationService
cambiará de nombre a
DomSanitizer
en RC.6
original
Esto debería arreglarse en RC.2
Consulte también la Guía del desarrollador de Angular2: seguridad
Angular2 introdujo la desinfección de los valores CSS y la vinculación de propiedades como
[innerHTML]=...
y
[src]="..."
en RC.1
Ver también https://github.com/angular/angular/issues/8491#issuecomment-217467582
Los valores se pueden marcar como confiables utilizando
DomSanitizer.bypassSecurityTrustStyle(...)
import {DomSanitizer} from ''@angular/platform-browser'';
...
constructor(sanitizer: DomSanitizationService) {
this.backgroundImageStyle = sanitizer.bypassSecurityTrustStyle(''url('' + this.image + '')'');
// for HTML
// this.backgroundImageStyle = sanitizer.bypassSecurityTrustHtml(...);
}
y vinculante a este valor en lugar de la cadena simple no confiable.
Esto también se puede envolver en una tubería como
@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>
con
someHtml = `<a href="#" onClick="alert(document.cookie);">click to see the awesome</a>`;
aún funciona: - [(está en progreso)
Ejemplo de Plunker (Angular 2.0.0-rc-1)
Consulte también el problema de seguimiento de seguridad de Angular 2
y https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
Sugerencia sobre
{{...}}
El contenido desinfectado no puede vincularse usando
prop="{{sanitizedContent}}"
porque
{{}}
pone en cadena el valor antes de asignarlo, lo que interrumpe la desinfección.