feat(http-helmet): add remix middleware

.changeset/stupid-frogs-draw.md

@@ -0,0 +1,45 @@
+---
+"@mcansh/http-helmet": patch
+---
+
+adds support for remix middleware
+
+```ts
+import {
+  securityHeaders,
+  NONCE,
+  getCSPNonce,
+  setCSPNonce,
+} from "@mcansh/http-helmet/remix-middleware";
+import { createRouter } from "remix/fetch-router";
+import { asyncContext } from "@remix-run/async-context-middleware";
+
+let nonce = createNonce();
+setCSPNonce(nonce);
+
+let router = createRouter({
+  middleware: [
+    asyncContext(),
+    securityHeaders({
+      "Content-Security-Policy": {
+        "default-src": ["'self'"],
+        "script-src": ["'self'", NONCE(nonce)],
+      },
+    }),
+  ],
+});
+```
+
+// then in your controller you can get the nonce from the context and use it in your templates to add a nonce to your script tags
+
+```ts
+export const home = {
+  handler() {
+    let nonce = getCSPNonce();
+
+    return render(
+      `<script nonce="${nonce}">console.log("hello world")</script>`,
+    );
+  },
+} satisfies BuildAction;
+```

packages/http-helmet/README.md

@@ -11,15 +11,14 @@ npm i @mcansh/http-helmet
 
 ## Usage
 
-basic example using [`@mjackson/node-fetch-server`](https://github.com/mjackson/remix-the-web/tree/main/packages/node-fetch-server)
+basic example using [`@remix-run/node-fetch-server`](https://github.com/remix-run/remix/tree/main/packages/node-fetch-server)
 
 ```js
 import * as http from "node:http";
-import { createRequestListener } from "@mjackson/node-fetch-server";
+import { createRequestListener } from "@remix-run/node-fetch-server";
+import { html } from "@remix-run/html-template";
 import { createNonce, createSecureHeaders } from "@mcansh/http-helmet";
 
-let html = String.raw;
-
 let handler = (request) => {
   let nonce = createNonce();
   let headers = createSecureHeaders({

packages/http-helmet/package.json

@@ -39,6 +39,10 @@
       "import": "./dist/react.js",
       "require": "./dist/react.cjs"
     },
+    "./remix-middleware": {
+      "import": "./dist/remix-middleware.js",
+      "require": "./dist/remix-middleware.cjs"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -51,10 +55,18 @@
     "type-fest": "^4.41.0"
   },
   "peerDependencies": {
+    "@remix-run/fetch-router": ">=0.18.0",
+    "@remix-run/async-context-middleware": ">=0.2.0",
     "react": ">=18.0.0 || >=19.0.0",
     "react-dom": ">=18.0.0 || >=19.0.0"
   },
   "peerDependenciesMeta": {
+    "@remix-run/fetch-router": {
+      "optional": true
+    },
+    "@remix-run/async-context-middleware": {
+      "optional": true
+    },
     "react": {
       "optional": true
     },
@@ -64,6 +76,8 @@
   },
   "devDependencies": {
     "@arethetypeswrong/core": "catalog:",
+    "@remix-run/async-context-middleware": "^0.2.0",
+    "@remix-run/fetch-router": "^0.18.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -77,6 +91,7 @@
     "publint": "catalog:",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "remix": "3.0.0-alpha.4",
     "tsdown": "catalog:",
     "typescript": "catalog:",
     "vitest": "catalog:"

packages/http-helmet/src/remix.ts

@@ -0,0 +1,54 @@
+import { getContext } from "@remix-run/async-context-middleware";
+import type { Middleware } from "@remix-run/fetch-router";
+import { createContextKey } from "@remix-run/fetch-router";
+import type { CreateSecureHeaders } from "./index.ts";
+import { createSecureHeaders, mergeHeaders } from "./index.ts";
+
+export {
+  createNonce,
+  HASH,
+  mergeHeaders,
+  NONCE,
+  NONE,
+  REPORT_SAMPLE,
+  SELF,
+  STRICT_DYNAMIC,
+  UNSAFE_EVAL,
+  UNSAFE_HASHES,
+  UNSAFE_INLINE,
+  WASM_UNSAFE_EVAL,
+} from "./utils";
+
+let NONCE_KEY = createContextKey<string>();
+
+export function getCSPNonce(): string {
+  return getContext().get(NONCE_KEY);
+}
+
+export function setCSPNonce(nonce: string): void {
+  getContext().set(NONCE_KEY, nonce);
+}
+
+type Context = Parameters<Middleware>[0];
+
+export type SecurityHeadersOptions = CreateSecureHeaders & {
+  skip?: (context: Context) => boolean | Promise<boolean>;
+};
+
+export function securityHeaders({
+  skip,
+  ...options
+}: SecurityHeadersOptions): Middleware {
+  return async (context, next) => {
+    let response = await next();
+    if (skip?.(context)) return response;
+
+    let secureHeaders = createSecureHeaders(options);
+
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: mergeHeaders(response.headers, secureHeaders),
+    });
+  };
+}

packages/http-helmet/src/utils.ts

@@ -37,7 +37,9 @@ function isObject(value: unknown) {
   return value !== null && typeof value === "object";
 }
 
-export function mergeHeaders(...sources: HeadersInit[]): Headers {
+export function mergeHeaders(
+  ...sources: [HeadersInit, ...Array<HeadersInit>]
+): Headers {
   let result = new Headers();
 
   for (let source of sources) {

packages/http-helmet/tsdown.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
   entry: {
     index: "./src/index.ts",
     react: "./src/react.tsx",
+    "remix-middleware": "./src/remix.ts",
   },
   dts: true,
   format: ["cjs", "esm"],