Security implications of allowing users to add arbitrary CSS to pages?

Hello all!

In my project users can create standalone pages under their accounts. These are then visible publicly.

I am thinking about allowing inserting custom CSS (via in-line <style> tag) to allow customization for advanced users. The reason is that with this the pages can be easily customized (like custom color for h1 tags, different backgrounds etc…).

Is there some possible security issue that I am not seeing? Since this is going to be regular CSS in the <style> tag, I don’t think there exists a way to run JavaScript code, right?

Thanks!

If you’re adding this in the server-side rendering, I’d be concerned about the possibility of a JavaScript injection attack.

As a trivial example, let’s say you have something in your template like this:

<style>
{{my_css}}
</style>

Now, what happens if someone supplies something like this?

</style>
<script>
nasty javascript code goes here
</script>
<style>
css styling

Obviously, this is a trivial example and easy to prevent - but this is the type of attack you should be concerned about anytime you allow user-supplied data to be rendered directly in a page.

I see but from what I tried, the script does not get executed if it is inside the style tag. However maybe there are more “creative” ways this can be done?

Notice how the first line of my sample is </style>. That means that whatever follows it in the html is outside the style tag.

1 Like

Doh! You are totally right! Gotta read more carefully next time…

Assuming I would have some regex that removes tags and also the url() property value, is it still unsafe? These pages don’t have any user functionality, they just present data without any login so I am unsure what is the worst that could happen even with arbitrary JS. But maybe it is needless risk…

I’m no expert in JavaScript exploits - I’m not aware of all the ways that JavaScript can be potentially “hidden” in text.
However, to address your second question, the risk isn’t so much about risk to you or your site. The risks are to the end user visiting your page. If it is possible for someone to put JavaScript in your page, you are potentially giving control of the target’s browser to that attacker.
See Cross Site Scripting and Cross Site Request Forgery for introductions into these topics.