У RC.1 деякі стилі не можна додавати, використовуючи синтаксичний синтаксис - css, кутовий

Стилі подібні

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

більше не додаються

Відповіді:

86 для відповіді № 1

оновлення (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"

оновлення

DomSanitizationService буде перейменовано на DomSanitizer в RC.6

оригінал

Це має бути виправлено в RC.2

Дивись також Керівництво розробників Angular2 - Безпека

---

Angular2 ввела санітарну обробку значень CSS і зв'язування властивостей [innerHTML]=... і [src]="..." в RC.1

Дивись також 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 (Кутовий 2.0.0-rc-1)

Дивись також Проблема відстеження безпеки 2

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

Підказка {{...}}

Використання санітарного вмісту не може бути пов'язане prop="{{sanitizedContent}}" оскільки {{}} визначає значення перед його призначенням, яке перериває санітарну обробку.

---