<h2>X-Frame-Options</h2>

<p>The problem is that your site's .htaccess file prevents unicorn.com from viewing all-your-base.com in an iframe because the <code>X-Frame-Options</code> header has not been configured for allowing this. </p>

<p><a href="https://craftcms.com/guides/securing-craft#set-security-headers-for-the-front-end-site" rel="nofollow noreferrer">Securing Craft</a> mentions that you have to add headers for: </p>

<ul>
<li>Strict-Transport-Security </li>
<li>X-Frame-Options X-XSS-Protection</li>
<li>X-Content-Type-Options</li>
<li>Content-Security-Policy</li>
<li>Public-Key-Pins</li>
</ul>

<p>So although the following <code>.htaccess</code>-code doesn't add all of these headers, they together make the "refused to connect" go away, by allowing the <code>frame-ancestor</code> to be unicorn.com even when previewing content on all-your-base.com in an iframe (which is how the preview works).</p>

<pre class="lang-bsh prettyprint-override"><code># Unset X-Frame-Options that has been previously set possibly by Craft 
Header unset X-Frame-Options

# Allow unicorn.com to request itself in iframes (for live preview)
Header always set X-Frame-Options "ALLOW-FROM https://unicorn.com/"

# Allow unicorn.com to request all-your-base.com in iframes (for live preview)
Header set Content-Security-Policy "frame-ancestors unicorn.com"
</code></pre>

<p>These headers are simply strings that are attached to - you guessed it - the header of the HTML-page that is transmitted from the server. </p>

<p>It's up to the  browser how to interpret them. <code>Content-Security-Policy</code> is for instance <a href="https://caniuse.com/#search=csp" rel="nofollow noreferrer">not supported on IE11</a>. </p>

<p>In this case, <code>Content-Security-Policy</code> is used by Chrome and <code>X-Frame-Options</code> is <a href="https://caniuse.com/#search=X-Frame-Options" rel="nofollow noreferrer">used by IE11</a> and others. </p>

<h2>Access-Control-Allow-Origin</h2>

<p>You might also get error messages in the console because Access-Control-Allow-Origin is missing. Here is an example of setting that header. Note that it doesn't support multiple domains, so here I serve the local development address together with the production site address using the <code>SetEnvIf</code> command: </p>

<pre class="lang-bsh prettyprint-override"><code>SetEnvIf Origin "http(s)?://?(unicorn.com|unicorn.local)$" AccessControlAllowOrigin=$0
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header merge Vary Origin
Header set Access-Control-Allow-Credentials "true"
</code></pre>

CC BY-SA 4.0
2019-08-13T11:41:39.520Z
2019-08-15T11:11:44.647Z
2019-08-15T11:11:44.647Z
nitech
<p>I run a multi-site setup with four sites; one on unicorn.com and one on all-your-base.com. </p>

<p>The way Craft CMS licensing works, you can run multiple sites on different domains on the same license/install, but you have to edit all the sites from just one domain - unicorn.com in this case. </p>

<p>When I click "live preview", from unicorn.com all I see is a sad pixelated face and a message saying "all-your-base.com refused to connect."</p>

<p><a href="https://i.sstatic.net/EzEnu.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/EzEnu.png" alt="sad face saying &quot;refused to connect&quot;"></a></p>

<p>Console says: "Refused to display '<a href="https://all-your-base.com/" rel="nofollow noreferrer">https://all-your-base.com/</a>...' in a frame because it set X-Frame-Options to 'sameorigin'</p>

<p><a href="https://i.sstatic.net/etPCd.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/etPCd.png" alt="Refused to display &#39;https://domain.com/...&#39; in a frame because it set X-Frame-Options to &#39;sameorigin&#39;"></a></p>

<control-panel><htaccess><live-preview>
Refused to display/connect when previewing entry on multi-site setup
# Refused to display/connect when previewing entry on multi-site setup

(Asked by: username_0 on 2019-08-13)

I run a multi-site setup with four sites; one on unicorn.com and one on all-your-base.com.

The way Craft CMS licensing works, you can run multiple sites on different domains on the same license/install, but you have to edit all the sites from just one domain - unicorn.com in this case.

When I click "live preview", from unicorn.com all I see is a sad pixelated face and a message saying "all-your-base.com refused to connect."

[![sad face saying ](https://i.sstatic.net/EzEnu.png)](https://i.sstatic.net/EzEnu.png)

Console says: "Refused to display '<https://all-your-base.com/>...' in a frame because it set X-Frame-Options to 'sameorigin'

[![Refused to display 'https://domain.com/...' in a frame because it set X-Frame-Options to 'sameorigin'](https://i.sstatic.net/etPCd.png)](https://i.sstatic.net/etPCd.png)

**Tags:** control-panel, htaccess, live-preview


---

## 1 answers

### Answer by username_0 on 2019-08-13. Score: 2 | Accepted answer

X-Frame-Options
The problem is that your site's .htaccess file prevents unicorn.com from viewing all-your-base.com in an iframe because the X-Frame-Options header has not been configured for allowing this. 
Securing Craft mentions that you have to add headers for: 

Strict-Transport-Security 
X-Frame-Options X-XSS-Protection
X-Content-Type-Options
Content-Security-Policy
Public-Key-Pins

So although the following .htaccess-code doesn't add all of these headers, they together make the "refused to connect" go away, by allowing the frame-ancestor to be unicorn.com even when previewing content on all-your-base.com in an iframe (which is how the preview works).
# Unset X-Frame-Options that has been previously set possibly by Craft 
Header unset X-Frame-Options

# Allow unicorn.com to request itself in iframes (for live preview)
Header always set X-Frame-Options "ALLOW-FROM https://unicorn.com/"

# Allow unicorn.com to request all-your-base.com in iframes (for live preview)
Header set Content-Security-Policy "frame-ancestors unicorn.com"

These headers are simply strings that are attached to - you guessed it - the header of the HTML-page that is transmitted from the server. 
It's up to the  browser how to interpret them. Content-Security-Policy is for instance not supported on IE11. 
In this case, Content-Security-Policy is used by Chrome and X-Frame-Options is used by IE11 and others. 
Access-Control-Allow-Origin
You might also get error messages in the console because Access-Control-Allow-Origin is missing. Here is an example of setting that header. Note that it doesn't support multiple domains, so here I serve the local development address together with the production site address using the SetEnvIf command: 
SetEnvIf Origin "http(s)?://?(unicorn.com|unicorn.local)$" AccessControlAllowOrigin=$0
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header merge Vary Origin
Header set Access-Control-Allow-Credentials "true"


---

