Vercel Toolbar with strict CSP? (follow-up)

(edited)

This is a follow-up of https://community.vercel.com/t/vercel-toolbar-with-strict-csp/471 since the thread has been closed and replies are no longer possible.

Vercel Community

Vercel Toolbar with strict CSP?

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...

I wanted to see if there are any plans to support this? currently we need to do some dirty trickets to get the toolbar to work, for example:

  // allow toolbar for internal team: see https://community.vercel.com/t/vercel-toolbar-with-strict-csp/471
  const disableVercelToolbar = !rootData?.user?.email?.includes('@acme.com')

  // see: https://web.dev/articles/strict-csp
  const cspHeader = createCspHeader(
    {
      'script-src': `'nonce-${nonce}' 'unsafe-inline' 'unsafe-eval' https: http:`,
      'object-src': "'none'",
      'base-uri': "'none'",
    },
    {
      includeHeaderName: false,
      presets: disableVercelToolbar ? [{ 'script-src': "'strict-dynamic'" }] : [],
    }
  )

  responseHeaders.set('Content-Security-Policy', cspHeader)

It would be great if we could get some support with strict-dynamic + nonce csp headers.

Vercel Staff

As you probably saw in the other post, the docs have some info on using a Content Security Policy. But the toolbar does not currently support strict-dynamic CSP.

Pauline already shared the previous post with the engineering team, and I'll link this post as well.

Vercel Staff

I moved this topic to the #feedback category and extended the expiration date so others can add join the conversation

Any hope to see this land some time this year?

I've just hit this issue today too. We use the Toolbar in all environments - local/dev, preview, and production - so this means we have to leave 'unsafe-inline' styles on for now.

If the toolbar could accept a nonce, or use the one from middleware, that would be great.

This issue prevents my company from using the Vercel toolbar, which is a shame. It would be so easy to pass a nonce to the toolbar!

Vercel Staff

If you add the toolbar using the @vercel/toolbar package, you can pass the nonce as a prop like <VercelToolbar nonce={nonce} />

This is experimental. It's not fully documented and not many teams have used it yet. If you try it, please let us know whether it works well or needs iteration

This approach doesn’t make sense at all if you’re generating the nonces in middleware. CSP is delivered as a series of response headers, so generating the values in middleware seems to make the most sense, right?

Passing nonce to the toolbar doesn’t resolve the iOS The operation is insecure error

This topic is closed. It no longer accepts new replies.

// allow toolbar for internal team: see https://community.vercel.com/t/vercel-toolbar-with-strict-csp/471 const disableVercelToolbar = !rootData?.user?.email?.includes('@acme.com') // see: https://web.dev/articles/strict-csp const cspHeader = createCspHeader( { 'script-src': `'nonce-${nonce}' 'unsafe-inline' 'unsafe-eval' https: http:`, 'object-src': "'none'", 'base-uri': "'none'", }, { includeHeaderName: false, presets: disableVercelToolbar ? [{ 'script-src': "'strict-dynamic'" }] : [], } ) responseHeaders.set('Content-Security-Policy', cspHeader)