Angular Client Hydration DOM Clobbering & Response-Cache Poisoning

QFinch assessment

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:

Potential 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. 1. The attacker injects a clobbered ng-state element containing custom JSON. 2. The JSON maps a key (representing a target API endpoint URL) to a malicious payload of the attacker's choice. 3. 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.