3

I want to sanitize some CSS before I inject it into a <style> tag in the <head> of my app.

I am passing it through the DomSanitizer like this:

const safeCSS = this.domSanitzer.sanitize(SecurityContext.STYLE, css);

But I am getting this error message in the console, which thinks my CSS is unsafe.

WARNING: sanitizing unsafe style value [MY_CSS_HERE]

I want to understand why Angular thinks my CSS is unsafe.

I've put my CSS on codepen as it's quite large, but really simple.

See https://codepen.io/stevedeighton/pen/OvgLVb

Any ideas?

Thanks!

Steve D
  • 587
  • 8
  • 18

1 Answers1

2

You should use bypassSecurityTrustStyle(value: string) instead of sanitize().

Here is the example.

Efe
  • 5,180
  • 2
  • 21
  • 33
  • Here is the docs on it, for reference, @SteveD https://angular.io/api/platform-browser/DomSanitizer – Narm Mar 22 '18 at 15:24
  • 3
    Thanks, but i don't want to simply bypass the security checks, I want to actually check for security issues, in case there are any. – Steve D Mar 22 '18 at 15:38
  • @SteveD, I see. Would you update your question to make that more clear? – Narm Mar 22 '18 at 16:05
  • @Efe I don't see in your example H1 text in red, why are you saying that it's working? – ps0604 Jun 03 '19 at 10:33
  • @ps0604 Actually question's context wasn't to show how to use sanitised styles, just how to eliminate sanitising warning using right method for style sanitising. You can see two examples in the code. One of them uses [`sanitize`](https://angular.io/api/platform-browser/DomSanitizer#sanitize) method which generates warnings, second one uses [`bypassSecurityTrustStyle`](https://angular.io/api/platform-browser/DomSanitizer#bypasssecuritytruststyle) which doesn't generate warnings. – Efe Jun 03 '19 at 12:15