Skip to content

Commit

Permalink
clarification about CSP directives when using vercel analtics or spee…
Browse files Browse the repository at this point in the history
…d insights
  • Loading branch information
chrisweb committed Sep 4, 2024
1 parent 8a5aa0d commit 3ecbb84
Showing 1 changed file with 7 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -244,17 +244,17 @@ To see your **Speed Insights** in action, login to your Vercel account, click on
## CSP directives update

If you use either Vercel Analytics or Speed Insights and have added the CSP header as described in the [Adding CSP Headers in Next.js configuration](/web_development/tutorials/next-js-static-mdx-blog/content-security-policy#adding-csp-headers-in-nextjs-configuration) chapter, then you will have to make a few adjustements to your configuration
If you use either Vercel Analytics or Speed Insights and have added the CSP header as described in the [Adding CSP Headers in Next.js configuration](/web_development/tutorials/next-js-static-mdx-blog/content-security-policy#adding-csp-headers-in-nextjs-configuration) chapter, then you will have to make a few adjustments to your configuration

Edit your `next.config.mjs` file and then in the `defaultCSPDirectives` variable remove the `require-trusted-types-for 'script'` directive
Edit your `next.config.mjs` file, and then in the `defaultCSPDirectives` variable, remove the `require-trusted-types-for 'script'` directive

If this directive is enabled you will get the following errors in your browser console:
If this directive is enabled, you will get the following errors in your browser console:

```shell
This document requires 'TrustedScriptURL' assignment.
```

It might want to add a comment, inside of your `next.config.mjs` to let other developers that might wonder why this directive is missing why you haven't included it:
You might want to add a comment inside of your `next.config.mjs`, to let other developers that might wonder why this directive is missing, why you haven't included it:

```js
// we removed the
Expand All @@ -263,12 +263,14 @@ It might want to add a comment, inside of your `next.config.mjs` to let other de
// because of vercel analytics and speed insights
```

A second change you need to do, when using Vercel analytics, is to add the `https://va.vercel-scripts.com` domain for the **development** environment, to the **srcipt-src** directive:
A second change you need to do (when using Vercel analytics), is to add the `https://va.vercel-scripts.com` domain for the **development** environment to the **srcipt-src** directive:

```shell
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com;
```

This is only needed in development, in development Vercel Analytics does NOT track visits, but it is still loading a script from that domain, which is why we add it to the script-src directive

<Pagination
previous={{ label: 'Frontmatter plugin', href: '/web_development/tutorials/next-js-static-mdx-blog/frontmatter-plugin' }}
next={{ label: 'Production release (custom domain)', href: '/web_development/tutorials/next-js-static-mdx-blog/production_release' }}
Expand Down

0 comments on commit 3ecbb84

Please sign in to comment.