Styles like

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

are not added anymore

1 Answers 11

up vote 71 down vote accepted

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

See also https://angular.io/api/platform-browser/DomSanitizer

<div [innerHTML]="someHtml | safeHtml"

update

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

original

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 https://github.com/angular/angular/issues/8491#issuecomment-217467582

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>

with

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

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

Hint about {{...}}

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

upvote
  flag
upvote
  flag
The pipe is a great idea. Thank you! – Tomer Almog
upvote
  flag
For some reason, when I try to use this service, the dependency injection doesn't work. Instead of getting the service implementation, I get abstract service (which is an empty object). Do you have any idea why this happens? Am I missing something? – yarons
upvote
  flag
@yarons can you please create a new question and add some code that demonstrates what you're actually doing. If possible a Plunker that allows to reproduce. – Günter Zöchbauer
upvote
  flag
@GünterZöchbauer the problem is that I can't reproduce it. In Plunker it works fine. Only when I run my application locally it fails. I thought maybe it's something you encountered. But you are right, I should open a new question for this. – yarons
upvote
  flag
Try purging npm_modules and reinstall. I saw that mentioned several times recently that it fixes weird issues. – Günter Zöchbauer
upvote
  flag
it is not fixed on rc.2 – albanx
upvote
  flag
Some styles are not supposed to be added without explicity bypassSecurityXxx – Günter Zöchbauer
upvote
  flag
@GünterZöchbauer Just a question, shouldn't your SafeHtml implement PipeTransform? – SrAxi
2 upvote
  flag
@SrAxi you are right. Back then it worked fine without as well – Günter Zöchbauer

Not the answer you're looking for? Browse other questions tagged or ask your own question.