The latest directions for how to use the Vercel Toolbar with a Content-Security-Policy-Header are here. However, this doesn’t work if you’re using a strict CSP policy which includes:
Chrome displays the following error in this scenario:
Refused to load the script ‘https://vercel.live/_next-live/feedback/instrument.242aee9aec5e4e7f4f19.js’ because it violates the following Content Security Policy directive: “script-src ‘nonce-NDUxM2EyYWEtYTAwMi00ZDk2LWI4OGMtMDBlZjJkZDc0ODJm’ ‘strict-dynamic’ https://vercel.live”. Note that ‘strict-dynamic’ is present, so host-based allowlisting is disabled. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.
How do I get the Vercel Toolbar to work with nonces in my NextJS application?
I also tried adding a script-src-elem https://vercel.live directive to my policy, but that resulted in a slew of errors like the following:
Refused to execute inline script because it violates the following Content Security Policy directive: “script-src-elem https://vercel.live”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-TWKJpBGCg6787YVT32Nt9d/fVvIV5WlSXgLIeubmK6s=’), or a nonce (‘nonce-…’) is required to enable inline execution.
Thanks for posting. We currently do not support strict CSP policy, however I’ve shared this feedback internally and will keep you updated on any future developments.