Vulnerability-Lookup

GHSA-RGJC-H3X7-9MWG

Vulnerability from github – Published: 2026-06-15 15:16 – Updated: 2026-06-15 15:16

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:

<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**.

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.

### 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:

```html
<!-- 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.

Severity

8.6 (High)


                  
                    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

Show details on source website

JSON

To clipboard

{
  "affected": [
    {
      "package": {
        "ecosystem": "npm",
        "name": "@angular/core"
      },
      "ranges": [
        {
          "events": [
            {
              "introduced": "22.0.0-next.0"
            },
            {
              "fixed": "22.0.1"
            }
          ],
          "type": "ECOSYSTEM"
        }
      ]
    },
    {
      "package": {
        "ecosystem": "npm",
        "name": "@angular/core"
      },
      "ranges": [
        {
          "events": [
            {
              "introduced": "21.0.0-next.0"
            },
            {
              "fixed": "21.2.17"
            }
          ],
          "type": "ECOSYSTEM"
        }
      ]
    },
    {
      "package": {
        "ecosystem": "npm",
        "name": "@angular/core"
      },
      "ranges": [
        {
          "events": [
            {
              "introduced": "20.0.0-next.0"
            },
            {
              "fixed": "20.3.25"
            }
          ],
          "type": "ECOSYSTEM"
        }
      ]
    },
    {
      "package": {
        "ecosystem": "npm",
        "name": "@angular/core"
      },
      "ranges": [
        {
          "events": [
            {
              "introduced": "0"
            },
            {
              "last_affected": "19.2.25"
            }
          ],
          "type": "ECOSYSTEM"
        }
      ]
    }
  ],
  "aliases": [
    "CVE-2026-54267"
  ],
  "database_specific": {
    "cwe_ids": [
      "CWE-471",
      "CWE-79"
    ],
    "github_reviewed": true,
    "github_reviewed_at": "2026-06-15T15:16:18Z",
    "nvd_published_at": null,
    "severity": "HIGH"
  },
  "details": "To optimize client-side bootstrap in Server-Side Rendered (SSR) environments, Angular supports **Hydration** via `provideClientHydration()`. During SSR, Angular serializes the application\u0027s runtime state (such as cached `HttpClient` responses) and outputs it into the HTML stream as a `\u003cscript\u003e` tag with a predictable identifier:\n\n```html\n\u003cscript type=\"application/json\" id=\"ng-state\"\u003e\n    {\"some-api-url\": {\"body\": ...}}\n\u003c/script\u003e\n````\n\nDuring client bootstrap, Angular recovers this state by looking up the element via `document.getElementById(\u0027ng-state\u0027)` 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., `\u003cdiv [id]=\"userInput\"\u003e` or `\u003ca id=\"ng-state\"\u003e`) *before* the genuine `\u003cscript\u003e` tag is parsed by the browser, the attacker-controlled element takes precedence in the DOM lookup.\n\nDuring hydration, when Angular calls `document.getElementById(\u0027ng-state\u0027)`, the browser returns the attacker\u0027s 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\u0027s `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\u0027s choice.  \n3. During client-side initialization, Angular\u0027s `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\u003c!-- Vulnerable Pattern --\u003e\n\u003cdiv [id]=\"userControlledInput\"\u003e...\u003c/div\u003e\n\n\u003c!-- Mitigated Pattern --\u003e\n\u003cdiv [id]=\"\u0027safe-prefix-\u0027 + userControlledInput\"\u003e...\u003c/div\u003e\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 \u0027@angular/core\u0027;\nimport { provideClientHydration } from \u0027@angular/platform-browser\u0027;\n\nexport const appConfig = {\n  providers: [\n    { provide: APP_ID, useValue: \u0027unique-obfuscated-app-id\u0027 },\n    provideClientHydration()\n  ]\n};\n\n```\n\nThis changes the state element lookup ID from `ng-state` to `unique-obfuscated-app-id-state`.",
  "id": "GHSA-rgjc-h3x7-9mwg",
  "modified": "2026-06-15T15:16:18Z",
  "published": "2026-06-15T15:16:18Z",
  "references": [
    {
      "type": "WEB",
      "url": "https://github.com/angular/angular/security/advisories/GHSA-rgjc-h3x7-9mwg"
    },
    {
      "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"
    }
  ],
  "schema_version": "1.4.0",
  "severity": [
    {
      "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",
      "type": "CVSS_V4"
    }
  ],
  "summary": "Angular Client Hydration DOM Clobbering \u0026 Response-Cache Poisoning"
}

CVE-2026-54267 (GCVE-0-2026-54267)

Vulnerability from cvelistv5 – Published: 2026-06-22 15:30 – Updated: 2026-06-22 16:00

Title

Angular Client Hydration DOM Clobbering & Response-Cache Poisoning

Summary

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.

Severity

8.6 (High)


                        
                          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

SSVC

Exploitation: none Automatable: no Technical Impact: total

CISA Coordinator (v2.0.3)

CWE

CWE-79 - Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')
CWE-471 - Modification of Assumed-Immutable Data (MAID)

Assigner

GitHub_M

References

3 references

URL	Tags
https://github.com/angular/angular/security/advis…	x_refsource_CONFIRM
https://github.com/angular/angular/pull/69064	x_refsource_MISC
https://github.com/angular/angular/commit/6bde84f…	x_refsource_MISC

Impacted products

1 product

Vendor	Product	Version
angular	angular	Affected: >= 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

Show details on NVD website

JSON

To clipboard

{
  "containers": {
    "adp": [
      {
        "metrics": [
          {
            "other": {
              "content": {
                "id": "CVE-2026-54267",
                "options": [
                  {
                    "Exploitation": "none"
                  },
                  {
                    "Automatable": "no"
                  },
                  {
                    "Technical Impact": "total"
                  }
                ],
                "role": "CISA Coordinator",
                "timestamp": "2026-06-22T16:00:23.479828Z",
                "version": "2.0.3"
              },
              "type": "ssvc"
            }
          }
        ],
        "providerMetadata": {
          "dateUpdated": "2026-06-22T16:00:36.910Z",
          "orgId": "134c704f-9b21-4f2e-91b3-4a467353bcc0",
          "shortName": "CISA-ADP"
        },
        "title": "CISA ADP Vulnrichment"
      }
    ],
    "cna": {
      "affected": [
        {
          "product": "angular",
          "vendor": "angular",
          "versions": [
            {
              "status": "affected",
              "version": "\u003e= 22.0.0-next.0 \u003c 22.0.1"
            },
            {
              "status": "affected",
              "version": "\u003e= 21.0.0-next.0 \u003c 21.2.17"
            },
            {
              "status": "affected",
              "version": "\u003e= 20.0.0-next.0 \u003c 20.3.25"
            },
            {
              "status": "affected",
              "version": "\u003c= 19.2.25"
            }
          ]
        }
      ],
      "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\u0027s runtime state (such as cached HttpClient responses) and outputs it into the HTML stream as a \u003cscript\u003e tag with a predictable identifier. During client bootstrap, Angular recovers this state by looking up the element via document.getElementById(\u0027ng-state\u0027) 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., \u003cdiv [id]=\"userInput\"\u003e or \u003ca id=\"ng-state\"\u003e) before the genuine \u003cscript\u003e tag is parsed by the browser, the attacker-controlled element takes precedence in the DOM lookup. During hydration, when Angular calls document.getElementById(\u0027ng-state\u0027), the browser returns the attacker\u0027s 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."
        }
      ],
      "metrics": [
        {
          "cvssV4_0": {
            "attackComplexity": "LOW",
            "attackRequirements": "NONE",
            "attackVector": "NETWORK",
            "baseScore": 8.6,
            "baseSeverity": "HIGH",
            "privilegesRequired": "NONE",
            "subAvailabilityImpact": "NONE",
            "subConfidentialityImpact": "NONE",
            "subIntegrityImpact": "NONE",
            "userInteraction": "PASSIVE",
            "vectorString": "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",
            "version": "4.0",
            "vulnAvailabilityImpact": "NONE",
            "vulnConfidentialityImpact": "HIGH",
            "vulnIntegrityImpact": "HIGH"
          }
        }
      ],
      "problemTypes": [
        {
          "descriptions": [
            {
              "cweId": "CWE-79",
              "description": "CWE-79: Improper Neutralization of Input During Web Page Generation (\u0027Cross-site Scripting\u0027)",
              "lang": "en",
              "type": "CWE"
            }
          ]
        },
        {
          "descriptions": [
            {
              "cweId": "CWE-471",
              "description": "CWE-471: Modification of Assumed-Immutable Data (MAID)",
              "lang": "en",
              "type": "CWE"
            }
          ]
        }
      ],
      "providerMetadata": {
        "dateUpdated": "2026-06-22T15:30:48.699Z",
        "orgId": "a0819718-46f1-4df5-94e2-005712e83aaa",
        "shortName": "GitHub_M"
      },
      "references": [
        {
          "name": "https://github.com/angular/angular/security/advisories/GHSA-rgjc-h3x7-9mwg",
          "tags": [
            "x_refsource_CONFIRM"
          ],
          "url": "https://github.com/angular/angular/security/advisories/GHSA-rgjc-h3x7-9mwg"
        },
        {
          "name": "https://github.com/angular/angular/pull/69064",
          "tags": [
            "x_refsource_MISC"
          ],
          "url": "https://github.com/angular/angular/pull/69064"
        },
        {
          "name": "https://github.com/angular/angular/commit/6bde84fa8e6a5770b54040fbbc9bf10d5d0386fa",
          "tags": [
            "x_refsource_MISC"
          ],
          "url": "https://github.com/angular/angular/commit/6bde84fa8e6a5770b54040fbbc9bf10d5d0386fa"
        }
      ],
      "source": {
        "advisory": "GHSA-rgjc-h3x7-9mwg",
        "discovery": "UNKNOWN"
      },
      "title": "Angular Client Hydration DOM Clobbering \u0026 Response-Cache Poisoning"
    }
  },
  "cveMetadata": {
    "assignerOrgId": "a0819718-46f1-4df5-94e2-005712e83aaa",
    "assignerShortName": "GitHub_M",
    "cveId": "CVE-2026-54267",
    "datePublished": "2026-06-22T15:30:48.699Z",
    "dateReserved": "2026-06-12T17:13:32.279Z",
    "dateUpdated": "2026-06-22T16:00:36.910Z",
    "state": "PUBLISHED"
  },
  "dataType": "CVE_RECORD",
  "dataVersion": "5.2"
}

Sightings

Author	Source	Type	Date	Other

Nomenclature

Seen: The vulnerability was mentioned, discussed, or observed by the user.
Confirmed: The vulnerability has been validated from an analyst's perspective.
Published Proof of Concept: A public proof of concept is available for this vulnerability.
Exploited: The vulnerability was observed as exploited by the user who reported the sighting.
Patched: The vulnerability was observed as successfully patched by the user who reported the sighting.
Not exploited: The vulnerability was not observed as exploited by the user who reported the sighting.
Not confirmed: The user expressed doubt about the validity of the vulnerability.
Not patched: The vulnerability was not observed as successfully patched by the user who reported the sighting.

Detection rules are retrieved from Rulezet.

Action not permitted

GHSA-RGJC-H3X7-9MWG

B. Configure a Custom Application ID

CVE-2026-54267 (GCVE-0-2026-54267)

Tags

Sightings

Nomenclature