How I fixed this Next.js error: Refused to load the script because it violate Content Security Policy directive
Tags: javascript, nextjs, react, opensource
Published: 2024-05-16 22:13:45

Recently, I migrated my portfolio website: [ramunarasinga.com](http://ramunarasinga.com) to Next.js using [leerob.io](http://leerob.io) template and wanted to integrate Microsoft clarity with Next.js.

At first, I directly copied the script and pasted it in the head tag in layout.tsx and got the following error:

![](https://media.licdn.com/dms/image/D4E12AQHkDpjOxCUYIQ/article-inline_image-shrink_1500_2232/0/1715896123084?e=1721260800&v=beta&t=5s8HLMGYk5xua8euSoZtw6V-USgZKV2jSTiclDmIUYI)

I overlooked the fact that this error is related to [Content Security Policy](https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy) and thought this has to do with me not using [Script from Next.js](https://nextjs.org/docs/pages/api-reference/components/script), so I followed along with the steps provided in [How to setup Google Analytics and Microsoft Clarity with Nextjs](https://medium.com/@victorhcharry/short-how-to-integrate-google-analytics-and-microsoft-clarity-with-nextjs-6174952f218c).

[![](https://media.licdn.com/dms/image/D4E12AQHAUGn6_RrtBg/article-inline_image-shrink_1500_2232/0/1715896123601?e=1721260800&v=beta&t=kTeO2lPjl5OGbDmcX5uLWAQ-f3pc-RFVG4D3qAw3d0I)](https://tthroo.com)

I particularly liked the metrics folder structure since this way you could add more external analytics integrations into your app. [This medium article](https://medium.com/@victorhcharry/short-how-to-integrate-google-analytics-and-microsoft-clarity-with-nextjs-6174952f218c) uses Script tag. I add these changes and refresh my dev server only to find this error still exists.

![](https://media.licdn.com/dms/image/D4E12AQGLcmgX0NbnCw/article-inline_image-shrink_1500_2232/0/1715896122983?e=1721260800&v=beta&t=IGxal310YpvNlZtHjHvN6WBVl40pTld0aUqGmPKN2NY)

> _Never assume an error without looking at the error message, re-read the error message completely before you make assumptions._

Error message:
--------------

Refused to load the script ‘[https://www.clarity.ms/tag/](https://www.clarity.ms/tag/)['](https://www.clarity.ms/tag/mcgurp680t%27) because it violates the following Content Security Policy directive: “script-src ‘self’ ‘unsafe-eval’ ‘unsafe-inline’ [cdn.vercel-insights.com](http://cdn.vercel-insights.com) [vercel.live](http://vercel.live) [va.vercel-scripts.com](http://va.vercel-scripts.com)”. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.

Fix:
----

### Approach 1: Relying on my hunch

Looking at the error, the only spot where I could find the following code from error message is in next.config.mjs

```
"script-src 'self' 'unsafe-eval' 'unsafe-inline' 
cdn.vercel-insights.com vercel.live va.vercel-scripts.com"
```

![](https://media.licdn.com/dms/image/D4E12AQHHVbSMB3gEGA/article-inline_image-shrink_1500_2232/0/1715896123309?e=1721260800&v=beta&t=sIRuSwAA28w2jWExSXCT8KXuMmF18vbOqI24SNMhyrU)

At first, I added https://www.clarity.ms but then I realised the other domains such as [va.vercel-scripts.com](http://va.vercel-scripts.com) are without ‘[https://’](https://’) so I changed it to [www.clarity.ms](http://www.clarity.ms)

Inspecting network calls, Microsoft clarity’s endpoint “/collect” has been getting called as I was switching tabs on my website.

But is this the right way? Definitely not.

### Approach 2: Read the documentation to make sure you got it right.

[Clarity’s documentation](https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-csp) suggests adding Clarity to your default-src directive, but for reasons I do not know, adding Clarity to default-src did not work.

Clarity’s documentation also recommends to add the following

```
https://\*.clarity.ms https://c.bing.com
```

Looks like it wasn’t just [www.clarity.ms](http://www.clarity.ms) but with a \* (for load balancing reasons mentioned in the docs)

I would choose approach 2 because I would then have made an informed decision after reading the documentation and finding the right way to fix CSP related issues.

For more information, refer to this [stackoverflow question](https://stackoverflow.com/questions/77205324/content-security-policy-for-microsofts-clarity).

Conclusion:
-----------

Never assume an error is because of X or Y without reading the error message completely, this can save you a significant amount of time. In order to get the Microsoft Clarity integration work with your Next.js app, you need to update a directive in next.config.mjs to allow requests made to [clarity.ms](http://clarity.ms)

About me:
---------

Website: [https://ramunarasinga.com/](https://ramunarasinga.com/)

Linkedin: [https://www.linkedin.com/in/ramu-narasinga-189361128/](https://www.linkedin.com/in/ramu-narasinga-189361128/)

Github: [https://github.com/Ramu-Narasinga](https://github.com/Ramu-Narasinga)

Email: [ramu.narasinga@gmail.com](mailto:ramu.narasinga@gmail.com)

References:
-----------

1.  [https://stackoverflow.com/questions/77205324/content-security-policy-for-microsofts-clarity](https://stackoverflow.com/questions/77205324/content-security-policy-for-microsofts-clarity)
2.  [https://stackoverflow.com/questions/63667754/problem-with-content-security-policy-next-js-and-amp](https://stackoverflow.com/questions/63667754/problem-with-content-security-policy-next-js-and-amp)
3.  [https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy](https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy)
4.  [https://github.com/vercel/next.js/blob/canary/examples/with-strict-csp/middleware.js](https://github.com/vercel/next.js/blob/canary/examples/with-strict-csp/middleware.js)
5.  [https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-csp](https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-csp)
6.  [https://medium.com/@victorhcharry/short-how-to-integrate-google-analytics-and-microsoft-clarity-with-nextjs-6174952f218c](https://medium.com/@victorhcharry/short-how-to-integrate-google-analytics-and-microsoft-clarity-with-nextjs-6174952f218c)
7.  [https://nextjs.org/docs/pages/api-reference/components/script](https://nextjs.org/docs/pages/api-reference/components/script)