How to keep !important for a css attribute?

[nguyenap]

I just have a question. In demos/hooks-sanitize-css-demo.html; i changed color with !important attr ;

<style>
                big {
                    list-style: url(https://leaking.via/css-list-style);
                    list-style-image: url(https://leaking.via/css-list-style-image);
                    background: url(https://leaking.via/css-background);
                    background-image: url(https://leaking.via/css-background-image);
                    border-image: url(https://leaking.via/css-border-image);
                    border-image-source: url(https://leaking.via/css-border-image-source);
                    shape-outside: url(https://leaking.via/css-shape-outside);
                    cursor: url(https://leaking.via/css-cursor), auto;
                    color:red !important;
                }
 </style>

I checked in the 'uponSanitizeElement ' hook event, but The !important has been removed the node value.

[cure53]

Hmm, I think you need to use special magic for this:

https://stackoverflow.com/questions/13765266/how-can-one-set-a-css-property-with-the-important-flag-via-the-dom

[cure53]

Closing this as likely not our bug.

[nguyenap]

Thank you for your reply, I'll look into it more but have no other ideas as this "!important" is being left out of the sanitize function and we can't determine which css attribute it goes with .

[cure53]

Maybe it is possible that the browser removes it when processing the markup internally? At least from what I can see, we have no logic in DOMPurify that does anything with that directive.

I tested, and it looks like DOMPurify indeed leaves the important declaration untouched:

DOMPurify.sanitize('ABC<style>big {color:red !important;}</style><big>HELLO</big>')
//"ABC<style>big {color:red !important;}</style><big>HELLO</big>" 

So, my guess is, the problem is caused by something else?

[nguyenap]

Thanks, I also looked at the source code of DOMPurify and didn't see any problems. So maybe it comes in functions that are handled in event hooks. I will test these functions again, and post back if there are any investigation results

[cure53]

Aye, thanks :)