feat: Add Nosecone for security headers (#211)

Author: davidmytton

middleware.ts

@@ -0,0 +1,45 @@
+import * as nosecone from "@nosecone/next";
+
+const noseconeConfig: nosecone.NoseconeOptions = {
+  ...nosecone.defaults,
+  contentSecurityPolicy: {
+    ...nosecone.defaults.contentSecurityPolicy,
+    directives: {
+      ...nosecone.defaults.contentSecurityPolicy.directives,
+      imgSrc: [
+        ...nosecone.defaults.contentSecurityPolicy.directives.imgSrc,
+        "https://vercel.com", // Deploy button
+        "https://www.netlify.com", // Deploy button
+      ],
+      scriptSrc: [
+        // We have to use unsafe-inline because next-themes and Vercel Analytics
+        // do not support nonce
+        // https://github.com/pacocoursey/next-themes/issues/106
+        // https://github.com/vercel/analytics/issues/122
+        //...nosecone.defaults.contentSecurityPolicy.directives.scriptSrc,
+        "'self'",
+        "'unsafe-inline'",
+        "'unsafe-eval'",
+        "https://plausible.io", // Analytics
+      ],
+      connectSrc: [
+        ...nosecone.defaults.contentSecurityPolicy.directives.connectSrc,
+        "https://plausible.io", // Analytics
+      ],
+      // We only set this in production because the server may be started
+      // without HTTPS
+      upgradeInsecureRequests: process.env.NODE_ENV === "production",
+    },
+  },
+  crossOriginEmbedderPolicy: {
+    policy: "credentialless", // Allows embedding the deploy buttons
+  },
+} as const;
+
+const noseconeMiddleware = nosecone.createMiddleware(
+  process.env.VERCEL_ENV === "preview"
+    ? nosecone.withVercelToolbar(noseconeConfig)
+    : noseconeConfig,
+);
+
+export default noseconeMiddleware;

package-lock.json

@@ -33,6 +33,7 @@
     "@arcjet/ip": "^1.0.0-alpha.34",
     "@arcjet/next": "^1.0.0-alpha.34",
     "@hookform/resolvers": "^3.9.1",
+    "@nosecone/next": "^1.0.0-alpha.34",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@types/styled-components": "^5.1.34",
@@ -66,4 +67,4 @@
     "tailwindcss": "^3.4.17",
     "typescript": "^5"
   }
-}
+}