Vercel Toolbar with strict CSP?

[mpost-hai]

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:

script-src 'nonce-<value>' 'strict-dynamic' https://vercel.live

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?

[mpost-hai]

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.

[pawlean]

Hi, @mpost-hai!

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.