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"
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:
Website: https://ramunarasinga.com/
Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/
Github: https://github.com/Ramu-Narasinga
Email: ramu.narasinga@gmail.com
References:
- https://stackoverflow.com/questions/77205324/content-security-policy-for-microsofts-clarity
- https://stackoverflow.com/questions/63667754/problem-with-content-security-policy-next-js-and-amp
- https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy
- https://github.com/vercel/next.js/blob/canary/examples/with-strict-csp/middleware.js
- https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-csp
- https://medium.com/@victorhcharry/short-how-to-integrate-google-analytics-and-microsoft-clarity-with-nextjs-6174952f218c
- https://nextjs.org/docs/pages/api-reference/components/script