Astro is a web framework for content-driven websites. From 2.9.0 until 7.1.0, Astro's server-side View Transition CSS generator interpolates animation properties into an inline style element without escaping them for CSS and HTML contexts. An attacker-controlled View Transition animation value such as duration can terminate the generated style element and inject arbitrary HTML or JavaScript. The affected code is packages/astro/src/runtime/server/transition.ts; renderTransition passes sheet.toString() into markHTMLString(), while addAnimationProperty serializes duration through toTimeValue() and also handles easing, direction, delay, fillMode, and name. Exploitation requires an on-demand or server-rendered route to pass attacker-controlled data into a View Transition animation definition and can execute arbitrary JavaScript in the affected application's origin, allowing access to sensitive page data and authenticated actions available to the victim. This issue is fixed in version 7.1.0.

Affected: npm: astro

## 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 c…