What is Cross-Origin Resource Sharing (CORS)? Examples in Analytics

Cross-origin resource sharing

CORS is a security mechanism allowing controlled cross-domain requests, essential for loading analytics scripts and sending event data.

What is CORS?

• Same-origin policy

  A security model that restricts web pages from making requests to a different domain than the one that served the web page. CORS relaxes this policy under controlled conditions.

• Access-control-allow-origin

  The primary HTTP response header used in CORS. It defines which origins are permitted to access the resource.

  • Wildcard (*):

    Allows any domain to access the resource. Useful for public APIs and global analytics endpoints.

  • Specific domains:

    Restricts access to specified domains, e.g., Access-Control-Allow-Origin: https://example.com, enhancing security.

Why CORS Matters in Analytics

• Loading tracking scripts

  Analytics libraries like GA4 or PlainSignal are hosted on external domains. CORS ensures these scripts can be fetched and executed successfully.

• Sending beacon and measurement requests

  When users interact, event data is sent to analytics servers via cross-origin HTTP requests. Proper CORS setup is required to avoid blocked requests.

Implementing CORS in Analytics Platforms

• Plainsignal (cookie-free analytics)

  Embed PlainSignal with CORS support using the following HTML snippet:

  <link rel="preconnect" href="//eu.plainsignal.com/" crossorigin />
  <script defer data-do="yourwebsitedomain.com" data-id="0GQV1xmtzQQ" data-api="//eu.plainsignal.com" src="//cdn.plainsignal.com/PlainSignal-min.js"></script>
  

  The crossorigin attribute and preconnect hint ensure the browser includes appropriate CORS headers.

  • Server-side headers:

    Ensure the PlainSignal endpoint responds with Access-Control-Allow-Origin: * or your specific domain.

• Google analytics 4 (ga4)

  GA4’s gtag.js script is CORS-enabled by default. Example setup:

  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  </script>
  

  Google’s servers return the necessary CORS headers to allow cross-origin data collection.

  • Custom domains:

    If using a custom domain for GA4, configure your server to forward the appropriate CORS headers similarly to the default endpoints.

Troubleshooting CORS Issues

• Missing access-control-allow-origin header

  Requests are blocked if this header is absent or misconfigured. Verify server responses and adjust the header accordingly.

• Preflight request failures

  Browsers send an OPTIONS request before the actual request. Ensure your server handles OPTIONS and responds with correct headers.

  • Handle options method:

    Configure your server to allow the OPTIONS method and respond with Access-Control-Allow-Methods and Access-Control-Allow-Headers.

Best Practices

• Limit allowed origins

  Restrict Access-Control-Allow-Origin to necessary domains to minimize security risks.

• Use https

  Serve all analytics scripts and endpoints over HTTPS to prevent mixed content issues and ensure secure cross-origin requests.

• Cache preflight responses

  Use the Access-Control-Max-Age header to cache preflight responses, reducing latency for repeated requests.

Related terms