Next.js Discord

Discord Forum

Doubts about how to use CSP in Next

Unanswered
Californian posted this in #help-forum
Open in Discord
CalifornianOP
I'm trying to secure my app with CSP. I added some middleware based on the docs (https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy#adding-a-nonce-with-middleware) but now I'm getting some problems:

1) Some NextAuth scripts not being loaded due to unsafe-eval not being allowed in the script-src directive. Ok, I can correct this one by allowing unsafe-eval in the script-src directive. But isn't this a security threat ? Why NextAuth depends on it to work ? Or is it a problem with Next ?

2) Some Tailwind CSS stylesheets not being loaded due to no nonce given by the stylesheets matching the nonce I gave to the browser via my response headers. Is there anyway to make Next or Tailwind CSS load these stylesheets with my nonces (already added on the request headers through the middleware) ?

3) Some Next scripts created during the rendering process not being loaded due to no nonce given by the scripts matching the nonce I gave to the browser via my response headers. Is there anyway to make Next load these scripts with my nonces (already added on the request headers through the middleware) ?

4) Some Stripe checkout scripts not being loaded due to no nonce given by the scripts matching the nonce I gave to the browser via my response headers. Is there anyway to make Next load these scripts with my nonces (already added on the request headers through the middleware) ? I guess in this case it's actually a problem with the CSP defined by the Stripe-controlled server that generated the Stripe checkout, right ? So there is nothing I can do in this case apart from reporting to Stripe, I guess.

Maybe (1), (2) and (4) are not related to Next but rather to NextAuth, Tailwind CSS and Stripe instead. But I'm putting them here anyway just in case, since I'm completely lost about it.

16 Replies

@Californian I'm trying to secure my app with CSP. I added some middleware based on the docs (https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy#adding-a-nonce-with-middleware) but now I'm getting some problems: 1) Some NextAuth scripts not being loaded due to `unsafe-eval` not being allowed in the `script-src` directive. Ok, I can correct this one by allowing `unsafe-eval` in the `script-src` directive. But isn't this a security threat ? Why NextAuth depends on it to work ? Or is it a problem with Next ? 2) Some Tailwind CSS stylesheets not being loaded due to no nonce given by the stylesheets matching the nonce I gave to the browser via my response headers. Is there anyway to make Next or Tailwind CSS load these stylesheets with my nonces (already added on the request headers through the middleware) ? 3) Some Next scripts created during the rendering process not being loaded due to no nonce given by the scripts matching the nonce I gave to the browser via my response headers. Is there anyway to make Next load these scripts with my nonces (already added on the request headers through the middleware) ? 4) Some Stripe checkout scripts not being loaded due to no nonce given by the scripts matching the nonce I gave to the browser via my response headers. Is there anyway to make Next load these scripts with my nonces (already added on the request headers through the middleware) ? I guess in this case it's actually a problem with the CSP defined by the Stripe-controlled server that generated the Stripe checkout, right ? So there is nothing I can do in this case apart from reporting to Stripe, I guess. Maybe (1), (2) and (4) are not related to Next but rather to NextAuth, Tailwind CSS and Stripe instead. But I'm putting them here anyway just in case, since I'm completely lost about it.
Ray
do you have this config?
CalifornianOP
Yes, I have those
Ah, but I can maybe search for a solution in this sense: make the CSP middleware not match the Tailwind CSS stylesheets routes, nor Stripe checkout routes nor NextAuth scripts nor other Next scripts
The problem is that maybe those scripts are created dynamically. Don't know if I have a way to match their routes...
Ray
are those from _next?
CalifornianOP
Let me try adding _next to the matcher to check
CalifornianOP
No, it doesn't solve it
For instance, here are the kind of errors I get on client side
But weirdly, in the last error, the script the error points to is coming from _next/static/chunks/app
Ah, maybe when I tell the matcher to avoid the middleware for script coming from _next it's not considering the full tree ?
Let me try adding explicitly _next/static/chunks/app to see if I can get rid of the last error
No, also doesn't work. Here is my config for the middleware in case someone has any idea:

export const config = {
    matcher: [
        /*
         * Match all request paths except for the ones starting with:
         * - api (API routes)
         * - _next/static (static files)
         * - _next/image (image optimization files)
         * - favicon.ico (favicon file)
         */
        {
            source: '/((?!api|_next/static/chunks/app|favicon.ico).*)',
            missing: [
                { type: 'header', key: 'next-router-prefetch' },
                { type: 'header', key: 'purpose', value: 'prefetch' },
            ],
        },
    ],
}
CalifornianOP
Up, anyone managed to use CSP with Next ? It seems the middleware matcher feature is not working to exclude routes under _next from the CSP. Does anyone see a problem with my middleware config ?
CalifornianOP
Up
Longtail tuna
Any new about this topic ? I've the same issue
CalifornianOP
No, I didn't make much advance on this 😦