🐛 fix: allow img.shields.io in CSP connect-src so navbar GitHub stats load

changelog.d/fixed-532-csp-connect-src-shields.md

@@ -0,0 +1,4 @@
+- The navbar GitHub stats (stars, forks, watchers) now load in production:
+  `connect-src` allows `https://img.shields.io` (and the production docs host
+  used for `shared.json` on preview deploys), and the header test pins both
+  (hivecommons/docs#532).

next.config.ts

@@ -33,8 +33,9 @@ const nextConfig: NextConfig = {
     //   <style> blocks Mermaid injects into rendered SVGs.
     // - img-src includes data: for base64-encoded diagrams and blob: for
     //   canvas snapshots; https: covers external avatars/badges in docs content.
-    // - connect-src covers the docs search API, GitHub API (for version data),
-    //   and Netlify analytics endpoints.
+    // - connect-src covers the docs search API, GitHub API (version data),
+    //   img.shields.io (navbar GitHub stats, useGithubStats.ts), the production
+    //   docs host (shared.json fetched on preview deploys), and analytics.
     // - worker-src blob: is required by the Mermaid diagram renderer.
     // - frame-ancestors 'none' replaces X-Frame-Options: DENY (equivalent
     //   but CSP-native; X-Frame-Options kept for older browser compat).
@@ -44,7 +45,7 @@ const nextConfig: NextConfig = {
       "style-src 'self' 'unsafe-inline'",
       "img-src 'self' data: blob: https:",
       "font-src 'self' data:",
-      "connect-src 'self' https://api.github.com https://www.google-analytics.com",
+      "connect-src 'self' https://api.github.com https://img.shields.io https://docs.hivecommons.dev https://www.google-analytics.com",
       "worker-src blob:",
       "frame-src https://www.youtube-nocookie.com",
       "frame-ancestors 'none'",

src/__tests__/next-config-headers.test.ts

@@ -137,6 +137,10 @@ describe("next.config.ts Content-Security-Policy", () => {
     // src/components/navbar/useGithubStats.ts and the version switcher fetch
     // GitHub; the YouTube embed on the meetings page uses the nocookie host.
     expect(csp.get("connect-src")).toContain("https://api.github.com");
+    // useGithubStats.ts fetches shields.io; useSharedConfig.ts fetches the
+    // production shared.json cross-origin on preview deploys.
+    expect(csp.get("connect-src")).toContain("https://img.shields.io");
+    expect(csp.get("connect-src")).toContain("https://docs.hivecommons.dev");
     expect(csp.get("frame-src")).toEqual(["https://www.youtube-nocookie.com"]);
     // Mermaid renders in a blob: worker and needs WASM, but not eval.
     expect(csp.get("worker-src")).toEqual(["blob:"]);