Knowledge base

How to fix CORS issue for heatmaps and session recordings

When a heatmap or session sample is recorded, Extellio saves the webpage's CSS to display the page correctly, even if the CSS or URLs to the CSS change. 

If Extellio can't read the CSS from the DOM, it tries to fetch the content via an HTTP request. While this works most of the time, in certain situations, like when you load your CSS from a CDN, you need to take extra steps to ensure it works. 

• Recommended: To avoid Extellio having to make an additonal HTTP request to fetch the CSS, set the crossorigin attribute on the link tag to anonymous. 

<link crossorigin="anonymous" rel="stylesheet" href="{path_to_your_css_file}">

• Set the header for CSS files to Access-Control-Allow-Origin:{YOUR_DOMAIN} when your pages are being requested. This allows Extellio to load the CSS using an HTTP request. The header only needs to be set for CSS files. 

header("Access-Control-Allow-Origin: http://www.example.com");