feat: Create nosecone package for creating secure headers (#2237)

This implements our `nosecone` package and 2 adapters, Next.js and SvelteKit. These 2 frameworks have some of the best support for nonce-based CSPv3—although Next.js has the caveat of it only working in dynamic mode. Runtimes like Bun, Deno, and Node.js can use Nosecone directly to set headers on the responses, while adapters are needed for deeper integration. Using middleware works really well for Next.js because we can force the headers to be forwarded and it even detects the nonce from the `script-src` directive, which it adds to each `<script>` tag that webpack generates. For SvelteKit, we need to provide `csp` in the config so it'll add the CSP header, but we also use a hook to add our additional secure headers. Notably missing: - Removing X-Powered-By—the frameworks don't give us access to this, we should instead just recommend it be removed. - A Remix adapter—it needs a lot of logic to thread nonces throughout the application. - An Express adapter—most people are already using Helmet.
arcjet · Nov 19, 2024 · 1e8e73b · 1e8e73b
1 parent c89aead
commit 1e8e73b
Show file tree

Hide file tree

Showing 42 changed files with 4,138 additions and 91 deletions.
diff --git a/.github/.release-please-manifest.json b/.github/.release-please-manifest.json
@@ -17,6 +17,9 @@
   "headers": "1.0.0-alpha.28",
   "ip": "1.0.0-alpha.28",
   "logger": "1.0.0-alpha.28",
+  "nosecone": "1.0.0-alpha.28",
+  "nosecone-next": "1.0.0-alpha.28",
+  "nosecone-sveltekit": "1.0.0-alpha.28",
   "protocol": "1.0.0-alpha.28",
   "redact": "1.0.0-alpha.28",
   "redact-wasm": "1.0.0-alpha.28",

diff --git a/.github/release-please-config.json b/.github/release-please-config.json
@@ -96,6 +96,18 @@
       "component": "@arcjet/logger",
       "skip-github-release": true
     },
+    "nosecone": {
+      "component": "nosecone",
+      "skip-github-release": true
+    },
+    "nosecone-next": {
+      "component": "@nosecone/next",
+      "skip-github-release": true
+    },
+    "nosecone-sveltekit": {
+      "component": "@nosecone/sveltekit",
+      "skip-github-release": true
+    },
     "protocol": {
       "component": "@arcjet/protocol",
       "skip-github-release": true
@@ -156,6 +168,9 @@
         "@arcjet/ip",
         "@arcjet/body",
         "@arcjet/logger",
+        "nosecone",
+        "@nosecone/next",
+        "@nosecone/sveltekit",
         "@arcjet/protocol",
         "@arcjet/redact",
         "@arcjet/redact-wasm",

diff --git a/examples/nextjs-app-dir-rate-limit/middleware.ts b/examples/nextjs-app-dir-rate-limit/middleware.ts
@@ -18,4 +18,4 @@ const aj = arcjet({
   ],
 });
 
-export default createMiddleware(aj);
+export default createMiddleware(aj);
diff --git a/examples/nextjs-app-dir-rate-limit/package-lock.json b/examples/nextjs-app-dir-rate-limit/package-lock.json
diff --git a/examples/nextjs-app-dir-validate-email/app/layout.tsx b/examples/nextjs-app-dir-validate-email/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { connection } from "next/server";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
@@ -9,11 +10,14 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  // Opt-out of static generation for every page so the CSP nonce can be applied
+  await connection()
+
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>

diff --git a/examples/nextjs-app-dir-validate-email/middleware.ts b/examples/nextjs-app-dir-validate-email/middleware.ts
@@ -0,0 +1,8 @@
+import { createMiddleware } from "@nosecone/next";
+
+export const config = {
+  // matcher tells Next.js which routes to run the middleware on
+  matcher: ["/(.*)"],
+};
+
+export default createMiddleware();
diff --git a/examples/nextjs-app-dir-validate-email/package-lock.json b/examples/nextjs-app-dir-validate-email/package-lock.json
diff --git a/examples/nextjs-app-dir-validate-email/package.json b/examples/nextjs-app-dir-validate-email/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@arcjet/next": "file:../../arcjet-next",
+    "@nosecone/next": "file:../../nosecone-next",
     "next": "15.0.1",
     "react": "^18",
     "react-dom": "^18"

diff --git a/examples/sveltekit/package-lock.json b/examples/sveltekit/package-lock.json
diff --git a/examples/sveltekit/package.json b/examples/sveltekit/package.json
@@ -13,7 +13,8 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@arcjet/sveltekit": "file:../../arcjet-sveltekit"
+    "@arcjet/sveltekit": "file:../../arcjet-sveltekit",
+    "@nosecone/sveltekit": "file:../../nosecone-sveltekit"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.3.1",

diff --git a/examples/sveltekit/src/hooks.server.ts b/examples/sveltekit/src/hooks.server.ts
@@ -1,27 +1,25 @@
 import { aj } from "$lib/server/arcjet";
 import { error } from "@sveltejs/kit";
-import type { RequestEvent } from "@sveltejs/kit";
+import { createHook } from "@nosecone/sveltekit";
+import { sequence } from "@sveltejs/kit/hooks";
 
-export async function handle({
-  event,
-  resolve,
-}: {
-  event: RequestEvent;
-  resolve: (event: RequestEvent) => Response | Promise<Response>;
-}): Promise<Response> {
-  // Ignore routes that extend the Arcjet rules - they will call `.protect` themselves
-  const filteredRoutes = ["/api/rate-limited", "/rate-limited"];
-  if (filteredRoutes.includes(event.url.pathname)) {
-    // return - route will handle protection
-    return resolve(event);
-  }
+export const handle = sequence(
+  createHook(),
+  async ({ event, resolve }) => {
+    // Ignore routes that extend the Arcjet rules - they will call `.protect` themselves
+    const filteredRoutes = ["/api/rate-limited", "/rate-limited"];
+    if (filteredRoutes.includes(event.url.pathname)) {
+      // return - route will handle protection
+      return resolve(event);
+    }
 
-  // Ensure every other route is protected with shield
-  const decision = await aj.protect(event);
-  if (decision.isDenied()) {
-    return error(403, "Forbidden");
-  }
+    // Ensure every other route is protected with shield
+    const decision = await aj.protect(event);
+    if (decision.isDenied()) {
+      return error(403, "Forbidden");
+    }
 
-  // Continue with the route
-  return resolve(event);
-}
+    // Continue with the route
+    return await resolve(event);
+  }
+)
diff --git a/examples/sveltekit/svelte.config.js b/examples/sveltekit/svelte.config.js
@@ -1,5 +1,6 @@
 import adapter from "@sveltejs/adapter-auto";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import { csp } from "@nosecone/sveltekit"
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -8,6 +9,7 @@ const config = {
   preprocess: vitePreprocess(),
 
   kit: {
+    csp: csp(),
     // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
     // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.

diff --git a/nosecone-next/.eslintignore b/nosecone-next/.eslintignore
@@ -0,0 +1,6 @@
+/.turbo/
+/coverage/
+/node_modules/
+*.d.ts
+*.js
+!*.config.js
diff --git a/nosecone-next/.eslintrc.cjs b/nosecone-next/.eslintrc.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["@arcjet/eslint-config"],
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,4 +18,4 @@ const aj = arcjet({ @@
       ],
     });
-    export default createMiddleware(aj);
+    export default createMiddleware(aj);