Styles like

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

are not added anymore

Solution 1

update (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(html);
    // return this.sanitizer.bypassSecurityTrustHtml(html);
    // return this.sanitizer.bypassSecurityTrustScript(html);
    // return this.sanitizer.bypassSecurityTrustUrl(html);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(html);

See also

<div [innerHTML]="someHtml | safeHtml"


DomSanitizationService is going to be renamed to DomSanitizer in RC.6


This should be fixed in RC.2

See also Angular2 Developer Guide - Security

Angular2 intruduced sanitization of CSS values and property binding like [innerHTML]=... and [src]="..." in RC.1

See also

The values can be marked as trusted by using DomSanitizer.bypassSecurityTrustStyle(...)

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


and binding to this value instead the untrusted plain string.

This can also be wrapped in a pipe like

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

is still working though :-[ (it's work in progress)

Plunker example (Angular 2.0.0-rc-1)

See also Angular 2 Security Tracking Issue


Hint about {{...}}

Sanitized content can't be bound using prop="{{sanitizedContent}}" because {{}} stringyfies the value before it is assigned which breaks sanitization.

Solution 2

Bypassing sanitizer to trust any content can be a security concern. Since Angular is not a dedicated sanitizing library, it is overzealous towards suspicious content to not take any risks. It removes almost all attributes, for example. You can delegate sanitizing to a dedicated library DOMPurify. Here's a wrapper library I've made to easily use DOMPurify with Angular.

It also has a pipe to declaratively sanitize HTML:

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

One thing to keep in mind is DOMPurify is great for sanitizing HTML/SVG, but not CSS. So you can provider Angular's CSS sanitizer to handle CSS:

import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

    // ...
    providers: [
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
    // ...
export class AppModule {}

It's internal hense ɵ prefix, but this is how Angular team use it across their own packages as well anyway.