How I fixed this Next.js error: Refused to load the script ‘some_script_url’ because it violate the following Content Security Policy directive

Blog

Recently, I migrated my portfolio website: ramunarasinga.com to Next.js using 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:

I overlooked the fact that this error is related to Content Security Policy and thought this has to do with me not using Script from Next.js, so I followed along with the steps provided in How to setup Google Analytics and Microsoft Clarity with Nextjs.

I particularly liked the metrics folder structure since this way you could add more external analytics integrations into your app. This medium article uses Script tag. I add these changes and refresh my dev server only to find this error still exists.

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/' because it violates the following Content Security Policy directive: “script-src ‘self’ ‘unsafe-eval’ ‘unsafe-inline’ cdn.vercel-insights.com vercel.live 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 are without ‘https://’ so I changed it to 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 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 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.

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

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My web site — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@ramu-narasinga

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best p ractices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects