GHSA-4g3v-8h47-v7g6

## Summary Astro's server-side View Transition CSS generator interpolates animation properties into an inline `<style>` element without escaping them for the CSS and HTML contexts. An attacker-controlled value passed to an animation property such as `duration` can contain a `</style>` sequence, terminate the generated style element, and inject arbitrary HTML or JavaScript. This is similar to GHSA-8hv8-536x-4wqp, but exploits a different injection point: unescaped View Transition animation values in a server-generated `<style>` element rather than an unescaped slot name in a hydration template. Like GHSA-8hv8-536x-4wqp, exploitation requires an application to pass attacker-controlled data to an Astro API. However, the value is subsequently inserted into the HTML response without context-appropriate escaping by Astro. ## Details `packages/astro/src/runtime/server/transition.ts` The generated stylesheet is wrapped in a `<style>` element and marked as HTML-safe: ```ts const css = sheet.toString(); result._metadata.extraHead.push(markHTMLString(`<style>${css}</style>`)); ``` Animation properties are added to the stylesheet without escaping: ```ts if (anim.duration) { addAnimationProperty(builder, 'animation-duration', toTimeValue(anim.duration)); } ``` For string values, `toTimeValue()` returns the input unchanged: ```ts export function toTimeValue(num: number | string) { return typeof num === 'number' ? num + 'ms' : num; } ``` As a result, a `duration` value containing `</style>` can escape from the generated style element. Other `TransitionAnimation` properties, including `easing`, `direction`, `delay`, `fillMode`, and `name`, are serialized by the same animation builder. The following PoC only relies on the official `fade()` helper and its `duration` option. ## PoC Using: - `[email protected]` - `@astrojs/[email protected]` ### `astro.config.mjs` ```js import node from '@astrojs/node'; import { defineConfig } from 'astro/config'; export default defineCo