Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
Yes
Description
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:
<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 ) 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-state element 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 HttpClient checks TransferState before making requests. Finding the poisoned key, HttpClient returns 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.
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
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-state element 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 HttpClient checks TransferState before making requests. Finding the poisoned key, HttpClient returns 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.
Please provide the environment you discovered this bug in (run ng version)
ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 19.2.27
Node: 24.16.0 (Unsupported)
Package Manager: npm 11.13.0
OS: win32 x64
Angular: 19.2.25
... common, compiler, compiler-cli, core, service-worker
Package Version
-------------------------------------------------------------
@angular-devkit/architect 0.1902.27
@angular-devkit/build-angular 19.2.27
@angular-devkit/core 19.2.27
@angular-devkit/schematics 19.2.27
@angular/animations 19.2.20
@angular/cdk 19.2.19
@angular/cli 19.2.27
@angular/forms 19.2.20
@angular/google-maps 19.2.19
@angular/material 19.2.19
@angular/material-moment-adapter 19.2.19
@angular/platform-browser 19.2.20
@angular/platform-browser-dynamic 19.2.20
@angular/router 19.2.20
@schematics/angular 19.2.27
rxjs 7.8.2
typescript 5.5.4
zone.js 0.15.1
Anything else?
No response
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
Yes
Description
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:
<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 ) 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-state element 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 HttpClient checks TransferState before making requests. Finding the poisoned key, HttpClient returns 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.
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run
ng version)Anything else?
No response