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

Ответ 1

update (2.0.0 final)

  import {Pipe, PipeTransform} из '@angular/core';
import {DomSanitizer} из '@angular/platform-browser';

@Pipe ({name: 'safeHtml'})
класс экспорта SafeHtml реализует PipeTransform { конструктор (частный дезинфицирующее средство: DomSanitizer) {}
 transform (html) {   return this.sanitizer.bypassSecurityTrustStyle(html);   // возвращаем this.sanitizer.bypassSecurityTrustHtml(html);   // возвращаем this.sanitizer.bypassSecurityTrustScript(html);   // возвращаем this.sanitizer.bypassSecurityTrustUrl(html);   // возвращаем 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} из '@angular/platform-browser';
...
конструктор (дезинфицирующее средство: DomSanitizationService) { this.backgroundImageStyle = sanitizer.bypassSecurityTrustStyle('url (' + this.image + ')'); // для HTML //this.backgroundImageStyle = sanitizer.bypassSecurityTrustHtml(...);

}
Код>

и привязка к этому значению вместо ненадежной простой строки.

Это также можно обернуть в трубку, например

  @Pipe ({name: 'safeStyle'})
класс экспорта Safe { конструктор (частный дезинфицирующее средство: дезинфицирующее средство) {}
 transform (style) {   return this.sanitizer.bypassSecurityTrustStyle(стиль);   // возвращаем this.sanitizer.bypassSecurityTrustHtml(стиль);   // возвращаем this.sanitizer.bypassSecurityTrustScript(значение);   // возвращаем this.sanitizer.bypassSecurityTrustUrl(значение);   // возвращаем this.sanitizer.bypassSecurityTrustResourceUrl(значение); }
}
Код>

  < div [ngStyle] = "someStyle | safeStyle" > </div>
Код>

с

  someHtml = `< a href= "#" onClick = "alert (document.cookie);" > click, чтобы увидеть awesome </a> `;
Код>

все еще работает: - [(это незавершенная работа)

Пример плунжера (Угловой 2.0.0- гс-1)

См. также проблема с отслеживанием безопасности с угловым 2

и https://угловой. -й/Docs/ц/последний/API/платформа браузер/индекс/DomSanitizer-class.html

Подсказка о {{...}}

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