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

Question

Style jak

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

nie dodaje już

Answer 1

aktualizacji (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(style); 
    // return this.sanitizer.bypassSecurityTrustHtml(style); 
    // return this.sanitizer.bypassSecurityTrustScript(value); 
    // return this.sanitizer.bypassSecurityTrustUrl(value); 
    // return this.sanitizer.bypassSecurityTrustResourceUrl(value); 
    } 
} 

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

<div [innerHTML]="someHtml | safeHtml" 

aktualizacja

DomSanitizationService zostanie zmieniona na DomSanitizer w RC.6

oryginalnym

To powinno być ustalone w RC.2

Zobacz także Angular2 Developer Guide - Security

---

Angular2 intruduced odkażenie wartości CSS i właściwości wiązania jak [innerHTML]=... i [src]="..." w RC.1

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

Wartości mogą być oznaczone 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 zwykłego łańcucha.

ten może być owinięty w rurze jak

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

ciągle pracuje,: - [(jest w toku)

Plunker example (Angular 2.0.0-rc-1)

Zobacz także Angular 2 Security Tracking Issue

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

Podpowiedź o {{...}}

Sanitized treść nie może być związana z użyciem prop="{{sanitizedContent}}" ponieważ {{}} stringyfies wartości, zanim zostanie przypisany który łamie odkażenie.