Sanitizing CSS with Angular's DomSanitizer

Question

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!

Efe · Accepted Answer

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

Here is the example.

Donate For Us