等样式
<div [style.background-image]="'url(' + image + ')'">Background</div>
<div [style.transform]="rotate(7deg)"
不再添加
更新(2.0.0最终版本)
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);
}
}
另请参阅https://angular.io/api/platform-browser/DomSanitizer
<div [innerHTML]="someHtml | safeHtml"
更新
RC.6 中的DomSanitizationService
将被重命名为DomSanitizer
原始
这应该在RC.2 中解决
另请参阅Angular2开发者指南-安全
Angular2诱导RC.1 中CSS值和属性绑定(如[innerHTML]=...
和[src]="..."
)的净化
另请参阅https://github.com/angular/angular/issues/8491#issuecomment-217467582
可以使用DomSanitizer.bypassSecurityTrustStyle(...)
将这些值标记为可信
import {DomSanitizer} from '@angular/platform-browser';
...
constructor(sanitizer: DomSanitizationService) {
this.backgroundImageStyle = sanitizer.bypassSecurityTrustStyle('url(' + this.image + ')');
// for HTML
// this.backgroundImageStyle = sanitizer.bypassSecurityTrustHtml(...);
}
并绑定到该值,而不是不可信的纯字符串。
这也可以像一样包裹在管道中
@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>
带有
someHtml = `<a href="#" onClick="alert(document.cookie);">click to see the awesome</a>`;
仍在工作:-[(正在进行中)
Plunker示例(Angular 2.0.0-rc-1)
另请参阅Angular 2安全跟踪问题
以及https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
关于{{...}}
的提示
消毒后的内容无法使用prop="{{sanitizedContent}}"
绑定,因为{{}}
会在分配值之前对其进行字符串化,从而破坏消毒。
绕过消毒液以信任任何内容可能是一个安全问题。由于Angular不是一个专门的清理库,它对可疑内容过于热心,不冒任何风险。例如,它几乎删除了所有属性。您可以将清理委托给一个专用库——DOMPurify。这是我制作的一个包装器库,可以很容易地将DOMPurify与Angular一起使用。
https://github.com/TinkoffCreditSystems/ng-dompurify
它还有一个管道来声明性地净化HTML:
<div [innerHtml]="value | dompurify"></div>
需要记住的一点是DOMPurify非常适合净化HTML/SVG,但不适合CSS。因此,您可以提供Angular的CSS消毒程序来处理CSS:
import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
@NgModule({
// ...
providers: [
{
provide: SANITIZE_STYLE,
useValue: ɵ_sanitizeStyle,
},
],
// ...
})
export class AppModule {}
它是内部的--hense ɵ
前缀,但这就是Angular团队在自己的包中使用它的方式。