{"id":"CVE-2026-54267","aliases":["GHSA-rgjc-h3x7-9mwg"],"url":"https://o3.security/vulnerability/CVE-2026-54267","summary":"Angular Client Hydration DOM Clobbering & Response-Cache Poisoning","details":"To 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`.","published":"2026-06-22T15:30:48.699Z","modified":"2026-08-12T03:51:11.729540876Z","cvss":null,"epss":{"score":0.00316,"percentile":0.24017,"asOf":"2026-09-01"},"cisaKev":null,"exploitsKnown":0,"affectedPackages":[{"ecosystem":"npm","name":"@angular/core","fixedVersion":"22.0.1"},{"ecosystem":"npm","name":"@angular/core","fixedVersion":"21.2.17"},{"ecosystem":"npm","name":"@angular/core","fixedVersion":"20.3.25"},{"ecosystem":"npm","name":"@angular/core","fixedVersion":null}],"fix":{"url":"https://github.com/angular/angular/commit/6bde84fa8e6a5770b54040fbbc9bf10d5d0386fa","label":"angular/angular@6bde84f"},"references":[{"type":"ADVISORY","url":"https://github.com/CVEProject/cvelistV5/tree/main/cves/2026/54xxx/CVE-2026-54267.json"},{"type":"ADVISORY","url":"https://github.com/angular/angular/security/advisories/GHSA-rgjc-h3x7-9mwg"},{"type":"ADVISORY","url":"https://nvd.nist.gov/vuln/detail/CVE-2026-54267"},{"type":"FIX","url":"https://github.com/angular/angular/commit/6bde84fa8e6a5770b54040fbbc9bf10d5d0386fa"},{"type":"FIX","url":"https://github.com/angular/angular/pull/69064"},{"type":"PACKAGE","url":"https://github.com/angular/angular"}],"provenance":{"sources":["OSV.dev","FIRST.org (EPSS)"],"lastVerified":"2026-08-12T03:51:11.729540876Z"}}