CSS 在 RC.1 中，某些样式无法使用绑定语法添加

In RC.1 some styles can't be added using binding syntax

提问by Günter Z?chbauer

Styles like

风格像

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

are not added anymore

不再添加

回答by Günter Z?chbauer

update (2.0.0 final)

更新（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);
  }
}

See also https://angular.io/api/platform-browser/DomSanitizer

另见https://angular.io/api/platform-b​​rowser/DomSanitizer

<div [innerHTML]="someHtml | safeHtml"

update

更新

DomSanitizationServiceis going to be renamed to DomSanitizerin RC.6

DomSanitizationService将DomSanitizer在 RC.6 中重命名

original

原来的

This should be fixed in RC.2

这应该在 RC.2 中修复

See also Angular2 Developer Guide - Security

另请参阅Angular2 开发人员指南 - 安全性

---

---

Angular2 intruduced sanitization of CSS values and property binding like [innerHTML]=...and [src]="..."in RC.1

Angular2 intruduced CSS值的消毒和财产样结合[innerHTML]=...，并[src]="..."在RC.1

See also https://github.com/angular/angular/issues/8491#issuecomment-217467582

另见https://github.com/angular/angular/issues/8491#issuecomment-217467582

The values can be marked as trusted by using DomSanitizer.bypassSecurityTrustStyle(...)

可以使用以下方法将这些值标记为受信任 DomSanitizer.bypassSecurityTrustStyle(...)

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

}

and binding to this value instead the untrusted plain string.

并绑定到这个值而不是不受信任的纯字符串。

This can also be wrapped in a pipe like

这也可以包裹在管道中

@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>

with

和

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

is still working though :-[ (it's work in progress)

仍在工作：-[（正在进行中）

Plunker example(Angular 2.0.0-rc-1)

Plunker 示例（Angular 2.0.0-rc-1）

See also Angular 2 Security Tracking Issue

另请参阅Angular 2 安全跟踪问题

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

和https://angular.io/docs/ts/latest/api/platform-b​​rowser/index/DomSanitizer-class.html

Hint about {{...}}

提示 {{...}}

Sanitized content can't be bound using prop="{{sanitizedContent}}"because {{}}stringyfies the value before it is assigned which breaks sanitization.

不能使用已清理的内容进行绑定，prop="{{sanitizedContent}}"因为{{}}在分配之前对值进行字符串化，这会破坏清理。

回答by waterplea

Bypassing sanitizer to trust any content can be a security concern. Since Angular is not a dedicated sanitizing library, it is overzealous towards suspicious content to not take any risks. It removes almost all attributes, for example. You can delegate sanitizing to a dedicated library — DOMPurify. Here's a wrapper library I've made to easily use DOMPurify with Angular.

绕过消毒剂以信任任何内容可能是一个安全问题。由于 Angular 不是一个专门的清理库，它对可疑内容过于热心，不承担任何风险。例如，它删除了几乎所有的属性。您可以将清理委托给一个专用库——DOMPurify。这是我制作的一个包装库，可以轻松地将 DOMPurify 与 Angular 一起使用。

https://github.com/TinkoffCreditSystems/ng-dompurify

https://github.com/TinkoffCreditSystems/ng-dompurify

It also has a pipe to declaratively sanitize HTML:

它还有一个管道来声明性地清理 HTML：

<div [innerHtml]="value | dompurify"></div>

One thing to keep in mind is DOMPurify is great for sanitizing HTML/SVG, but not CSS. So you can provider Angular's CSS sanitizer to handle CSS:

要记住的一件事是 DOMPurify 非常适合清理 HTML/SVG，但不是 CSS。所以你可以提供 Angular 的 CSS sanitizer 来处理 CSS：

import {NgModule, ?_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    // ...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ?_sanitizeStyle,
        },
    ],
    // ...
})
export class AppModule {}

It's internal — hense ?prefix, but this is how Angular team use it across their own packages as well anyway.

它是内部的——hense?前缀，但这也是 Angular 团队在他们自己的包中使用它的方式。