How to correctly configure CSP for React Router + Vite + Nginx deployment?

[Bangik]

Hi, I’m building a React Router app with Vite and I’m struggling with setting up the correct Content Security Policy (CSP) headers.

Here is my setup:

• package.json (scripts use react-router build/dev/serve):

{
  "name": "nch-fe",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "react-router build",
    "dev": "react-router dev",
    "start": "react-router-serve ./build/server/index.js",
    "typecheck": "react-router typegen && tsc"
  },
  "dependencies": {
    "@react-router/node": "^7.5.3",
    "@react-router/serve": "^7.5.3",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-router": "^7.5.3",
    "tailwind-merge": "^3.3.1",
    "zod": "^3.25.67",
    "zustand": "^5.0.5",
    // ... other UI libraries (Radix UI, Lucide, SWR, etc.)
  },
  "devDependencies": {
    "@react-router/dev": "^7.5.3",
    "@tailwindcss/vite": "^4.1.4",
    "vite": "^6.3.3",
    "typescript": "^5.8.3"
  }
}

• Dockerfile for serving with Nginx:

FROM nginx:alpine

COPY --from=build /app/build/client /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

• This container is then exposed on port 80 and reverse proxied through another Nginx instance.

---

Problem

I want to add a strict CSP (with nonces or hashes) but I’m unsure how this should be done properly for a React Router + Vite setup:

1. Should the CSP be handled fully at the Nginx reverse proxy layer (using add_header Content-Security-Policy ...), or is there a React Router–specific way to inject nonces into <script> and <style> tags?
2. Since Vite + React Router generates the client build automatically, how do I ensure inline scripts like React hydration or router scripts are allowed without falling back to unsafe-inline?
3. Are there any recommended patterns/examples for React Router 7 with CSP setup (similar to how Remix handles CSP with nonces)?

---

What I’ve Tried

• Adding a static CSP in nginx.conf works for most assets, but fails for inline scripts/styles injected by Vite/React Router.
• I saw that Remix docs mention using nonce attributes, but I don’t see a clear example for React Router apps.
• My goal is to avoid "unsafe-inline" in both script-src and style-src.

---

Question

👉 What is the recommended way to correctly configure CSP for React Router + Vite + Nginx deployments?
Do I need to inject nonces at build/serve time with react-router itself, or is it expected to be handled externally (reverse proxy / middleware)?

Thanks in advance! 🙏