CSP headers error on script-src
Unanswered
Tomistoma posted this in #help-forum
TomistomaOP
I am using next.js 14.0.2 (the error occurs also with older versions, until 13.2.40) and a middleware.ts file configured following this guidelines: https://nextjs.org/docs/pages/building-your-application/configuring/content-security-policy
I changed the CSP respect to the guide, my CSP headers are configured this way:
default-src 'self'; script-src 'self' 'nonce-ZmRhMGQ3ZGQtZWU2MC00YWZmLWE2MjMtOWI0M2RlMGRjMjZk' 'strict-dynamic'; style-src 'report-sample' 'self' 'unsafe-inline'; connect-src 'self' *.vercel-insights.com; font-src 'self' data:; img-src 'self' data:; worker-src 'self' blob:; frame-ancestors 'none'; form-action 'self'; frame-src youtube.com www.youtube.com www.youtube-nocookie.com
This is the error that I am getting:
Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-ZmRhMGQ3ZGQtZWU2MC00YWZmLWE2MjMtOWI0M2RlMGRjMjZk' 'strict-dynamic'".
at (app-pages-browser)/./node_modules/next/dist/compiled/@next/react-refresh-utils/dist/runtime.js (main-app.js?v=1699961263457:1535:26)
at options.factory (webpack.js?v=1699961263457:716:31)
at webpack_require (webpack.js?v=1699961263457:37:33)
at webpack_exec (main-app.js?v=1699961263457:1812:61)
at main-app.js?v=1699961263457:1813:37
at webpackJsonpCallback (webpack.js?v=1699961263457:1388:39)
at main-app.js?v=1699961263457:9:61
The nonce is correctly assigned to every script, as the screen shows.
When I open the page in incognito mode, so I am not logged in and I'm not redirected to the admin area I am able to move on the webapp, but if I refresh I get the same error displayed few lines before.
I would like to understand how to avoid this error, without using unsafe-eval as solution since I don't want to expose the webapp.
Thanks in advance
I changed the CSP respect to the guide, my CSP headers are configured this way:
default-src 'self'; script-src 'self' 'nonce-ZmRhMGQ3ZGQtZWU2MC00YWZmLWE2MjMtOWI0M2RlMGRjMjZk' 'strict-dynamic'; style-src 'report-sample' 'self' 'unsafe-inline'; connect-src 'self' *.vercel-insights.com; font-src 'self' data:; img-src 'self' data:; worker-src 'self' blob:; frame-ancestors 'none'; form-action 'self'; frame-src youtube.com www.youtube.com www.youtube-nocookie.com
This is the error that I am getting:
Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-ZmRhMGQ3ZGQtZWU2MC00YWZmLWE2MjMtOWI0M2RlMGRjMjZk' 'strict-dynamic'".
at (app-pages-browser)/./node_modules/next/dist/compiled/@next/react-refresh-utils/dist/runtime.js (main-app.js?v=1699961263457:1535:26)
at options.factory (webpack.js?v=1699961263457:716:31)
at webpack_require (webpack.js?v=1699961263457:37:33)
at webpack_exec (main-app.js?v=1699961263457:1812:61)
at main-app.js?v=1699961263457:1813:37
at webpackJsonpCallback (webpack.js?v=1699961263457:1388:39)
at main-app.js?v=1699961263457:9:61
The nonce is correctly assigned to every script, as the screen shows.
When I open the page in incognito mode, so I am not logged in and I'm not redirected to the admin area I am able to move on the webapp, but if I refresh I get the same error displayed few lines before.
I would like to understand how to avoid this error, without using unsafe-eval as solution since I don't want to expose the webapp.
Thanks in advance