{"id":"CVE-2026-54267","aliases":["GHSA-rgjc-h3x7-9mwg"],"title":"Angular Client Hydration DOM Clobbering & Response-Cache Poisoning","summary":"Angular Client Hydration DOM Clobbering & Response-Cache Poisoning","severity":"high","cwe":["CWE-79","CWE-471"],"vendor":"angular","product":"@angular/core","ecosystem":"npm","affected":["@angular/core >= 22.0.0-next.0, < 22.0.1","@angular/core >= 21.0.0-next.0, < 21.2.17","@angular/core >= 20.0.0-next.0, < 20.3.25","@angular/core <= 19.2.25"],"patched":["@angular/core 22.0.1","@angular/core 21.2.17","@angular/core 20.3.25"],"published":"2026-06-15","updated":"2026-06-15","source":"GHSA","sourceUrl":"https://github.com/advisories/GHSA-rgjc-h3x7-9mwg","references":[{"url":"https://github.com/angular/angular/security/advisories/GHSA-rgjc-h3x7-9mwg"},{"url":"https://github.com/angular/angular/pull/69064"},{"url":"https://github.com/angular/angular/commit/6bde84fa8e6a5770b54040fbbc9bf10d5d0386fa"},{"url":"https://github.com/advisories/GHSA-rgjc-h3x7-9mwg"}],"tags":["ghsa","npm"],"epss":0.00316,"epssPercentile":0.24723,"ingestedAt":"2026-07-07T15:41:58.966Z","slug":"CVE-2026-54267","body":"## Overview\n\nTo optimize client-side bootstrap in Server-Side Rendered (SSR) environments, Angular supports **Hydration** via `provideClientHydration()`. During SSR, Angular serializes the application's runtime state (such as cached `HttpClient` responses) and outputs it into the HTML stream as a `<script>` tag with a predictable identifier:\n\n```html\n<script type=\"application/json\" id=\"ng-state\">\n    {\"some-api-url\": {\"body\": ...}}\n</script>\n````\n\nDuring client bootstrap, Angular recovers this state by looking up the element via `document.getElementById('ng-state')` and parsing its text content.\n\nBecause the DOM element lookup for the state container is predictable and relies solely on the ID selector (`ng-state`), it is susceptible to **DOM Clobbering**.\n\nIf the application binds untrusted user input or CMS content to element properties such as `id` (e.g., `<div [id]=\"userInput\">` or `<a id=\"ng-state\">`) *before* the genuine `<script>` tag is parsed by the browser, the attacker-controlled element takes precedence in the DOM lookup.\n\nDuring hydration, when Angular calls `document.getElementById('ng-state')`, the browser returns the attacker's clobbered element. Angular then attempts to parse the text content or attributes of this clobbered element as JSON.\n\n### Impact\n\nBy clobbering the state element, the attacker can inject a custom JSON payload into Angular's `TransferState` cache. The most critical exploitation vector is poisoning the **HTTP Transfer Cache**.\n\n1. The attacker injects a clobbered `ng-state` element containing custom JSON.  \n2. The JSON maps a key (representing a target API endpoint URL) to a malicious payload of the attacker's choice.  \n3. During client-side initialization, Angular's `HttpClient` checks `TransferState` before making requests. Finding the poisoned key, `HttpClient` returns the forged response instantly instead of requesting the genuine backend API.\n\nDepending on how the application processes and renders the affected API response, this can lead to:\n\n* **DOM-based Cross-Site Scripting (XSS)** if poisoned fields are rendered using unsafe bindings.  \n* **Privilege Escalation** by spoofing user info or session details retrieved from poisoned API payloads.  \n* **UI Hijacking** and redirection by spoofing configuration endpoints.\n\n### Patched Versions\n\n* 22.0.1  \n* 21.2.17  \n* 20.3.25\n\n### Workarounds\n\nIf you cannot immediately update to a patched Angular version, apply the following workarounds:\n\n#### A. Avoid Dynamic/User-Controlled IDs\n\nAvoid binding raw user-supplied values or dynamic CMS IDs directly to element attributes. If dynamic IDs are required, sanitize them or prepend a static safe prefix:\n\n```html\n<!-- Vulnerable Pattern -->\n<div [id]=\"userControlledInput\">...</div>\n\n<!-- Mitigated Pattern -->\n<div [id]=\"'safe-prefix-' + userControlledInput\">...</div>\n```\n\n#### B. Configure a Custom Application ID\n\nDeclaring a unique, non-predictable `APP_ID` changes the ID suffix of the state element, making it harder for attackers to predict and target:\n\n```ts\n// app.config.ts\n\nimport { APP_ID } from '@angular/core';\nimport { provideClientHydration } from '@angular/platform-browser';\n\nexport const appConfig = {\n  providers: [\n    { provide: APP_ID, useValue: 'unique-obfuscated-app-id' },\n    provideClientHydration()\n  ]\n};\n\n```\n\nThis changes the state element lookup ID from `ng-state` to `unique-obfuscated-app-id-state`.\n\n## Affected packages\n\n- `@angular/core >= 22.0.0-next.0, < 22.0.1`\n- `@angular/core >= 21.0.0-next.0, < 21.2.17`\n- `@angular/core >= 20.0.0-next.0, < 20.3.25`\n- `@angular/core <= 19.2.25`\n\n## Remediation\n\nUpgrade to a patched release:\n\n- `@angular/core 22.0.1`\n- `@angular/core 21.2.17`\n- `@angular/core 20.3.25`","depth":"twilight","depthScore":41,"depthScoreParts":{"impact":41.3,"likelihood":0.1,"exploitation":0,"ransomware":0},"changes":[]}