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

3 Likes
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!

1 Like
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?

1 Like
10

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