62

Currently I'm using Modernizr on all my sites and it turns out because of how it works it requires unsafe-inline styles to be allowed. I am already not allowing inline scripts and unsafe-eval for scripts. Curious as to what security risks there are for allowing inline styles?

0

2 Answers 2

88

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.

9
  • Hey nice post, i'm curious though, what if it's a mobile app(downloaded)? would this be considered a threat? i'd assume they would only be able to mess with their own app in that case and make some odd css things to their own app, or?
    – Mattias
    Apr 16, 2016 at 9:43
  • Would this be a webview style app? It would be same attack vector as on normal browser delivered content. Its not the user that is attacking themselves but rather an external (hence "Cross-Site") entity changing the experience you intended for them. This can be hijacked third party JS/CSS (are you verifying everything you package?), improperly sanitized content or various other vectors like images that I'm not yet smart enough to properly understand.
    – jeteon
    May 16, 2016 at 22:42
  • 7
    Couldn't they just as easily mess up your page by modifying classes? I'm still not seeing the benefit.
    – TheCycoONE
    Sep 6, 2018 at 18:35
  • 9
    For anyone that will arrive at this page looking for CSP information, X-XSS-Protection is considered outdated, Firefox never implemented it, and Chrome dropped its support.
    – Linek
    Dec 2, 2019 at 23:50
  • 2
    @InterLinked According to OWASP, the X-XSS-Protection header can even introduce additional security issues on the client side. "As such, it is recommended to set the header as X-XSS-Protection: 0 in order to disable the XSS Auditor, and not allow it to take the default behavior of the browser handling the response." Use CSP instead. Source: owasp.org/www-project-secure-headers/#x-xss-protection
    – DTV Media
    Jun 8, 2021 at 21:00
-1

Personally I find not using unsafe-inline for CSS is impractical. It means I have to use an external style sheet file for EVERY style. Coloring text, centering text etc. It can be done. You can do this by using a main style sheet "main.css" and a file sheet for every page ("index.css", "contect.css", etc). However I am not so stupid that I allow arbitrary code execution; I filter out all less then and grater then signs. I find this to be an unreasonable restriction. Blocking inline JavaScript is not as bad as blocking inline CSS. I can see blocking inline JavaScript. However I don't think I will do that ether. If you are careful to filter your less then and grater then signs (there are some other stupid things you can do besides not filtering these) if you don't make stupid mistakes that allows arbitrary code execution then you are safe. These inline blocks are only created to protect web developers that screw up there code in a way that allows arbitrary code execution. But the blocks make it a bit harder to code. So it's a trade off.

TLDR IMHO not worth blocking inline CSS, worth blocking inline JavaScript but unnecessary. I will NOT consider blocking inline CSS, I am not going to block inline JavaScript but I might consider it.

Experience: I am a web designer that designs in code using HTML CSS JavaScript and PHP. I have my own website that I coded by hand. And I validate with the official w3 validator. I keep up with web design standards like HTML5.

1
  • "You're safe if you don't make mistakes" does not sound like a good security policy to me... Nov 24 at 14:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.