Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-08-13T11:41:39.520Z
Answers.LastActivityDate: 2019-08-15T11:11:44.647Z
Answers.LastEditDate: 2019-08-15T11:11:44.647Z
Answers.UserDisplayName: nitech
Body: <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>
  
Tags: <control-panel><htaccess><live-preview>
Title: Refused to display/connect when previewing entry on multi-site setup
ThreadText: # 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 "refused to connect"](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](https://craftcms.com/guides/securing-craft#set-security-headers-for-the-front-end-site) 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).
  
  ```bsh
  # 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](https://caniuse.com/#search=csp).
  
  In this case, `Content-Security-Policy` is used by Chrome and `X-Frame-Options` is [used by IE11](https://caniuse.com/#search=X-Frame-Options) 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:
  
  ```bsh
  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"
  
  ```
  
  
  ---
  
  