React Router v7 SPA mode: How to use strict CSP without unsafe-inline when <Scripts /> injects inline module scripts? #14602

tykhan · 2025-11-26T10:28:37Z

tykhan
Nov 26, 2025

I'm migrating an app from React Router v6 + Webpack to React Router v7 (SPA mode) + Vite and I'm having issues with setting a strict Content Security Policy.

In RR6 I had a normal index.html and loaded my bundle externally:

<script src="/js/admin-panel-bundle.js"></script>

This allowed me to use the following CSP without problems:

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; style-src 'self' 'unsafe-inline';">

Problem in React Router v7
In RR7 SPA mode, the app must use a root Layout component that generates the entire HTML document.
React Router injects its client entry through an inline <script type="module">, via:

export const Layout = ({ children }: { children: React.ReactNode }) => {
    return (
        <html lang='en'>
            <head>
                <meta charSet='UTF-8' />
                <meta httpEquiv='X-UA-Compatible' content='IE=edge' />
                {/* Can't be used now, blocks code execution */}
                {/* <meta httpEquiv='Content-Security-Policy' content="default-src 'self'; style-src 'self' 'unsafe-inline';" /> */}
            </head>
            <body>
                {children}
                <Scripts />
            </body>
        </html>
    );
};

So now the app always has inline JavaScript, which leads to app not being able to load at all. Console just throws CSP errors

My CSP attempt
I tried to switch to a nonce-based CSP, as an experiment I added some hardcoded value:

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self';
               style-src 'self' 'unsafe-inline';
               script-src 'self' 'nonce-random';">

And added a matching nonce:

<Scripts nonce="random" />
However, the browser still blocks execution with:

Executing inline script violates the Content Security Policy directive
'script-src 'self' 'nonce-random''.

But from my understanding, nonce based CSP should be use for SSR apps, not for SPA, so the question is next

👉 Is it possible to use React Router v7 SPA mode with a strict CSP (no unsafe-inline), given that always generates inline ES module code?

Specifically:

Are there recommended patterns for CSP + RR7 + SPA mode?

Or is 'unsafe-inline' unavoidable in SPA mode?

I couldn't find definitive guidance in RR7 docs, and a nonce alone does not allow the inline module script to run.

Any working solution or best practices would be appreciated.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

React Router v7 SPA mode: How to use strict CSP without unsafe-inline when <Scripts /> injects inline module scripts? #14602

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

React Router v7 SPA mode: How to use strict CSP without unsafe-inline when <Scripts /> injects inline module scripts? #14602

Uh oh!

tykhan Nov 26, 2025

Replies: 0 comments

tykhan
Nov 26, 2025