В RC.1 некоторые стили не могут быть добавлены с использованием синтаксиса привязки

Question

Стили как

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

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

Answer 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

Значения могут быть помечены как доверенные с помощью 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>`;

все еще работает, хотя:-[ (это работа в процессе)

Пример плункера (Angular 2.0.0-rc-1)

См. Также Проблема отслеживания безопасности Angular 2

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

Намек на{{...}}

Дезинфицированный контент не может быть связан с помощью prop="{{sanitizedContent}}" так как {{}} stringyfies значение до его присвоения, что нарушает санитарную обработку.

Answer 2

Обход дезинфицирующего средства для доверия любому контенту может быть проблемой безопасности. Поскольку Angular не является специальной библиотекой для очистки, она слишком ревностно относится к подозрительному контенту, чтобы не рисковать. Например, он удаляет почти все атрибуты. Вы можете делегировать очистку специальной библиотеке - DOMPurify. Вот библиотека-оболочка, которую я сделал, чтобы легко использовать DOMPurify с Angular.

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

Он также имеет канал для декларативной дезинфекции HTML:

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

Следует иметь в виду, что DOMPurify отлично подходит для очистки HTML/SVG, но не CSS. Таким образом, вы можете предоставить дезинфицирующее средство CSS Angular для обработки 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 использует его в своих собственных пакетах.