Navigating the Security Risk of Using Arbitrary Values in Tailwind CSS

[dansasser]

I recently discovered a couple of instances where there is an opportunity for XXS attacks when using arbitrary values in Tailwind CSS utility classes.
You can read more about it in my article at:

• dev.to

• Medium

• My Blog

[adamwathan]

If an attacker manages to inject a malicious script into the data-message attribute, it could be executed within the user’s browser, leading to an XSS vulnerability.

Can you share a live demo of the problem you're trying to outline here? There is no risk of anything with the code sample in the blog post as far as I can tell. Even when you use a literal <script> tag as the content of the data attribute nothing you put in the content property becomes actual DOM so no script can run:

https://play.tailwindcss.com/kYO4u0l5PJ

There is no way for this CSS to run a malicious script sitting in a data attribute as far as I know:

.my-class::before {
  content: attr(data-message);
}

If this were possible, the security vulnerability would be with the native CSS attr() function — Tailwind is doing nothing here other than generating the CSS you are asking it to generate.