[{"_1":2,"_138":-5,"_139":-5},"loaderData",{"_3":4},"routes/web/blog/layout",{"_5":6,"_7":8,"_54":55,"_132":133,"_137":-7},"searchParams","category=content-security-policy-csp","meta",{"_9":10,"_37":38},"metaTags",[11,14,19,22,24,27,30,33,35],{"_12":13},"title","Blog - Where you see my sounds 🎵",{"_15":16,"_17":18},"name","description","content","This is where I share my thoughts and insights.",{"_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?category=content-security-policy-csp",{"_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":-5,"_50":51,"_52":53},"id",61,"metaTitle","metaDescription","keywords","ogImage","autoGenerated",true,"route","/blog","postId","createdAt",["D",1746608338292],"updatedAt",["D",1746608338292],"posts",[56],{"_39":57,"_58":59,"_12":60,"_17":61,"_62":63,"_64":-5,"_65":66,"_67":68,"_50":69,"_52":70,"_71":72,"_37":88,"_92":93,"_110":111,"_128":129,"_130":131},5,"slug","react-router-v7-csp-content-security-policy-config","React Router v7 CSP (Content Security Policy) Configuration","{\"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","This post will walk through the steps to set up CSP via middleware and loader in React Router v7.","featuredImage","status","PUBLISHED","authorId","psRr2HBzP8Fv7Nxyvr45KY4mpcLu1sCY",["D",1753123903717],["D",1753644430217],"author",{"_39":68,"_15":73,"_74":75,"_76":46,"_77":78,"_50":79,"_52":80,"_81":82,"_83":84,"_85":86,"_87":-5},"Yin","email","yin@yinc.me","emailVerified","image","https://placecats.com/300/200",["D",1744040568491],["D",1744040568491],"role","admin","banned",false,"banReason","","banExpires",{"_39":57,"_41":60,"_42":63,"_43":-5,"_44":-5,"_45":46,"_47":89,"_49":57,"_50":90,"_52":91},"/blog/react-router-v7-csp-content-security-policy-config",["D",1753123903717],["D",1753644431107],"postToTag",[94,102,106],{"_49":57,"_95":96,"_97":98,"_99":100},"tagId",13,"order",0,"tag",{"_39":96,"_15":101,"_58":101,"_16":86},"headers",{"_49":57,"_95":103,"_97":98,"_99":104},14,{"_39":103,"_15":105,"_58":105,"_16":86},"middleware",{"_49":57,"_95":107,"_97":98,"_99":108},15,{"_39":107,"_15":109,"_58":109,"_16":86},"nonce","postToCategory",[112,119,123],{"_49":57,"_113":114,"_97":98,"_115":116},"categoryId",6,"category",{"_39":114,"_15":117,"_58":117,"_16":86,"_118":-5},"react-router","parentId",{"_49":57,"_113":120,"_97":98,"_115":121},116,{"_39":120,"_15":122,"_58":122,"_16":86,"_118":-5},"軟體",{"_49":57,"_113":124,"_97":98,"_115":125},7,{"_39":124,"_15":126,"_58":127,"_16":86,"_118":-5},"Content Security Policy (CSP)","content-security-policy-csp","tags",[100,104,108],"categories",[116,121,125],"categoriesFilter",[134],{"_39":124,"_15":126,"_58":127,"_16":86,"_118":-5,"_110":135},[136],{"_49":57},"tagsFilter","actionData","errors"]

Blog - Where you see my sounds 🎵

Blog.

React Router v7 CSP (Content Security Policy) Configuration