W RC.1 niektóre style nie mogą być dodawane przy użyciu składni wiążącej - css, angular

Style takie jak

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

nie są już dodawane

Odpowiedzi:

86 dla odpowiedzi № 1

aktualizacja (wersja 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);
}
}

Zobacz też https://angular.io/api/platform-browser/DomSanitizer

<div [innerHTML]="someHtml | safeHtml"

aktualizacja

DomSanitizationService zostanie zmieniona nazwa na DomSanitizer w RC.6

oryginalny

Powinno to zostać naprawione w RC.2

Zobacz też Przewodnik programisty Angular2 - Bezpieczeństwo

---

Angular2 intrudował sanityzację wartości CSS i wiązanie własności jak [innerHTML]=... i [src]="..." w RC.1

Zobacz też https://github.com/angular/angular/issues/8491#issuecomment-217467582

Wartości można oznaczyć jako zaufane za pomocą DomSanitizer.bypassSecurityTrustStyle(...)

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

}

i powiązanie z tą wartością zamiast niezaufanego prostego ciągu.

Można to również owinąć w rurę

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

z

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

nadal działa: - [(trwa praca)

Przykład Plunkera (Angular 2.0.0-rc-1)

Zobacz też Angular 2 Security Tracking Issue

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

Podpowiedź o {{...}}

Zanieczyszczona treść nie może być związana za pomocą prop="{{sanitizedContent}}" bo {{}} ciągi wartość przed jej przypisaniem, która przerywa sanityzację.

---