feat(website): add integrity attributes and crossorigin to scripts (#10176)

Copilot · markcowl · web-flow · commit 83b5bf3cc6ae · 2026-04-02T21:26:23.000Z
Computes the SRI integrity hash for `1ds-init.js` dynamically at build time using `node:crypto` and adds `crossorigin="anonymous"` to the consent script. The hash computation is factored into a shared helper used by both layout contexts. **Changes:** - `website/src/utils/sri-hash.ts`: New shared `computeSriHash` helper that computes SHA-384 SRI hashes for files in the `public/` directory - `website/src/layouts/base-layout.astro`: Uses `computeSriHash` to set the SRI integrity hash for `1ds-init.js` at build time; adds `crossorigin` attribute to consent script - `website/astro.config.mjs`: Uses `computeSriHash` to set the SRI integrity hash for `1ds-init.js` at build time for Starlight pages; adds `crossorigin` attribute to consent script  --- ⌨️ Start Copilot coding agent tasks without leaving your editor — available in [VS Code](https://gh.io/cca-vs-code-docs), [Visual Studio](https://gh.io/cca-visual-studio-docs), [JetBrains IDEs](https://gh.io/cca-jetbrains-docs) and [Eclipse](https://gh.io/cca-eclipse-docs). --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: markcowl <1054056+markcowl@users.noreply.github.com>
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
@@ -11,6 +11,7 @@ import { resolve } from "pathe";
 import rehypeMermaid from "rehype-mermaid";
 import remarkHeadingID from "remark-heading-id";
 import current from "./src/content/current-sidebar";
+import { computeSriHash } from "./src/utils/sri-hash";
 
 /** Scan the release-notes directory and return the slug of the latest release note. */
 function getLatestReleaseNoteSlug() {
@@ -43,6 +44,8 @@ const latestReleaseNote = getLatestReleaseNoteSlug();
 
 const base = process.env.TYPESPEC_WEBSITE_BASE_PATH ?? "/";
 
+const initJsIntegrity = computeSriHash("1ds-init.js");
+
 // https://astro.build/config
 export default defineConfig({
   base,
@@ -98,6 +101,7 @@ export default defineConfig({
           tag: "script",
           attrs: {
             src: "https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js",
+            crossorigin: "anonymous",
           },
         },
         {
@@ -106,6 +110,7 @@ export default defineConfig({
             type: "module",
             async: true,
             src: "1ds-init.js",
+            integrity: initJsIntegrity,
           },
         },
       ],
diff --git a/website/src/layouts/base-layout.astro b/website/src/layouts/base-layout.astro
@@ -3,12 +3,15 @@ import "@site/src/css/custom.css";
 import Header from "@site/src/components/header/header.astro";
 import Footer from "@site/src/components/footer/footer.astro";
 import { baseUrl } from "@typespec/astro-utils/utils/base-url";
+import { computeSriHash } from "@site/src/utils/sri-hash";
 
 export interface Props {
   /** Whether to render the footer @default true */
   footer?: boolean;
 }
 const { footer = true } = Astro.props;
+
+const initJsIntegrity = computeSriHash("1ds-init.js");
 ---
 
 <html lang="en">
@@ -18,9 +21,12 @@ const { footer = true } = Astro.props;
     <link rel="og:image" type="image/svg+xml" href={baseUrl("/img/social.svg")} />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>typespec.io</title>
-    <script src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js" is:inline
+    <script
+      src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js"
+      crossorigin="anonymous"
+      is:inline></script>
+    <script src={import.meta.env.BASE_URL + "1ds-init.js"} integrity={initJsIntegrity} is:inline
     ></script>
-    <script src={import.meta.env.BASE_URL + "1ds-init.js"} is:inline></script>
   </head>
   <body class="body">
     <header class="header">
diff --git a/website/src/utils/sri-hash.ts b/website/src/utils/sri-hash.ts
@@ -0,0 +1,16 @@
+import { createHash } from "node:crypto";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+/**
+ * Compute a SHA-384 subresource integrity (SRI) hash for the given file,
+ * relative to the website `public/` directory.
+ *
+ * Uses `process.cwd()` because Astro always runs from the website root,
+ * and `import.meta.dirname` is unreliable after bundling during pre-render.
+ */
+export function computeSriHash(publicRelativePath: string): string {
+  const absPath = resolve(process.cwd(), "public", publicRelativePath);
+  const content = readFileSync(absPath);
+  return `sha384-${createHash("sha384").update(content).digest("base64")}`;
+}
