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?
Using the attribute selector, a 3rd party CSS can style the element differently based on different attribute value. One, for example, could load a different background image for different attribute value. By knowing which background image is loaded, one could then know the value of the attribute.
A 3rd party script is a JavaScript resource loaded into a webpage to provide functionality beyond the core functionality of the website. Added content: A third-party JavaScript refers to a script that is able to become embedded by a third-party vendor directly into any website.
In general, you should always use async or defer for third party scripts (unless the script does something necessary for the critical rendering path): Use async if it's important to have the script run earlier in the loading process. This might include some analytics scripts, for example.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With