Angular's hydration mechanism for SSR outputs a script tag with a fixed ID ('ng-state') containing serialized application state. During client bootstrap, Angular retrieves this element by ID to restore state. Because the ID is predictable, an attacker can inject a DOM element with the same ID before the script tag is parsed, causing Angular to parse attacker-controlled JSON. This enables poisoning of Angular's TransferState cache, particularly the HTTP Transfer Cache used by HttpClient. Consequently, forged API responses can be returned without backend requests, potentially leading to DOM-based XSS, privilege escalation, or UI hijacking. Versions up to and including 19.2.25 are affected. The issue is fixed in versions 20.3.25, 21.2.17, and 22.0.1. Mitigations include avoiding dynamic or user-controlled IDs and setting a custom APP_ID to obfuscate the state element's ID.

An attacker can inject malicious JSON into Angular's TransferState cache by exploiting DOM Clobbering on the predictable 'ng-state' element ID. This allows poisoning of cached HTTP responses, which Angular's HttpClient may return without contacting the backend. Depending on application usage, this can lead to DOM-based cross-site scripting (XSS), privilege escalation by spoofing user or session data, and UI hijacking or redirection by spoofing configuration endpoints.

Fixed versions 20.3.25, 21.2.17, and 22.0.1 are available and should be applied to remediate this vulnerability. If immediate upgrade is not possible, apply workarounds: (1) avoid binding user-controlled or dynamic values directly to element IDs or sanitize them with a static prefix, and (2) configure a custom, unpredictable APP_ID to change the state element's ID from the default 'ng-state' to a unique value, reducing the risk of DOM Clobbering.