How do I fix CORS issue for Heatmap and Session Recording

When a heatmap or session is being recorded, Matomo tries to save a webpage’s CSS (Cascading Style Sheets define the design of your website) along with the content of a webpage to ensure the page is still displayed correctly even if the CSS or the URLs to your CSS change.

For this feature to work, Matomo tries to read the CSS. If it can’t read the CSS from the DOM, then it tries to fetch the content using an extra HTTP request. This will work in most cases. However, in some cases, for example when you load your CSS from a CDN (Content Delivery Network), then extra steps below are needed.

Similarly when your heatmap or session recording displays correctly after taking the screenshot or recording, but after a while it doesn’t look correct any more.

Follow these steps to make Heatmaps & Session recordings work again

  • Recommended: To prevent Matomo from making an extra HTTP request to retrieve the CSS, set a crossorigin attribute on your link tag to anonymous. This will make it a lot faster for Matomo to get the CSS content. Example: 
<link rel="stylesheet" href="{PATH_TO_YOUR_CSS_FILE}" crossorigin="anonymous">
  • Ensure a header is set Access-Control-Allow-Origin: {YOUR_DOMAIN} when your webpages are being requested. This will allow Matomo to load the CSS using an HTTP request. Example: If https://www.example.com is your Matomo tracking domain, then you need to set the header as Access-Control-Allow-Origin: https://www.example.com. To change this header, ask your system administrator or your hosting provider for help if needed. The header needs to be only set for CSS files.
Previous FAQ: How do I apply custom stylesheets when a heatmap is generated or a session recording replayed?