Csp Style-Src: 'Unsafe-Inline' - Is It Worth It

CSP style-src: 'unsafe-inline' - is it worth it?

Allowing inline styles makes you susceptible to a the "other XSS". Cross Site Styling attacks.

The idea here is that any places where a user can inject a style attribute into your document they can modify the appearance of your page any way they want. I'll list a couple potential attacks ordered by increasing severity:

1. They could turn your page pink, and make it look silly.
2. They could modify the text of your page, making it look like you're saying something offensive that could offend your readership audience.
3. They could make user generated content, like a link they provided appear outside of the normal places where people expect to see user content, making it appear official. (eg, replacing a "Login" button on your site with their own link).
4. Using a carefully crafted style rules they could send any information included on the page to external domains and expose or otherwise use that data maliciously against your users.

The fourth example, with the information being leaked to external domains could be entirely prevented in spite of the unsafe-inline provided you ensure your other CSP rules never allow any kind of request to go to a untrusted or wildcard domain. But the first 3 will always be possible if you miss blocking a style attribute somewhere.

Mike West did a good talk on this for CSSConf a few years back for some more examples.

What CSP is safer - style-src 'none' or style-src 'unsafe-inline'

A policy source of 'none' is the MOST restrictive; it means NO hosts are valid.

From the link I cited above:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

Let's consider a page located at http://example.com/signup.html. It
uses the following policy, disallowing everything but stylesheets from
cdn.example.com.

Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports

CSP - How to solve style-src unsafe-inline -when having dynamically positioned page elements

When you write CSS to elements via JavaScript using the CSSOM, it’s not the same as literally writing style=“...”; rather, you are directly manipulating the DOM [correction: the CSSOM]. CSP allows these types of styles even when not allowing unsafe-inline styles.

(See here for an example. You don’t want to add a literal “style” attribute to the element, but use the CSSOM — https://stackoverflow.com/a/29089970/339440 )

---

Related Topics