Add Content Security Policy Header

next.config.mjs → next.config.ts

@@ -1,9 +1,28 @@
 import createMDX from '@next/mdx';
 
+import { getContentSecurityPolicyHeaderValue } from '@/lib/csp';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   pageExtensions: ['mdx', 'tsx'],
+  async headers() {
+    const cspValue = getContentSecurityPolicyHeaderValue();
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Content-Security-Policy',
+            value: cspValue,
+          },
+          {
+            key: 'Referrer-Policy',
+            value: 'strict-origin-when-cross-origin',
+          },
+        ],
+      },
+    ];
+  },
   experimental: {
     optimizePackageImports: ['@/components', '@/markdown', '@/icons'],
     turbo: {
@@ -41,15 +60,16 @@ const rehypeAutolinkHeadings = {
       width: 16,
       viewBox: '0 0 16 16',
     },
-    children: [{
-      type: 'element',
-      tagName: 'use',
-      properties: { href: '#action/link' }
-    }]
+    children: [
+      {
+        type: 'element',
+        tagName: 'use',
+        properties: { href: '#action/link' },
+      },
+    ],
   },
 };
 
-
 const withMDX = createMDX({
   options: {
     remarkPlugins: [

src/lib/csp.test.ts

@@ -0,0 +1,53 @@
+import { getContentSecurityPolicyHeaderValue } from './csp';
+
+describe('lib', () => {
+  describe('csp.ts', () => {
+    describe('getContentSecurityPolicyHeaderValue()', () => {
+      test('returns a trimmed string', () => {
+        const result = getContentSecurityPolicyHeaderValue();
+        expect(result).toBe(result.trim());
+      });
+
+      test('includes default-src self', () => {
+        const result = getContentSecurityPolicyHeaderValue();
+        expect(result).toContain("default-src 'self'");
+      });
+
+      test('includes required script-src sources', () => {
+        const result = getContentSecurityPolicyHeaderValue();
+        expect(result).toContain("'unsafe-inline'");
+        expect(result).toContain("'wasm-unsafe-eval'");
+        expect(result).toContain('https://simple.cloudsmith.com');
+        expect(result).toContain('https://va.vercel-scripts.com');
+      });
+
+      test('includes required connect-src sources', () => {
+        const result = getContentSecurityPolicyHeaderValue();
+        expect(result).toContain('https://api.cloudsmith.io');
+        expect(result).toContain('https://queue.simpleanalyticscdn.com');
+        expect(result).toContain('https://simple.cloudsmith.io');
+        expect(result).toContain('https://simple.cloudsmith.com');
+      });
+
+      test('sets frame-src and object-src to none', () => {
+        const result = getContentSecurityPolicyHeaderValue();
+        expect(result).toContain("frame-src 'none'");
+        expect(result).toContain("object-src 'none'");
+      });
+
+      test('sets base-uri to none', () => {
+        const result = getContentSecurityPolicyHeaderValue();
+        expect(result).toContain("base-uri 'none'");
+      });
+
+      test('deduplicates values within a directive', () => {
+        const result = getContentSecurityPolicyHeaderValue();
+        const scriptSrcMatch = result.match(/script-src ([^;]+)/);
+        expect(scriptSrcMatch).not.toBeNull();
+        const values = scriptSrcMatch![1].trim().split(' ');
+        const unique = new Set(values);
+        expect(values.length).toBe(unique.size);
+      });
+    });
+  });
+});

src/lib/csp.ts

@@ -0,0 +1,69 @@
+export const getContentSecurityPolicyHeaderValue = () => {
+  const definitions: Record<string, Record<string, string[]>> = {
+    defaults: {
+      'default-src': [`'self'`],
+      'script-src': [
+        `'self'`,
+        // Required for Next.js inline hydration scripts in static output
+        `'unsafe-inline'`,
+        // Required for syntax highlighting
+        `'wasm-unsafe-eval'`,
+      ],
+      'style-src': [
+        `'self'`,
+        // Required for Next.js inline styles
+        `'unsafe-inline'`,
+      ],
+      'img-src': [`'self'`, 'data:'],
+      'connect-src': [`'self'`],
+      'form-action': [`'self'`],
+      'frame-src': [`'none'`],
+      'font-src': [`'self'`],
+      'child-src': [`'self'`],
+      'media-src': [`'self'`],
+      'object-src': [`'none'`],
+      'base-uri': [`'none'`],
+    },
+    cloudsmith: {
+      'connect-src': ['https://api.cloudsmith.io'],
+    },
+    qualified: {
+      'script-src': ['https://js.qualified.com'],
+      'connect-src': ['wss://*.qualified.com', 'https://app.qualified.com'],
+      'frame-src': ['https://app.qualified.com'],
+    },
+    simpleAnalytics: {
+      'script-src': ['https://simple.cloudsmith.com'],
+      'connect-src': [
+        'https://queue.simpleanalyticscdn.com',
+        'https://simple.cloudsmith.io',
+        'https://simple.cloudsmith.com',
+      ],
+      'img-src': ['https://queue.simpleanalyticscdn.com', 'https://simple.cloudsmith.com'],
+    },
+    vercel: {
+      'script-src': ['https://va.vercel-scripts.com'],
+      'connect-src': ['https://va.vercel-scripts.com'],
+    },
+  };
+
+  const directives: Record<string, string[][]> = {};
+
+  for (const source in definitions) {
+    for (const directive in definitions[source]) {
+      if (!directives[directive]) {
+        directives[directive] = [];
+      }
+      directives[directive].push(definitions[source][directive]);
+    }
+  }
+
+  let cspValue = '';
+
+  for (const directive in directives) {
+    const flattenedValues = Array.from(new Set(directives[directive].flat().filter(Boolean)));
+    cspValue += `${directive} ${flattenedValues.join(' ')}; `;
+  }
+
+  return cspValue.trim();
+};