[{"_1":2,"_149":-5,"_7":-5},"loaderData",{"_3":4,"_16":17},"root",{"_5":6,"_7":8,"_9":10},"successes",[],"errors",[],"requestInfo",{"_11":12,"_15":-7},"hints",{"_13":14},"theme","light","customTheme","routes/web/blog/layout",{"_18":19,"_20":21,"_67":68,"_143":144,"_148":-7},"searchParams","category=content-security-policy-csp","meta",{"_22":23,"_50":51},"metaTags",[24,27,32,35,37,40,43,46,48],{"_25":26},"title","Blog - Where you see my sounds 🎵",{"_28":29,"_30":31},"name","description","content","This is where I share my thoughts and insights.",{"_33":34,"_30":26},"property","og:title",{"_33":36,"_30":31},"og:description",{"_33":38,"_30":39},"og:type","website",{"_33":41,"_30":42},"og:url","https://www.tianli-tea.com/blog?category=content-security-policy-csp",{"_28":44,"_30":45},"twitter:card","summary_large_image",{"_28":47,"_30":26},"twitter:title",{"_28":49,"_30":31},"twitter:description","seo",{"_52":53,"_54":26,"_55":31,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":64,"_65":66},"id",61,"metaTitle","metaDescription","keywords","ogImage","autoGenerated",true,"route","/blog","postId","createdAt",["D",1746608338292],"updatedAt",["D",1746608338292],"posts",[69],{"_52":70,"_71":72,"_25":73,"_30":74,"_75":76,"_77":-5,"_78":79,"_80":81,"_63":82,"_65":83,"_84":85,"_50":101,"_105":106,"_121":122,"_139":140,"_141":142},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",{"_52":81,"_28":86,"_87":88,"_89":59,"_90":91,"_63":92,"_65":93,"_94":95,"_96":97,"_98":99,"_100":-5},"Yin","email","yin@yinc.me","emailVerified","image","https://placecats.com/300/200",["D",1744040568491],["D",1744040568491],"role","admin","banned",false,"banReason","","banExpires",{"_52":70,"_54":73,"_55":76,"_56":-5,"_57":-5,"_58":59,"_60":102,"_62":70,"_63":103,"_65":104},"/blog/react-router-v7-csp-content-security-policy-config",["D",1753123903717],["D",1753644431107],"postToTag",[107,113,117],{"_62":70,"_108":109,"_110":111},"tagId",13,"tag",{"_52":109,"_28":112,"_71":112,"_29":99},"headers",{"_62":70,"_108":114,"_110":115},14,{"_52":114,"_28":116,"_71":116,"_29":99},"middleware",{"_62":70,"_108":118,"_110":119},15,{"_52":118,"_28":120,"_71":120,"_29":99},"nonce","postToCategory",[123,130,134],{"_62":70,"_124":125,"_126":127},"categoryId",6,"category",{"_52":125,"_28":128,"_71":128,"_29":99,"_129":-5},"react-router","parentId",{"_62":70,"_124":131,"_126":132},116,{"_52":131,"_28":133,"_71":133,"_29":99,"_129":-5},"軟體",{"_62":70,"_124":135,"_126":136},7,{"_52":135,"_28":137,"_71":138,"_29":99,"_129":-5},"Content Security Policy (CSP)","content-security-policy-csp","tags",[111,115,119],"categories",[127,132,136],"categoriesFilter",[145],{"_52":135,"_28":137,"_71":138,"_29":99,"_129":-5,"_121":146},[147],{"_62":70},"tagsFilter","actionData"]

Blog - Where you see my sounds 🎵

Blog - Filtered by category: Content Security Policy (CSP)

React Router v7 CSP (Content Security Policy) Configuration

Subscribe to new posts!