[{"_1":2,"_114":-5,"_115":-5},"loaderData",{"_3":4},"routes/web/blog/post-slug/route",{"_5":6,"_51":52,"_110":111,"_112":113},"meta",{"_7":8,"_35":36},"metaTags",[9,12,17,20,22,25,28,31,33],{"_10":11},"title","React Router v7 CSP (Content Security Policy) Configuration",{"_13":14,"_15":16},"name","description","content","This post will walk through the steps to set up CSP via middleware and loader in React Router v7.",{"_18":19,"_15":11},"property","og:title",{"_18":21,"_15":16},"og:description",{"_18":23,"_15":24},"og:type","website",{"_18":26,"_15":27},"og:url","https://www.yinc.tw/blog/react-router-v7-csp-content-security-policy-config",{"_13":29,"_15":30},"twitter:card","summary_large_image",{"_13":32,"_15":11},"twitter:title",{"_13":34,"_15":16},"twitter:description","seo",{"_37":38,"_39":11,"_40":16,"_41":-5,"_42":-5,"_43":44,"_45":46,"_47":48,"_49":50},"id",5,"metaTitle","metaDescription","keywords","ogImage","autoGenerated",true,"route","/blog/react-router-v7-csp-content-security-policy-config","createdAt",["D",1753123903717],"updatedAt",["D",1753644431107],"post",{"_37":38,"_53":54,"_10":11,"_15":55,"_56":16,"_57":-5,"_58":59,"_60":61,"_47":62,"_49":63,"_64":38,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_35":94,"_97":98,"_108":109},"slug","react-router-v7-csp-content-security-policy-config","{\"type\":\"doc\",\"content\":[{\"type\":\"blockquote\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"CSP References: \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Content Security Policy (CSP) - HTTP | MDN\"},{\"type\":\"text\",\"text\":\", \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Content Security Policy - OWASP Cheat Sheet Series\"},{\"type\":\"text\",\"text\":\", \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://content-security-policy.com/\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Content-Security-Policy (CSP) Header Quick Reference\"},{\"type\":\"text\",\"text\":\".\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"React Router References: \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://reactrouter.com/how-to/middleware#response-headers\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Middleware#response-headers | React Router\"},{\"type\":\"text\",\"text\":\", \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://reactrouter.com/how-to/security#security\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Security | React Router\"},{\"type\":\"text\",\"text\":\", \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/remix-run/remix/issues/183\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Security - Can't use CSP that blocks 'unsafe-inline'; · Issue #183 · remix-run/remix\"}]}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null}},{\"type\":\"bulletList\",\"content\":[{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Github repository: \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/gjc14/rrv7-csp\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"gjc14/rrv7-csp\"}]}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Why Should You Consider CSP\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"We are implementing \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"CSP (Content Security Policy)\"},{\"type\":\"text\",\"text\":\" for our website. This is a basic header setting to prevent XSS attack, and is widely implemented. However, I cannot find a solid and promising way to get the nonce set in \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"React Router v7 - framework mode\"},{\"type\":\"text\",\"text\":\", and really lack of documentation.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This post will walk through the steps to set up CSP via middleware and loader in React Router v7.\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Important Steps:\"}]},{\"type\":\"orderedList\",\"attrs\":{\"start\":1,\"type\":null},\"content\":[{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Generate nonce and \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"pass to context\"},{\"type\":\"text\",\"text\":\" in either \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"root loader()\"},{\"type\":\"text\",\"text\":\" or \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"middleware\"},{\"type\":\"text\",\"text\":\".\"}]}]},{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"entry.server.tsx\"},{\"type\":\"text\",\"text\":\": React Router uses some inline script for DX, so we should get nonce from the context here and pass it to these scripts. p.s. \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"middleware[]\"},{\"type\":\"text\",\"text\":\" → \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"loader()\"},{\"type\":\"text\",\"text\":\" → \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"handleRequest()\"},{\"type\":\"text\",\"text\":\".\"}]}]},{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Add nonce meta tag\"}]}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Generate Nonce in Root Loader or Middleware\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"They are both capable of configuring headers, if you don’t want to use future middleware flag, just return headers with \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"data()\"},{\"type\":\"text\",\"text\":\" in root loader. However, I use \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"unstable_createContext()\"},{\"type\":\"text\",\"text\":\" to share nonce in server. \"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"Please remember to set nonce in the context either in loader or in middleware!\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"Create Nonce Context\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"// context/csp-nonce.ts\\nexport const nonceContext = unstable_createContext()\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"In root \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"loader()\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"// root.tsx\\nexport const headers = ({ loaderHeaders }: Route.HeadersArgs) => {\\n return loaderHeaders;\\n};\\n\\nexport const loader = ({ context }: Route.LoaderArgs) => {\\n const nonce = generateNonce();\\n const headers = {\\n [process.env.NODE_ENV === \\\"production\\\"\\n ? \\\"Content-Security-Policy\\\"\\n : \\\"Content-Security-Policy-Report-Only\\\"]: getContentSecurityPolicy(nonce),\\n /** @see https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Reference/Headers/Strict-Transport-Security */\\n \\\"Strict-Transport-Security\\\": \\\"max-age=3600\\\", // 1 hour. HTTPS only\\n \\\"X-Frame-Options\\\": \\\"SAMEORIGIN\\\", // Prevent clickjacking\\n \\\"X-Content-Type-Options\\\": \\\"nosniff\\\", // Prevent MIME type sniffing\\n };\\n context.set(nonceContext, nonce);\\n return data({ nonce }, { headers });\\n};\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"In middleware\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"// root.tsx\\nconst headersMiddleware: Route.unstable_MiddlewareFunction = async (\\n\\t{ context, request },\\n\\tnext,\\n) => {\\n\\tconst nonce = generateNonce()\\n\\n\\tconst headers = {\\n\\t\\t[process.env.NODE_ENV === 'production'\\n\\t\\t\\t? 'Content-Security-Policy'\\n\\t\\t\\t: 'Content-Security-Policy-Report-Only']: getContentSecurityPolicy(nonce),\\n\\t\\t/** @see https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Reference/Headers/Strict-Transport-Security */\\n\\t\\t'Strict-Transport-Security': 'max-age=3600', // 1 hour. HTTPS only\\n\\t\\t'X-Frame-Options': 'SAMEORIGIN', // Prevent clickjacking\\n\\t\\t'X-Content-Type-Options': 'nosniff', // Prevent MIME type sniffing\\n\\t}\\n\\n\\tcontext.set(nonceContext, nonce)\\n\\n\\tconst response = await next()\\n\\tfor (const [key, value] of Object.entries(headers)) {\\n\\t\\tresponse.headers.set(key, value)\\n\\t}\\n\\n\\treturn response\\n}\\n\\nexport const unstable_middleware: Route.unstable_MiddlewareFunction[] = [headersMiddleware]\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Retrieve nonce from context in \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"entry.server.tsx\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Here in the \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"handleRequest()\"},{\"type\":\"text\",\"text\":\" function, we could retrieve nonce context set from loader or middleware, and we should pass the nonce to \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"renderToPipeableStream()\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This solves \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"import(\\\"/node_modules/.pnpm/@react-router+dev@7.6.2_@...\"},{\"type\":\"text\",\"text\":\" in dev and \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"import(\\\"/assets/entry.client-BYY3z-UA.js\\\");\"},{\"type\":\"text\",\"text\":\" in prod.\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"export default function handleRequest(props) {\\n let nonce: string;\\n\\n try {\\n // If root headers does not set, there will not be a nonce\\n nonce = loadContext.get(nonceContext);\\n } catch (error) {\\n nonce = generateNonce();\\n console.warn(\\\"No nonce found in context, generating a fallback.\\\");\\n }\\n\\n // ...\\n const { pipe, abort } = renderToPipeableStream(\\n ,\\n // ^ pass nonce to \\n {\\n nonce, // and renderToPipeableStream\\n // ...\\n }\\n );\\n // ...\\n}\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Add nonce Meta Tag\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Vite will automatically search for \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"csp-nonce\"},{\"type\":\"text\",\"text\":\" meta.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This is quite confusing, in vite documentation they do mentions that vite will inject a \"},{\"type\":\"text\",\"marks\":[{\"type\":\"textStyle\",\"attrs\":{\"backgroundColor\":null,\"color\":\"rgb(223, 223, 214)\",\"fontFamily\":null,\"fontSize\":null,\"lineHeight\":null}}],\"text\":\"meta tag, but only when \"},{\"type\":\"text\",\"marks\":[{\"type\":\"textStyle\",\"attrs\":{\"backgroundColor\":null,\"color\":\"rgb(223, 223, 214)\",\"fontFamily\":null,\"fontSize\":null,\"lineHeight\":null}},{\"type\":\"bold\"}],\"text\":\"html.cspNonce\"},{\"type\":\"text\",\"marks\":[{\"type\":\"textStyle\",\"attrs\":{\"backgroundColor\":null,\"color\":\"rgb(223, 223, 214)\",\"fontFamily\":null,\"fontSize\":null,\"lineHeight\":null}}],\"text\":\" is configured (\"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://vite.dev/guide/features.html#content-security-policy-csp\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Features | Vite\"},{\"type\":\"text\",\"marks\":[{\"type\":\"textStyle\",\"attrs\":{\"backgroundColor\":null,\"color\":\"rgb(223, 223, 214)\",\"fontFamily\":null,\"fontSize\":null,\"lineHeight\":null}}],\"text\":\"). You could find this script throwing error if you don’t provide a meta tag:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":null},\"content\":[{\"type\":\"text\",\"text\":\"const cspNonce = \\\"document\\\" in globalThis ? document.querySelector(\\\"meta[property=csp-nonce]\\\")?.nonce : void 0;\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Whatever, so we provide corresponding meta tag in root:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"jsx\"},\"content\":[{\"type\":\"text\",\"text\":\"//...\\nexport function Layout({ children }: { children: React.ReactNode }) {\\n//...\\nreturn(\\n\\t\\t// ...\\n\\t\\t\\n\\t\\t\\t\\n\\t\\t\\t\\n+\\t\\t\\t{import.env.meta.DEV && \\n\\t\\t\\t\\n\\t\\t\\t\\n\\t\\t\\n\\t\\t// ...\\n\\t)\\n}\"}]},{\"type\":\"horizontalRule\"},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Unsolved Issue: CSS Import in Dev Mode\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"import \\\"./app.css\\\";\"},{\"type\":\"text\",\"text\":\" in root is a conventional way to share global style. However, vite directly inject the \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\" {/* This throws error */}\\n \\n \\n )\\n}\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"The way I solve this is by using \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"remix-utils\"},{\"type\":\"text\",\"text\":\" \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"use-hydrated\"},{\"type\":\"text\",\"text\":\" hook, only renders the nonce after hydrating. \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/sergiodxa/remix-utils/blob/main/src/react/use-hydrated.ts\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"remix-utils-use-hydrated\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"// ...\\nconst isHydrated = useHydrated()\\nconst safeNonce = isHydrated ? nonce : undefined\\n// ...\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/kentcdodds/nonce-hydration-issues\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"kentcdodds/nonce-hydration-issues\"},{\"type\":\"text\",\"text\":\": This reproduction made by \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/kentcdodds\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}},{\"type\":\"textStyle\",\"attrs\":{\"backgroundColor\":null,\"color\":\"rgb(240, 246, 252)\",\"fontFamily\":null,\"fontSize\":null,\"lineHeight\":null}},{\"type\":\"bold\"}],\"text\":\"Kent C. Dodds\"},{\"type\":\"text\",\"text\":\" may be really helpful if you encounter this problem.\"}]}]}","excerpt","featuredImage","status","PUBLISHED","authorId","psRr2HBzP8Fv7Nxyvr45KY4mpcLu1sCY",["D",1753123903717],["D",1753644430217],"seoId","prevId",4,"nextId",32,"prevTitle","Automatically Generate Sitemap in React Router v7","prevSlug","automatically-generate-sitemap-in-react-router-v7","nextTitle","Handle BigInt from PostgreSQL to TypeScript Intl in React","nextSlug","handle-bigint-from-postgresql-to-typescript-intl-i","author",{"_37":61,"_13":79,"_80":81,"_82":44,"_83":84,"_47":85,"_49":86,"_87":88,"_89":90,"_91":92,"_93":-5},"Yin","email","yin@yinc.me","emailVerified","image","https://placecats.com/300/200",["D",1744040568491],["D",1744040568491],"role","admin","banned",false,"banReason","","banExpires",{"_37":38,"_39":11,"_40":16,"_41":-5,"_42":-5,"_43":44,"_45":46,"_47":95,"_49":96},["D",1753123903717],["D",1753644431107],"tags",[99,102,105],{"_37":100,"_13":101,"_53":101,"_14":92},13,"headers",{"_37":103,"_13":104,"_53":104,"_14":92},14,"middleware",{"_37":106,"_13":107,"_53":107,"_14":92},15,"nonce","categories",[],"nextPost",{"_10":74,"_53":76},"prevPost",{"_10":70,"_53":72},"actionData","errors"]