[{"_1":2,"_127":-5,"_128":-5},"loaderData",{"_3":4},"routes/web/blog/layout",{"_5":6,"_7":8,"_54":55},"searchParams","","meta",{"_9":10,"_37":38},"metaTags",[11,14,19,22,24,27,30,33,35],{"_12":13},"title","React Router v7 CSP (Content Security Policy) Configuration",{"_15":16,"_17":18},"name","description","content","This post will walk through the steps to set up CSP via middleware and loader in React Router v7.",{"_20":21,"_17":13},"property","og:title",{"_20":23,"_17":18},"og:description",{"_20":25,"_17":26},"og:type","website",{"_20":28,"_17":29},"og:url","https://papacloud.vercel.app/blog/react-router-v7-csp-content-security-policy-config",{"_15":31,"_17":32},"twitter:card","summary_large_image",{"_15":34,"_17":13},"twitter:title",{"_15":36,"_17":18},"twitter:description","seo",{"_39":40,"_41":13,"_42":18,"_43":-5,"_44":-5,"_45":46,"_47":48,"_49":40,"_50":51,"_52":53},"id",5,"metaTitle","metaDescription","keywords","ogImage","autoGenerated",true,"route","/blog/react-router-v7-csp-content-security-policy-config","postId","createdAt",["D",1753123903717],"updatedAt",["D",1753644431107],"posts",[56],{"_39":40,"_57":58,"_12":13,"_17":59,"_60":18,"_61":-5,"_62":63,"_64":65,"_50":66,"_52":67,"_37":68,"_71":72,"_87":88,"_105":106,"_123":124,"_125":126},"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],{"_39":40,"_41":13,"_42":18,"_43":-5,"_44":-5,"_45":46,"_47":48,"_49":40,"_50":69,"_52":70},["D",1753123903717],["D",1753644431107],"author",{"_39":65,"_15":73,"_74":75,"_76":46,"_77":78,"_50":79,"_52":80,"_81":82,"_83":84,"_85":6,"_86":-5},"Yin","email","yin@yinc.me","emailVerified","image","https://placecats.com/300/200",["D",1744040568491],["D",1744040568491],"role","admin","banned",false,"banReason","banExpires","postToTag",[89,97,101],{"_49":40,"_90":91,"_92":93,"_94":95},"tagId",13,"order",0,"tag",{"_39":91,"_15":96,"_57":96,"_16":6},"headers",{"_49":40,"_90":98,"_92":93,"_94":99},14,{"_39":98,"_15":100,"_57":100,"_16":6},"middleware",{"_49":40,"_90":102,"_92":93,"_94":103},15,{"_39":102,"_15":104,"_57":104,"_16":6},"nonce","postToCategory",[107,114,118],{"_49":40,"_108":109,"_92":93,"_110":111},"categoryId",6,"category",{"_39":109,"_15":112,"_57":112,"_16":6,"_113":-5},"react-router","parentId",{"_49":40,"_108":115,"_92":93,"_110":116},116,{"_39":115,"_15":117,"_57":117,"_16":6,"_113":-5},"軟體",{"_49":40,"_108":119,"_92":93,"_110":120},7,{"_39":119,"_15":121,"_57":122,"_16":6,"_113":-5},"Content Security Policy (CSP)","content-security-policy-csp","tags",[95,99,103],"categories",[111,116,120],"actionData","errors"]