CVE-2026-54267: @angular/core Angular Client Hydration DOM Clobbering Vulnerability

{
  "schema_version" : "1.4.0",
  "id" : "GHSA-rgjc-h3x7-9mwg",
  "modified" : "2026-07-15T22:04:05Z",
  "published" : "2026-06-15T15:16:18Z",
  "aliases" : [ "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`.",
  "severity" : [ {
    "type" : "CVSS_V3",
    "score" : "CVSS:3.1/AV:N/AC:L/PR:N/UI:R/S:C/C:L/I:L/A:N"
  }, {
    "type" : "CVSS_V4",
    "score" : "CVSS:4.0/AV:N/AC:L/AT:N/PR:N/UI:P/VC:H/VI:H/VA:N/SC:N/SI:N/SA:N"
  } ],
  "affected" : [ {
    "package" : {
      "ecosystem" : "npm",
      "name" : "@angular/core"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "22.0.0-next.0"
      }, {
        "fixed" : "22.0.1"
      } ]
    } ]
  }, {
    "package" : {
      "ecosystem" : "npm",
      "name" : "@angular/core"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "21.0.0-next.0"
      }, {
        "fixed" : "21.2.17"
      } ]
    } ]
  }, {
    "package" : {
      "ecosystem" : "npm",
      "name" : "@angular/core"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "20.0.0-next.0"
      }, {
        "fixed" : "20.3.25"
      } ]
    } ]
  }, {
    "package" : {
      "ecosystem" : "npm",
      "name" : "@angular/core"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "0"
      }, {
        "last_affected" : "19.2.25"
      } ]
    } ]
  } ],
  "references" : [ {
    "type" : "WEB",
    "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" : "WEB",
    "url" : "https://github.com/angular/angular/pull/69064"
  }, {
    "type" : "WEB",
    "url" : "https://github.com/angular/angular/commit/6bde84fa8e6a5770b54040fbbc9bf10d5d0386fa"
  }, {
    "type" : "PACKAGE",
    "url" : "https://github.com/angular/angular"
  } ],
  "database_specific" : {
    "cwe_ids" : [ "CWE-471", "CWE-79" ],
    "severity" : "HIGH",
    "github_reviewed" : true,
    "github_reviewed_at" : "2026-06-15T15:16:18Z",
    "nvd_published_at" : "2026-06-22T16:16:39Z"
  }
}