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.

The error message often is "site could not be displayed in a frame because it set 'X-Frame-Options' to 'sameorigin'. " or "Refused to display 'https://xxx.com' in a frame because it set 'X-Frame-Options' to 'sameorigin".

Solutions:

Allow the UXWizz dashboard domain 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 UXWizz 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' your-uxwizz.com;"
</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) your-uxwizz.com with the actual domain where you host your dashboard.

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' your-uxwizz.com;";

Remember to replace (in the Headers above) your-uxwizz.com with the actual domain where you host your dashboard.

IIS (.NET):

If you are using IIS, add this in web.config or in IIS:

<add name="Content-Security-Policy" value="upgrade-insecure-requests; base-uri 'self'; frame-ancestors 'self' https://www.your-uxwizz.com; form-action 'self'; object-src 'none';"/>

Remember to replace https://www.your-uxwizz.com with the actual domain where you host your dashboard.

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 disable this security policy:

• Google Chrome: https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe

• Firefox: https://addons.mozilla.org/en-US/firefox/addon/ignore-x-frame-options-header/

Useful resources:

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

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors

• https://content-security-policy.com/examples/