# Website iframe not loading (x-frame-options)

### **Problem:**

{% hint style="danger" %}
The website does not load when trying to view session recordings or heatmaps.
{% endhint %}

### **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 "*&#x52;efused to display '<https://xxx.com>' in a frame because it set 'X-Frame-Options' to 'sameorigin".

### **Solutions:**

{% hint style="success" %}
Allow the UXWizz dashboard domain to load your website inside an iframe.
{% endhint %}

**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:**

```markup
<IfModule mod_headers.c>
  Header always set X-Frame-Options "SAMEORIGIN"
  Header set Content-Security-Policy "frame-ancestors 'self' your-uxwizz.com;"
</IfModule>
```

{% hint style="info" %}
If the headers are not being set make sure **AllowOverride** is set to **All** in **httpd.conf**
{% endhint %}

{% hint style="warning" %}
Remember to replace (in the Headers above) ***your-uxwizz.com*** with the actual domain where you host your dashboard.
{% endhint %}

### Nginx:

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

```bash
add_header Content-Security-Policy "default-src 'self'; frame-ancestors 'self' your-uxwizz.com;";
```

{% hint style="warning" %}
Remember to replace (in the Headers above) ***your-uxwizz.com*** with the actual domain where you host your dashboard.
{% endhint %}

### IIS (.NET):

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

```xml
<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';"/>
```

{% hint style="warning" %}
Remember to replace **<https://www.your-uxwizz.com>** with the actual domain where you host your dashboard.
{% endhint %}

### Still not working?

If the iframe still can't be loaded, try adding this [CORP header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_\(CORP\)) too:

```bash
# 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/>