search

microsoft / clarity

A behavioral analytics library that uses dom mutations and user interactions to generate aggregated insights.
https://clarity.microsoft.com
MIT License
1.99k stars 196 forks source link

occasionally getting XMLHttpRequest blocked by CORS policy #507

Open omuleanu opened 7 months ago

omuleanu commented 7 months ago

sometimes I'm getting this error: Access to XMLHttpRequest at 'https://y.clarity.ms/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. clarity.js:2 

   POST https://y.clarity.ms/collect net::ERR_FAILED 500 (Internal Server Error)

and it looks like clarity is retrying and after 1 or 3 failed attempts it is getting a collect with the result 204 No Content

the clarity js code is not directly in the header but inside a tags.js file ( in case that's important )

kukidon-dev commented 7 months ago

The same issue happens for me as well

Roopak17Gupta commented 7 months ago

same. getting 500 errors

getting these response headers

HTTP/1.1 500 Internal Server Error Server: nginx/1.18.0 (Ubuntu) Date: Mon, 11 Dec 2023 10:31:22 GMT Content-Type: text/html Content-Length: 588 Connection: close access-control-allow-credentials: true access-control-allow-methods: * Access-Control-Allow-Origin: http://localhost:4200

Ticolyle commented 5 months ago

I am also experiencing this issue. We have already configured our CSP directives as suggested by the Clarity documentation: https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-csp

Are these related? #293 #59

Edit: A screenshot of my chrome console errors: cors-error-on-clarity-csp

A screenshot of the headers sent with the request to https://o.clarity.ms/collect': cos-error-clairty-request-headres-screenshot

Cotspheer commented 5 months ago

I'm having the same issue even without CSP. Microsoft Clarity is configured with the Domain I use.

With CSP:

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

Without CSP:

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

Worked well in my experience but in the past days I'm not sure if there was a change either browser wise or Clarity wise.

My CSP:

const helmetConfig: HelmetOptions = {
      crossOriginEmbedderPolicy: false,
      contentSecurityPolicy: {
        directives: {
          defaultSrc: [
            "'self'",
            "ws:",
            "wss:",
            "data:",
            "penia.ai",
            "*.penia.ai",
            "googleapis.com",
            "*.googleapis.com",
            "gstatic.com",
            "*.gstatic.com",
            "clarity.ms",
            "*.clarity.ms",
            "googletagmanager.com",
            "*.googletagmanager.com",
            "google-analytics.com",
            "*.google-analytics.com",
            "google.com",
            "*.google.com",
            "azure.com",
            "*.azure.com",
            "applicationinsights.azure.com",
            "*.applicationinsights.azure.com",
            "in.applicationinsights.azure.com",
            "*.in.applicationinsights.azure.com",
            "https://login.microsoftonline.com",
            "microsoftonline.com",
            "*.microsoftonline.com",
            "bing.com",
            "*.bing.com",
            "'sha256-AF490//jIflwN/2nTDszvAx/KI2V9GJG8gdwvGhO/zw='",
            "'sha256-OqR09NfBvWA2ZwTWynEePdmVEHOs/pGbIMu8VG6Senc='",
            "'sha256-GpZxVZb6S9KUhqDOF09rKxWOvSIwMZ7XJ4hcR3MeSEI='",
          ],
          imgSrc: [
            "'self'",
            "data:",
            "*",
          ],
          styleSrc: [
            "'self'",
            "penia.ai",
            "*.penia.ai",
            "googleapis.com",
            "*.googleapis.com",
            "gstatic.com",
            "*.gstatic.com",
            "clarity.ms",
            "*.clarity.ms",
            "googletagmanager.com",
            "*.googletagmanager.com",
            "google-analytics.com",
            "*.google-analytics.com",
            "google.com",
            "*.google.com",
            "azure.com",
            "*.azure.com",
            "applicationinsights.azure.com",
            "*.applicationinsights.azure.com",
            "in.applicationinsights.azure.com",
            "*.in.applicationinsights.azure.com",
            "https://login.microsoftonline.com",
            "microsoftonline.com",
            "*.microsoftonline.com",
            "bing.com",
            "*.bing.com",
            "'unsafe-inline'",
          ],
          scriptSrc: [
            "'self'",
            "penia.ai",
            "*.penia.ai",
            "googleapis.com",
            "*.googleapis.com",
            "gstatic.com",
            "*.gstatic.com",
            "clarity.ms",
            "*.clarity.ms",
            "googletagmanager.com",
            "*.googletagmanager.com",
            "google-analytics.com",
            "*.google-analytics.com",
            "google.com",
            "*.google.com",
            "azure.com",
            "*.azure.com",
            "applicationinsights.azure.com",
            "*.applicationinsights.azure.com",
            "in.applicationinsights.azure.com",
            "*.in.applicationinsights.azure.com",
            "https://login.microsoftonline.com",
            "microsoftonline.com",
            "*.microsoftonline.com",
            "bing.com",
            "*.bing.com",
            "'sha256-AF490//jIflwN/2nTDszvAx/KI2V9GJG8gdwvGhO/zw='",
            "'sha256-OqR09NfBvWA2ZwTWynEePdmVEHOs/pGbIMu8VG6Senc='",
            "'sha256-GpZxVZb6S9KUhqDOF09rKxWOvSIwMZ7XJ4hcR3MeSEI='",
            (_req: any, res: any) => `'nonce-${res.locals["cspNonce"]}'`,
          ],
          scriptSrcAttr: [
            "'unsafe-inline'",
          ],
        },
      },
    };

My System: Browser: Chrome Version 121.0.6167.86 (Official Build) (64-bit) OS: Microsoft Windows [Version 10.0.19043.2075], locale de-DE

prein commented 5 months ago

Same here, also started recently, tested on FF, Chrome, desktop and mobile

Cotspheer commented 5 months ago

Sorry for "spamming" but another update from my side: Currently its working again. Just a wild guess but maybe there is an instance that is stuck / configured wrong and maybe when a loadbalancer decides to route the traffic to a corrupted instance we see this error?

And as I'm writing this its already not working anymore. So maybe really a loadbalancer thing? I did not change / nor publish on my side that could have a side effect in the meantime.

EDIT: As I just recognized that it always returns a 500 status code. So it has nothing to do with CORS itself. Its just a misleading browser message. I really think there is an instance corrupted.

josefpsurny commented 5 months ago

I have the same problem here. When trying Google PageSpeed Insights test the problem is really intermittent. But in browser every time. Thinking why is the problem in emulated device only sometimes.

mengcan555 commented 5 months ago

The same issue happens for me as well

sayushman19 commented 4 months ago

335 POST https://m.clarity.ms/collect net::ERR_NAME_NOT_RESOLVED

Ua @ clarity.js:2 (anonymous) @ clarity.js:2 (anonymous) @ clarity.js:2 (anonymous) @ clarity.js:2 o @ clarity.js:2 Promise.then (async) c @ clarity.js:2 (anonymous) @ clarity.js:2 at @ clarity.js:2 Pa @ clarity.js:2

facing such issue errors in console sometimes after Installing Microsoft Clarity in my project with 204 status code

clr4