Website iframe not loading (x-frame-options)

Problem:

The website does not load when trying to view session recordings or heatmaps.

Cause:

The problem is the x-frame-options setting on the tracked site. That setting specifically disallows your website to be displayed inside an iframe on external domains.

This is the error: "site could not be displayed in a frame because it set 'X-Frame-Options' to 'sameorigin'. "

Solutions:

Allow the userTrack dashboard to load your website inside an iframe.

Solution A: Set the correct HTTP headers

Best way is to add the correct headers to the tracked site. Those headers will allow only the userTrack dashboard domain to load your website in an iframe.

Apache:

If you are using Apache, add this to .htaccess:

<IfModule mod_headers.c>
Header always set X-Frame-Options "SAMEORIGIN"
Header set Content-Security-Policy "frame-ancestors 'self' analytics.your-usertrack.net;"
</IfModule>

If the headers are not being set make sure AllowOverride is set to All in httpd.conf

Remember to replace (in the Headers above) analytics.your-usertrack.net with the actual domain where you host userTrack.

Nginx:

If you are using Nginx, add this line to your site's configuration:

add_header Content-Security-Policy "default-src 'self'; frame-ancestors 'self' analytics.your-usertrack.net;";

Remember to replace (in the Headers above) analytics.your-usertrack.net with the actual domain where you host userTrack.

Still not working?

If the iframe still can't be loaded, try adding this CORP header too:

# Apache
Header always set Cross-Origin-Resource-Policy "cross-origin"
# Nginx
add_header Cross-Origin-Resource-Policy "cross-origin"

Solution B: Disable the browser security policy (Not recommended)

Another, easier solution is to use a browser extension to display this security policy:

Useful resources:

You can learn more about X-Frame-Options and Content-Security-Policy here: