Summary
cx() in hono/css composes class names from plain strings but marks the result as already-escaped without HTML-escaping the input. When the result is used as a JSX class attribute during server-side rendering, the value is written into the attribute unescaped, so untrusted input can break out of the class attribute and inject arbitrary markup, leading to Cross-Site Scripting (XSS).
Details
Because the composed value is treated as pre-escaped, the HTML attribute escaping normally applied to interpolated values is skipped, and characters such as " pass through unescaped — allowing a value to terminate the attribute and add further attributes or elements. This arises when an application passes untrusted, user-controlled input as a class name to cx(), for example when merging a base class with an externally provided className.
Impact
During server-side rendering, an attacker who controls a value passed to cx() can inject arbitrary HTML into the page, resulting in stored or reflected XSS in the victim's browser.
This may lead to:
- Execution of attacker-controlled script in the victim's browser session.
- Session hijacking, credential theft, or actions performed on behalf of the victim.
Applications are affected only if they render JSX server-side and pass untrusted input as a class name to cx().
References
Summary
cx()inhono/csscomposes class names from plain strings but marks the result as already-escaped without HTML-escaping the input. When the result is used as a JSXclassattribute during server-side rendering, the value is written into the attribute unescaped, so untrusted input can break out of theclassattribute and inject arbitrary markup, leading to Cross-Site Scripting (XSS).Details
Because the composed value is treated as pre-escaped, the HTML attribute escaping normally applied to interpolated values is skipped, and characters such as
"pass through unescaped — allowing a value to terminate the attribute and add further attributes or elements. This arises when an application passes untrusted, user-controlled input as a class name tocx(), for example when merging a base class with an externally providedclassName.Impact
During server-side rendering, an attacker who controls a value passed to
cx()can inject arbitrary HTML into the page, resulting in stored or reflected XSS in the victim's browser.This may lead to:
Applications are affected only if they render JSX server-side and pass untrusted input as a class name to
cx().References