[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live)

[Feedback](/c/feedback/8)

# Vercel Toolbar with strict CSP? (follow-up)

274 views · 9 likes · 9 posts


Paul van Dyk (@paulvandyk) · 2024-10-31 · ♥ 2

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

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:

```ts
  // 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.


Amy Egan (@amyegan) · 2024-10-31

As you probably saw in the other post, the docs have some info on [using a Content Security Policy](https://vercel.com/docs/workflow-collaboration/vercel-toolbar/managing-toolbar#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.


Amy Egan (@amyegan) · 2024-10-31 · ♥ 3

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


Paul van Dyk (@paulvandyk) · 2025-03-03

Any hope to see this land some time this year?


Brody (@mrmckeb) · 2025-06-20

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.


Maxime (@deammer) · 2025-09-03 · ♥ 1

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!


Amy Egan (@amyegan) · 2025-09-04

If you [add the toolbar using the `@vercel/toolbar` package](https://vercel.com/docs/vercel-toolbar/in-production-and-localhost/add-to-production#adding-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:


Mike Post (@mpost-hai) · 2025-09-04 · ♥ 2

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?


Ryan (@ryanparker) · 2025-11-26 · ♥ 1

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