unsafe value used in a resource URL context when loading local css file

Question

I wonder if anyone can explain the meaning of the Dom Sanitisation in Angular2 in my case:

The img case is fine, it just werks. The stylesheet will trigger an error like in the title. What the what? Why? Anyone?

<img *ngIf="css" [src]="css" style="height:64px;margin-right:8px">
<link *ngIf="css" rel="stylesheet" [href]="css">

/somename.css or ./somename.css or somename.css I tried all three options — Mathijs Segers, Jul 05 '16 at 10:56
See http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 — Günter Zöchbauer, Jul 05 '16 at 10:58
Also do you want to answer so I could accept? I used the pipe solution but it feels too much like a workaround in my case. — Mathijs Segers, Jul 05 '16 at 11:08

score 3 · Accepted Answer · edited May 23 '17 at 12:25

update

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

original

Images are safe. There is an <img> tag and that displays the image data, that's it. CSS can do much more. CSS can even add HTML https://developer.mozilla.org/en/docs/Web/CSS/::after which is quite insecure.

To explicitly allow "unsafe" content use the sanitizer

import {DomSanitizationService} from '@angular/platform-browser';

return this.sanitizer.bypassSecurityTrustStyle(style);

See also https://stackoverflow.com/a/37076868/217408 for an example pipe that allows to apply the bypassSecurityXxx methods directly in bindings.

1 Answers1