Vercel Toolbar with strict CSP? (follow-up)

Feedback
1

This is a follow-up of Vercel Toolbar with strict CSP? since the thread has been closed and replies are no longer possible.

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.

2

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.

3

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

4

Any hope to see this land some time this year?

5

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.

6

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!

7

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 :pray:

8

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?

10

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