CVE-2026-114127

Astro is a web framework for content-driven websites. From 7.1.0 until 7.3.3, Astro's server-side View Transition CSS generator does not keep string animation properties within their generated declarations. An application that passes attacker-controlled data into properties such as duration, delay, easing, direction, fillMode, or animation names can allow CSS delimiters to terminate the declaration and add attacker-selected rules to the server-rendered page. The generated stylesheet still escapes literal less-than characters, so the injected content cannot terminate the style element or directly inject HTML or JavaScript. The injected CSS can conceal or reposition content, add generated text, and otherwise misrepresent the interface; some applications may also expose data already present in selectable DOM attributes through conditional resource loads. This issue is fixed in 7.3.3.

Astro is a web framework for content-driven websites. From 7.1.0 until 7.3.3, Astro's server-side View Transition CSS generator does not keep string animation properties within their generated declarations. An application that passes attacker-controlled data into properties such as duration, delay, easing, direction, fillMode, or animation names can allow CSS delimiters to terminate the declaration and add attacker-selected rules to the server-rendered page. The generated stylesheet still escapes literal less-than characters, so the injected content cannot terminate the style element or directly inject HTML or JavaScript. The injected CSS can conceal or reposition content, add generated text, and otherwise misrepresent the interface; some applications may also expose data already present in selectable DOM attributes through conditional resource loads. This issue is 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 <style> element. It cannot terminate that element or inject HTML or JavaScript because Astro escapes < before emitting the stylesheet.

Severity

Exploitation requires an application to pass untrusted, request-derived, or user-controlled content directly into a transition animation value. This is an uncommon application pattern, and applications using static or otherwise trusted transition values are unaffected.

The resulting capability is limited to CSS in the rendered document. The proof of concept does not demonstrate JavaScript execution, HTML injection, an origin-boundary bypass, or access to server-only data.

Details

Animation values are collected by stringifyAnimations() in packages/astro/src/runtime/server/transition.ts and passed to addAnimationProperty(). String values were converted directly with toString():

function addAnimationProperty(builder: AnimationBuilder, prop: string, value: string | number) {
  let arr = builder[prop];
  if (Array.isArray(arr)) {
    arr.push(value.toString());
  } else {
    builder[prop] = [value.toString()];
  }
}

The animation builder then interpolated each value into a declaration:

out += `\n\t${k}: ${value.join(', ')};`;

The completed stylesheet passes through escapeStyleText(), which escapes literal < characters to keep the content inside its HTML <style> 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:

---
import { fade } from "astro:transitions";
const duration = Astro.url.searchParams.get("duration") ?? "1ms";
---
<div id="target" transition:animate={fade({ duration })}>SAFE</div>

Request the page with:

/?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:

#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, <= 7.3.2.

Versions through 7.0.9 are covered by GHSA-4g3v-8h47-v7g6 / CVE-2026-73422, which had the stronger impact of escaping the <style> element and injecting HTML or JavaScript.

Patched Versions

This issue is patched in [email protected]. Fix:…

Astro is a web framework for content-driven websites. From 7.1.0 until 7.3.3, Astro's server-side View Transition CSS generator does not keep string animation properties within their generated declarations. An application that passes attacker-controlled data into properties such as duration, delay, easing, direction, fillMode, or animation names can allow CSS delimiters to terminate the declaration and add attacker-selected rules to the server-rendered page. The generated stylesheet still escapes literal less-than characters, so the injected content cannot terminate the style element or directly inject HTML or JavaScript. The injected CSS can conceal or reposition content, add generated text, and otherwise misrepresent the interface; some applications may also expose data already present in selectable DOM attributes through conditional resource loads. This issue is fixed in 7.3.3.

Astro is a web framework for content-driven websites. From 7.1.0 until 7.3.3, Astro's server-side View Transition CSS generator does not keep string animation properties within their generated declarations. An application that passes attacker-controlled data into properties such as duration, delay, easing, direction, fillMode, or animation names can allow CSS delimiters to terminate the declaration and add attacker-selected rules to the server-rendered page. The generated stylesheet still escapes literal less-than characters, so the injected content cannot terminate the style element or directly inject HTML or JavaScript. The injected CSS can conceal or reposition content, add generated text, and otherwise misrepresent the interface; some applications may also expose data already present in selectable DOM attributes through conditional resource loads. This issue is 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 <style> element. It cannot terminate that element or inject HTML or JavaScript because Astro escapes < before emitting the stylesheet.

Severity

Exploitation requires an application to pass untrusted, request-derived, or user-controlled content directly into a transition animation value. This is an uncommon application pattern, and applications using static or otherwise trusted transition values are unaffected.

The resulting capability is limited to CSS in the rendered document. The proof of concept does not demonstrate JavaScript execution, HTML injection, an origin-boundary bypass, or access to server-only data.

Details

Animation values are collected by stringifyAnimations() in packages/astro/src/runtime/server/transition.ts and passed to addAnimationProperty(). String values were converted directly with toString():

function addAnimationProperty(builder: AnimationBuilder, prop: string, value: string | number) {
  let arr = builder[prop];
  if (Array.isArray(arr)) {
    arr.push(value.toString());
  } else {
    builder[prop] = [value.toString()];
  }
}

The animation builder then interpolated each value into a declaration:

out += `\n\t${k}: ${value.join(', ')};`;

The completed stylesheet passes through escapeStyleText(), which escapes literal < characters to keep the content inside its HTML <style> 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:

---
import { fade } from "astro:transitions";
const duration = Astro.url.searchParams.get("duration") ?? "1ms";
---
<div id="target" transition:animate={fade({ duration })}>SAFE</div>

Request the page with:

/?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:

#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, <= 7.3.2.

Versions through 7.0.9 are covered by GHSA-4g3v-8h47-v7g6 / CVE-2026-73422, which had the stronger impact of escaping the <style> element and injecting HTML or JavaScript.

Patched Versions

This issue is patched in [email protected]. Fix:…

TuxCare rebuilt astro to address 2 CVEs. Fixed in 5.18.2-tuxcare.3.