npm · astro
Astro: Cross-site scripting via unescaped transition:* directive values on hydrated islands
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 <astro-island> 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).
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.
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 <astro-island> 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.
A component that reflects a query parameter into a transition directive:
---
const persist = Astro.url.searchParams.get('persist') ?? 'default';
---
<Island client:load transition:persist={persist} />
Request:
https://example.com/?persist="><img src=x onerror=alert(document.domain)>
Rendered output (before the fix):
<astro-island … data-astro-transition-persist=""><img src=x onerror=alert(document.domain)>></astro-island>
The " closes the attribute and the injected <img onerror=…> executes in the victim's browser.
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.
astro >= 3.10.0, < 7.0.4 (introduced in 3.10.0, PR #7861).
astro >= 7.0.4. Fixed in PR #17212 by HTML-escaping transition directive values before they are rendered onto the island element.
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 astro@7.0.4 or later removes the need for manual mitigation.
Reported by @jlgore.
Is your project exposed to this? Stateward checks every dependency on every pull request and flags it only if your code actually reaches it.
Check my repoSources: CISA KEV (public domain), OSV.dev & GitHub Advisory Database (CC-BY-4.0), FIRST EPSS, NVD/CWE (public domain). Served live from the Stateward advisory database.