Astro: Cross-site scripting via unescaped transition:* directive values on hydrated islands
Summary
When a transition:persist, transition:scope, or transition:persist-props directive is applied to a client-hydrated (client:*) component, Astro copied the directive value onto the rendered ` element without HTML-escaping it. If a developer reflects attacker-controlled input into one of these directives, an attacker can break out of the attribute and inject arbitrary HTML/JavaScript into the server-rendered output, resulting in reflected cross-site scripting (XSS).
Severity
Although a generic reflected XSS scores in the Medium range, exploitation here requires the application developer to have written a non-idiomatic pattern — passing untrusted, request-derived input directly into a transition directive. Astro applications that do not route untrusted input into these directives are unaffected. This mitigating precondition places the real-world severity at Low.
Details
In generateHydrateScript() (packages/astro/src/runtime/server/hydration.ts), every island property is HTML-escaped before serialization — the attrs, props, and opts assignments all pass through escapeHTML(). The transition directives, however, were copied verbatim:
transitionDirectivesToCopyOnIsland.forEach((name) => {
if (typeof props[name] !== 'undefined') {
island.props[name] = props[name]; // not escaped
}
});The element is serialized via renderElement('astro-island', island, false) with shouldEscape=false, and toAttributeString() returns the value unchanged in that mode. As a result there is no downstream re-escaping, and the raw directive value reaches the HTML response. This is the same output sink previously addressed for slot names in GHSA-8hv8-536x-4wqp.
The affected directives are:
- data-astro-transition-scope
(transition:scope) - data-astro-transition-persist
(transition:persist) - data-astro-transition-persist-props
(transition:persist-props)
Note that transition:persist is typed boolean | string, so passing a string value is a supported use of the API.
Proof of Concept
A component that reflects a query parameter into a transition directive:
---
const persist = Astro.url.searchParams.get('persist') ?? 'default';
---Request:
https://example.com/?persist=">Rendered output (before the fix):
>The " closes the attribute and the injected executes in the victim's browser.
Impact
Reflected XSS. An attacker who can induce a victim to visit a crafted URL can execute arbitrary script in the victim's session on the origin, subject to the requirement that the target application reflects untrusted input into one of the affected transition directives.
Affected Versions
astro >= 3.10.0, < 7.0.4 (introduced in 3.10.0, PR #7861).
Patched Versions
astro >= 7.0.4. Fixed in PR #17212 by HTML-escaping transition directive values before they are rendered onto the island element.
Workarounds
Do not pass untrusted or request-derived input into transition:persist, transition:scope, or transition:persist-props. If such input is required, HTML-escape or strictly validate it before passing it to the directive. Upgrading to [email protected]` or later removes the need for manual mitigation.
Credits
Reported by @jlgore.