fix(metadata): keep streamed icon keys opaque (#3518)

* fix(metadata): keep streamed icon keys opaque

* fix(metadata): reuse wider hash for streamed icon ownership

Author: james-elicx

packages/vinext/src/server/app-page-route-wiring.tsx

@@ -33,6 +33,7 @@ import {
 } from "vinext/shims/metadata";
 import { BfcacheSegmentBoundary, Children, ParallelSlot, Slot } from "vinext/shims/slot";
 import { StreamedIconsInsertion } from "vinext/shims/streamed-icons";
+import { fnv1a64 } from "vinext/internal/utils/hash";
 import { createInlineScriptTag, escapeHtmlAttr } from "./html.js";
 import type { AppPageParams } from "./app-page-boundary.js";
 import type { AppLayoutParamAccessTracker } from "./app-layout-param-observation.js";
@@ -719,12 +720,8 @@ function hasStreamedIcons(metadata: Metadata): boolean {
 }
 
 function createStreamedIconKey(pathname: string, metadataHtml: string): string {
-  let hash = 2166136261;
-  for (let index = 0; index < metadataHtml.length; index++) {
-    hash ^= metadataHtml.charCodeAt(index);
-    hash = Math.imul(hash, 16777619);
-  }
-  return `${pathname}:${(hash >>> 0).toString(36)}`;
+  // Keep route identity opaque so crawlers cannot mistake the key for a URL.
+  return `vi${fnv1a64(`${pathname}\0${metadataHtml}`)}`;
 }
 
 const STREAMED_ICON_KEY_PLACEHOLDER = "vinext-pending-streamed-icon-key";

tests/e2e/app-router/metadata-icons.spec.ts

@@ -200,6 +200,59 @@ const starIcons: OwnedIcon[] = [
 ];
 
 test.describe("Next.js compat: streamed metadata icons", () => {
+  for (const pathname of [
+    "/metadata-icons-stream/heart",
+    "/nextjs-compat/metadata-generate/my-post:pk5ufy:0",
+  ]) {
+    test(`keeps streamed icon keys opaque for crawlers at ${pathname}`, async ({ request }) => {
+      const headers = { "User-Agent": "Googlebot" };
+      const response = await request.get(pathname, { headers });
+      expect(response.status()).toBe(200);
+      const html = await response.text();
+      const markers = [...html.matchAll(/<link data-vinext-streamed-icon="([^"]+)"/g)].map(
+        ([, marker]) => marker,
+      );
+      expect(markers.length).toBeGreaterThan(0);
+      for (const marker of markers) {
+        expect(marker).toMatch(/^vi[a-z0-9]+:\d+$/);
+      }
+
+      const flightResponse = await request.get(`${pathname}?_rsc=icons`, {
+        headers: { ...headers, RSC: "1" },
+      });
+      expect(flightResponse.headers()["content-type"]).toContain("text/x-component");
+      const flight = await flightResponse.text();
+      const keys = [...flight.matchAll(/"metadataKey":"([^"]+)"/g)].map(([, key]) => key);
+      expect(keys.length).toBeGreaterThan(0);
+      for (const key of keys) {
+        expect(key).toMatch(/^vi[a-z0-9]+$/);
+        expect(markers.every((marker) => marker.startsWith(`${key}:`))).toBe(true);
+      }
+    });
+  }
+
+  test("keeps distinct icon ownership across paths that collide under a 32-bit hash", async ({
+    page,
+    consoleErrors,
+  }) => {
+    // Both full pathnames have the same 32-bit FNV state before the metadata suffix.
+    await page.goto("/metadata-icons-stream/ae0qv10f");
+    await expect.poll(() => ownedIcons(page)).toEqual(heartIcons);
+    const firstMarker = await page
+      .locator("head link[data-vinext-streamed-icon]")
+      .first()
+      .getAttribute("data-vinext-streamed-icon");
+
+    await page.locator("#metadata-icons-collision").click();
+    await expect(page).toHaveURL(/\/metadata-icons-stream\/n8eg563h$/);
+    await expect(page.locator("head link[data-vinext-streamed-icon]").first()).not.toHaveAttribute(
+      "data-vinext-streamed-icon",
+      firstMarker!,
+    );
+    await expect.poll(() => ownedIcons(page)).toEqual(heartIcons);
+    expect(consoleErrors).toEqual([]);
+  });
+
   test("relocates every metadata icon relation with the request CSP nonce", async ({
     page,
     consoleErrors,

tests/features.test.ts

@@ -3457,6 +3457,25 @@ describe("createAppPageRouteBodyMetadata (body-placement canonical)", () => {
     expect(html).toMatch(/<script>document\.querySelectorAll[\s\S]*<\/script><\/div>$/);
   });
 
+  it("body placement: uses opaque icon keys that vary with pathname and metadata", () => {
+    const marker = (pathname: string, icon: string) => {
+      const node = createAppPageRouteBodyMetadata({ icons: { icon } }, pathname, "body");
+      const html = renderToStaticMarkup(node as React.ReactElement);
+      const key = html.match(/data-vinext-streamed-icon="([^"]+)"/)?.[1];
+      expect(key).toMatch(/^vi[a-z0-9]+:0$/);
+      return key;
+    };
+
+    const key = marker("/blog/my-post:pk5ufy:0", "/favicon.ico");
+    expect(marker("/blog/my-post:pk5ufy:0", "/favicon.ico")).toBe(key);
+    expect(marker("/blog/another-post", "/favicon.ico")).not.toBe(key);
+    expect(marker("/blog/my-post:pk5ufy:0", "/other.ico")).not.toBe(key);
+    // These paths collide under the previous single-round 32-bit FNV hash.
+    expect(marker("/products/vb9e3r", "/favicon.ico")).not.toBe(
+      marker("/products/obz81c", "/favicon.ico"),
+    );
+  });
+
   it("body placement: serializes icon-bearing metadata once", () => {
     let titleReads = 0;
     const title = 'data-vinext-streamed-icon="vinext-pending-streamed-icon-key:0';
@@ -3479,7 +3498,7 @@ describe("createAppPageRouteBodyMetadata (body-placement canonical)", () => {
     expect(titleReads).toBe(2);
     expect(html).toContain(`<title>${title}</title>`);
     expect(html).not.toContain(' data-injected="true"');
-    expect(html).toContain("/icons&quot; data-injected=&quot;true:");
+    expect(html).not.toContain("/icons");
   });
 
   it("body placement: includes icon cleanup reconciliation without streamed icons", () => {

tests/fixtures/app-basic/app/metadata-icons-stream/[slug]/page.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+export { generateMetadata } from "../heart/page";
+
+export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const nextSlug = slug === "ae0qv10f" ? "n8eg563h" : "ae0qv10f";
+  return (
+    <Link
+      id="metadata-icons-collision"
+      href={`/metadata-icons-stream/${nextSlug}`}
+      prefetch={false}
+    >
+      Change route with identical icons
+    </Link>
+  );
+}