CORS Policy Violations and HTTP 503 Errors

[tuhinkarmakar]

Preface

I know this issue might not be related to this repo. I was asked to create an issue here by a community expert at Microsoft Docs. My question on Webmasters regarding this issue remains unanswered at the time of creating this issue.

The Issue

I followed the official setup guide to add Microsoft Clarity on my website using Google Tag Manager. I am getting CORS policy violation errors and 503 errors on my website. Some outbound requests to Clarity are failing.

Error Log

14:47:17.201 Access to XMLHttpRequest at 'https://www.clarity.ms/eus2/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
14:47:17.203 www.clarity.ms/eus2/collect:1 Failed to load resource: net::ERR_FAILED
14:47:57.731 Access to XMLHttpRequest at 'https://www.clarity.ms/eus2/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
14:47:57.734 www.clarity.ms/eus2/collect:1 Failed to load resource: net::ERR_FAILED
14:48:03.072 Access to XMLHttpRequest at 'https://www.clarity.ms/eus2/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
14:48:03.073 www.clarity.ms/eus2/collect:1 Failed to load resource: net::ERR_FAILED
14:48:03.551 Access to XMLHttpRequest at 'https://www.clarity.ms/eus2/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
14:48:03.552 www.clarity.ms/eus2/collect:1 Failed to load resource: net::ERR_FAILED
14:48:04.504 www.clarity.ms/eus2/collect:1 Failed to load resource: the server responded with a status of 503 ()

Screenshot

[clubstoreorion]

Hi, you got it resolve this problem?

[tuhinkarmakar]

@clubstoreorion: I don't remember doing anything special to fix it. I left it with the CORS issue. Now I see that the issue isn't showing up anymore.

[ClaritySupport]

@clubstoreorion ,If your website has a CSP, you need to add Clarity to the allowed websites. Otherwise, browsers will block Clarity resources, and the Clarity dashboard's data is affected.Add Clarity to your default-src directive, which is a future proof way to add Clarity to your CSP, refer Clarity Content Security Policy for more details.

[VinceCabs]

We added Clarity to the CSP on our website, See this extract from the HTTP headers of the HTML Document :

Content-Security-Policy: 
    default-src 'self' ;
    script-src 'self' 'nonce-[...]' chrome-extension: 'unsafe-inline' 'unsafe-eval' ;
    object-src 'self' ;
    style-src 'self' blob: chrome-extension: 'unsafe-inline'  https://www.clarity.ms  ;
    img-src 'self' http: https: data: blob:  https://www.clarity.ms ;
    media-src 'self'  https://www.clarity.ms blob:;
    frame-ancestors 'self';
    frame-src blob: https: mailto:  https://www.clarity.ms ;
    font-src 'self' https: data:  https://www.clarity.ms ;
    connect-src 'self'  https://www.clarity.ms blob: ;
    base-uri 'self'

But Clarity is still blocked :

Access to XMLHttpRequest at 'https://www.clarity.ms/eus2/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So if I understand well, Clarity should add this header:

Access-Control-Allow-Origin: https://example.com

or

Access-Control-Allow-Origin: *

[ClaritySupport]

Hello,

The error is due to browser CSP blocking Clarity.If your website has a CSP, you need to add Clarity to the allowed websites. Otherwise, browsers will block Clarity resources, and the Clarity dashboard's data is affected.Refer Clarity Content Security Policy | Microsoft Learnhttps://learn.microsoft.com/en-us/clarity/clarity-csp for more details.

To resolve the issue add Clarity to your default-src directive, which is a future proof way to add Clarity to your CSP.

Example: default-src 'self' https://*.clarity.ms https://c.bing.com 'unsafe-inline';

Thanks, Clarity Support Team Visit our docs!: https://docs.microsoft.com/en-us/clarityhttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fclarity&data=05%7C01%7Cv-vidasa%40microsoft.com%7C343fe08f40a94e184c6408da28fedd21%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637867372409365494%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Q1zklwmipOGmVmg01HjPFwTVAwft75whSRoB8fFF%2BoY%3D&reserved=0 @.@.> @.***

Confidentiality note: This e-mail, and any attachment to it, contains privileged and confidential information intended only for the use of the individual(s) or entity named in the e-mail. If the reader of the e-mail is not the intended recipient, or the employee or agent responsible for delivering it to the intended recipient, you are hereby notified that reading it is strictly prohibited. If you have received this e-mail in error, please immediately return it to the sender and delete it from your system.

From: VinceCabs @.> Sent: Wednesday, February 8, 2023 6:30 AM To: microsoft/clarity @.> Cc: Microsoft Clarity Support @.>; Comment @.> Subject: Re: [microsoft/clarity] CORS Policy Violations and HTTP 503 Errors (#59)

We added Clarity to the CSP on our website, See this extract from the HTTP headers of the HTML Document :

Content-Security-Policy:

default-src 'self' ;

script-src 'self' 'nonce-[...]' chrome-extension: 'unsafe-inline' 'unsafe-eval' ;

object-src 'self' ;

style-src 'self' blob: chrome-extension: 'unsafe-inline'  https://www.clarity.ms  ;

img-src 'self' http: https: data: blob:  https://www.clarity.ms ;

media-src 'self'  https://www.clarity.ms blob:;

frame-ancestors 'self';

frame-src blob: https: mailto:  https://www.clarity.ms ;

font-src 'self' https: data:  https://www.clarity.ms ;

connect-src 'self'  https://www.clarity.ms blob: ;

base-uri 'self'

But Clarity is still blocked :

Access to XMLHttpRequest at 'https://www.clarity.ms/eus2/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So if I understand well, Clarity should add this header:

Access-Control-Allow-Origin: https://example.com

or

Access-Control-Allow-Origin: *

Reply to this email directly, view it on GitHubhttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fclarity%2Fissues%2F59%23issuecomment-1422688183&data=05%7C01%7Cv-vikasd%40microsoft.com%7C8a7ecd593e234d5e983b08db09e1064b%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C638114634337548366%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Up3oNHLtRYfLGzXoffBUCUWkx0Lf%2FgD2RekaVFTXi18%3D&reserved=0, or unsubscribehttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAW5BXQ6FTUF5XP66JJ2MYOTWWOUYHANCNFSM4TGQZAPA&data=05%7C01%7Cv-vikasd%40microsoft.com%7C8a7ecd593e234d5e983b08db09e1064b%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C638114634337548366%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=ywB08aaH%2FqRvhTEGgDT%2FvLO9WcufJ7BZk4EslG9V%2BCE%3D&reserved=0. You are receiving this because you commented.Message ID: @.@.>>

[cyfyifanchen]

Same here.