GHSA-mpr7-6m5w-76rw Astro: Arbitrary CSS injection in Astro View Transitions

• npm astro: >= 7.1.0, < 7.3.3 → fixed in 7.3.3

Summary Astro's server-side View Transition CSS generator did not keep string animation properties within their generated CSS declarations. In an application that passes attacker-controlled data into an animation property such as `duration`, a value containing CSS delimiters could terminate the declaration and rule, then add attacker-selected CSS to the server-rendered page. The injected content remains inside the generated `` element. It cannot terminate that element or inject HTML or JavaScript because Astro escapes `` element. CSS delimiters such as `;`, `{`, and `}` remained active, allowing a value to escape its intended declaration and add another rule. The shared serializer handles `duration`, `delay`, `easing`, `direction`, `fillMode`, and animation names, so custom transition objects using those string properties followed the same path. The fix encodes CSS declaration delimiters while serializing each animation value. Supported CSS functions and strings, including `calc()` and `var()`, remain unchanged. Proof of Concept Using `[email protected]`, create an on-demand rendered page: ```astro --- import { fade } from "astro:transitions"; const duration = Astro.url.searchParams.get("duration") ?? "1ms"; --- SAFE ``` Request the page with: ```text /?duration=1ms%3B%7D%23target%7Bcolor%3Argb(1%2C2%2C3)%3Bfont-size%3A37px%7Dx%7Banimation-duration%3A1ms ``` Before the fix, the generated stylesheet contains an active rule equivalent to: ```css target { color: rgb(1, 2, 3); font-size: 37px; } ``` In Chromium, the target's computed styles change to `rgb(1, 2, 3)` and `37px`. This behavior is reproducible in a production standalone SSR build, not only in the development server. Impact An attacker can inject CSS into the affected application's rendered page when the application places attacker-controlled data into a transition animation value. The CSS can restyle or conceal content, reposition existing controls, add generated text, or otherwise misrepresent the page's UI. CSS selectors and conditional resource loads may expose data already present in selectable DOM attributes in some applications, depending on the page and its Content Security Policy. The issue does not expose cookies, server-only values, arbitrary DOM text, or cross-origin response data by itself. Affected Versions `astro >= 7.1.0, ` element and injecting HTML or JavaScript. Patched Versions This issue is patched in `[email protected]`. Fix: https://github.com/withastro/astro/pull/17970 Workarounds Do not pass untrusted or request-derived values into View Transition animation properties. If dynamic values are required, validate them according to the expected CSS grammar before constructing the transition. For `duration` and `delay`, prefer finite numbers or strictly validated CSS time values. Credits Reported by @avrlab233.