Angular is a development platform for building mobile and desktop web applications using TypeScript/JavaScript and other languages. Prior to 22.0.1, 21.2.17, and 20.3.25, 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. During client bootstrap, Angular recovers this state by looking up the element via document.getElementById('ng-state') and parsing its text content. Because 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. If 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. During 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. This vulnerability is fixed in 22.0.1, 21.2.17, and 20.3.25.
Angular Client Hydration DOM Clobbering & Response-Cache Poisoning
Problem type
- CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')
- CWE-471: Modification of Assumed-Immutable Data (MAID)
Affected products
angular
>= 22.0.0-next.0 < 22.0.1 - AFFECTED
>= 21.0.0-next.0 < 21.2.17 - AFFECTED
>= 20.0.0-next.0 < 20.3.25 - AFFECTED
<= 19.2.25 - AFFECTED
References
https://github.com/angular/angular/security/advisories/GHSA-rgjc-h3x7-9mwg
https://github.com/angular/angular/pull/69064
https://github.com/angular/angular/commit/6bde84fa8e6a5770b54040fbbc9bf10d5d0386fa
GitHub Security Advisories
GHSA-rgjc-h3x7-9mwg
Angular Client Hydration DOM Clobbering & Response-Cache Poisoning
https://github.com/advisories/GHSA-rgjc-h3x7-9mwgTo 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:
<script type="application/json" id="ng-state">
{"some-api-url": {"body": ...}}
</script>
During client bootstrap, Angular recovers this state by looking up the element via document.getElementById('ng-state') and parsing its text content.
Because 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.
If 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.
During 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.
Impact
By 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.
- The attacker injects a clobbered
ng-stateelement containing custom JSON. - The JSON maps a key (representing a target API endpoint URL) to a malicious payload of the attacker's choice.
- During client-side initialization, Angular's
HttpClientchecksTransferStatebefore making requests. Finding the poisoned key,HttpClientreturns the forged response instantly instead of requesting the genuine backend API.
Depending on how the application processes and renders the affected API response, this can lead to:
- DOM-based Cross-Site Scripting (XSS) if poisoned fields are rendered using unsafe bindings.
- Privilege Escalation by spoofing user info or session details retrieved from poisoned API payloads.
- UI Hijacking and redirection by spoofing configuration endpoints.
Patched Versions
- 22.0.1
- 21.2.17
- 20.3.25
Workarounds
If you cannot immediately update to a patched Angular version, apply the following workarounds:
A. Avoid Dynamic/User-Controlled IDs
Avoid 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:
<!-- Vulnerable Pattern -->
<div [id]="userControlledInput">...</div>
<!-- Mitigated Pattern -->
<div [id]="'safe-prefix-' + userControlledInput">...</div>
B. Configure a Custom Application ID
Declaring a unique, non-predictable APP_ID changes the ID suffix of the state element, making it harder for attackers to predict and target:
// app.config.ts
import { APP_ID } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig = {
providers: [
{ provide: APP_ID, useValue: 'unique-obfuscated-app-id' },
provideClientHydration()
]
};
This changes the state element lookup ID from ng-state to unique-obfuscated-app-id-state.
JSON source
https://cveawg.mitre.org/api/cve/CVE-2026-54267Click to expand
{
"dataType": "CVE_RECORD",
"dataVersion": "5.2",
"cveMetadata": {
"cveId": "CVE-2026-54267",
"assignerOrgId": "a0819718-46f1-4df5-94e2-005712e83aaa",
"assignerShortName": "GitHub_M",
"dateUpdated": "2026-06-22T16:00:36.910Z",
"dateReserved": "2026-06-12T17:13:32.279Z",
"datePublished": "2026-06-22T15:30:48.699Z",
"state": "PUBLISHED"
},
"containers": {
"cna": {
"providerMetadata": {
"orgId": "a0819718-46f1-4df5-94e2-005712e83aaa",
"shortName": "GitHub_M",
"dateUpdated": "2026-06-22T15:30:48.699Z"
},
"title": "Angular Client Hydration DOM Clobbering & Response-Cache Poisoning",
"descriptions": [
{
"lang": "en",
"value": "Angular is a development platform for building mobile and desktop web applications using TypeScript/JavaScript and other languages. Prior to 22.0.1, 21.2.17, and 20.3.25, 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. During client bootstrap, Angular recovers this state by looking up the element via document.getElementById('ng-state') and parsing its text content. Because 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. If 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. During 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. This vulnerability is fixed in 22.0.1, 21.2.17, and 20.3.25."
}
],
"affected": [
{
"vendor": "angular",
"product": "angular",
"versions": [
{
"version": ">= 22.0.0-next.0 < 22.0.1",
"status": "affected"
},
{
"version": ">= 21.0.0-next.0 < 21.2.17",
"status": "affected"
},
{
"version": ">= 20.0.0-next.0 < 20.3.25",
"status": "affected"
},
{
"version": "<= 19.2.25",
"status": "affected"
}
]
}
],
"problemTypes": [
{
"descriptions": [
{
"lang": "en",
"description": "CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')",
"cweId": "CWE-79",
"type": "CWE"
}
]
},
{
"descriptions": [
{
"lang": "en",
"description": "CWE-471: Modification of Assumed-Immutable Data (MAID)",
"cweId": "CWE-471",
"type": "CWE"
}
]
}
],
"references": [
{
"url": "https://github.com/angular/angular/security/advisories/GHSA-rgjc-h3x7-9mwg",
"name": "https://github.com/angular/angular/security/advisories/GHSA-rgjc-h3x7-9mwg",
"tags": [
"x_refsource_CONFIRM"
]
},
{
"url": "https://github.com/angular/angular/pull/69064",
"name": "https://github.com/angular/angular/pull/69064",
"tags": [
"x_refsource_MISC"
]
},
{
"url": "https://github.com/angular/angular/commit/6bde84fa8e6a5770b54040fbbc9bf10d5d0386fa",
"name": "https://github.com/angular/angular/commit/6bde84fa8e6a5770b54040fbbc9bf10d5d0386fa",
"tags": [
"x_refsource_MISC"
]
}
],
"metrics": [
{}
]
},
"adp": [
{
"providerMetadata": {
"orgId": "134c704f-9b21-4f2e-91b3-4a467353bcc0",
"shortName": "CISA-ADP",
"dateUpdated": "2026-06-22T16:00:36.910Z"
},
"title": "CISA ADP Vulnrichment",
"metrics": [
{}
]
}
]
}
}