Skip to main content
Vulnerability Database/CVE-2026-114127

CVE-2026-114127: Astro Web Framework XSS Vulnerability

CVE-2026-114127 is a cross-site scripting vulnerability in Astro web framework affecting versions 7.1.0 to 7.3.3. Attackers can inject malicious CSS through animation properties. This article covers technical details, affected versions, impact, and mitigation steps.

Published:

Disclaimer: This content was generated using AI. While we strive for accuracy, please verify critical information with official sources.

Sources: National Vulnerability Database, CISA KEV, Exploit-DB

CVE-2026-114127 Overview

CVE-2026-114127 is a CSS injection vulnerability in Astro, a web framework for content-driven websites. The flaw affects versions 7.1.0 through 7.3.2 and resides in the server-side View Transition CSS generator. The generator fails to contain string animation property values within their declarations, allowing CSS delimiter characters to escape the intended context. Applications that pass attacker-controlled data into properties such as duration, delay, easing, direction, fillMode, or animation names can allow injection of arbitrary CSS rules into server-rendered pages. The vulnerability is classified under [CWE-79] (Improper Neutralization of Input During Web Page Generation).

Critical Impact

Attackers can inject CSS rules that conceal or reposition content, add generated text, misrepresent the interface, and in some cases exfiltrate data already present in selectable DOM attributes through conditional resource loads.

Affected Products

  • Astro framework versions 7.1.0 through 7.3.2
  • Server-side rendered applications using View Transitions
  • Applications passing user-controlled values into animation properties

Discovery Timeline

  • 2026-10-21 - CVE CVE-2026-114127 published to NVD
  • 2026-10-22 - Last updated in NVD database

Technical Details for CVE-2026-114127

Vulnerability Analysis

The vulnerability resides in the addAnimationProperty function within packages/astro/src/runtime/server/transition.ts. The function appends animation property values directly to the generated CSS declaration without neutralizing CSS structural delimiters. An attacker who controls input flowing into animation-related properties can inject the ;, {, or } characters to terminate the current declaration and add arbitrary CSS rules to the server-rendered stylesheet.

The generated stylesheet still escapes literal less-than characters, which prevents the attacker from terminating the <style> element or directly injecting HTML or JavaScript. The impact is therefore limited to CSS-level manipulation: concealing or repositioning content, adding generated text via ::before and ::after pseudo-elements, and misrepresenting the user interface. Applications may also leak data present in selectable DOM attributes through CSS attribute selectors paired with conditional background-image loads.

Root Cause

The root cause is missing output encoding when serializing animation values into the generated CSS. The function wrote attacker-controlled strings directly into the stylesheet without escaping CSS delimiter characters, violating the structural boundary of the declaration.

Attack Vector

Exploitation requires an application that forwards attacker-controlled input into a View Transition animation property. The attacker supplies a crafted string containing CSS delimiters followed by malicious rules. User interaction with the rendered page is required for impact.

typescript
// Patch from Astro commit 0b4dc3a211910b589d3805ab4dfedf11b0e712bb
// Keep animation values within their declaration while preserving valid CSS functions and strings.
const CSS_VALUE_DELIMITERS = /[;{}]/g;

function escapeCSSValue(value: string | number) {
	return value.toString().replace(CSS_VALUE_DELIMITERS, (character) => {
		return `\\${character.charCodeAt(0).toString(16).toUpperCase()} `;
	});
}

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

Source: GitHub Commit 0b4dc3a

Detection Methods for CVE-2026-114127

Indicators of Compromise

  • Unexpected ;, {, or } characters appearing in server-rendered <style> blocks emitted by the Astro View Transition generator.
  • Rendered pages containing CSS rules that reference external resources (for example, background-image: url(...)) tied to attribute selectors on sensitive form fields.
  • Visual anomalies such as hidden or repositioned UI elements, injected pseudo-element text, or spoofed login prompts in production builds.

Detection Strategies

  • Audit application source code for user input flowing into View Transition animation properties including duration, delay, easing, direction, fillMode, and animation names.
  • Review generated HTML output for malformed CSS declarations in style blocks produced by Astro's server renderer.
  • Add integration tests that submit CSS delimiter characters into fields that are rendered through View Transitions and assert that output is properly escaped.

Monitoring Recommendations

  • Monitor outbound network requests from end-user browsers for unexpected resource loads originating from CSS attribute-selector matches.
  • Deploy a Content Security Policy that restricts img-src, style-src, and font-src to trusted origins to limit CSS-based exfiltration channels.
  • Log and alert on anomalous referer patterns tied to static asset endpoints that could serve as CSS exfiltration beacons.

How to Mitigate CVE-2026-114127

Immediate Actions Required

  • Upgrade Astro to version 7.3.3 or later, which contains the fix delivered in pull request #17970.
  • Inventory all code paths that forward request data, query parameters, or persisted user content into View Transition animation properties.
  • Validate and strictly type animation property inputs on the server; reject values containing CSS structural characters.

Patch Information

The vulnerability is fixed in Astro 7.3.3. The patch introduces an escapeCSSValue helper that converts the ;, {, and } characters to CSS hex escape sequences before writing them into animation declarations. See the GitHub Security Advisory GHSA-mpr7-6m5w-76rw, GitHub Pull Request #17970, and the Astro 7.3.3 Release Notes.

Workarounds

  • Until upgrading, treat all animation property inputs as untrusted and apply allow-list validation that rejects any value containing ;, {, or }.
  • Avoid passing dynamic strings into View Transition animation names, easing functions, or duration values; use static predefined options wherever possible.
  • Deploy a restrictive Content Security Policy to reduce the exfiltration surface available to injected CSS rules.
bash
# Upgrade Astro to the patched version
npm install astro@7.3.3

# Verify the installed version
npm list astro

Disclaimer: This content was generated using AI. While we strive for accuracy, please verify critical information with official sources.

Sources: National Vulnerability Database, CISA KEV, Exploit-DB

Experience the Most Advanced Cybersecurity Platform

See how the world’s most intelligent, autonomous cybersecurity platform can protect your organization today and into the future.