Using Live Preview With An Alternate Control Panel Domain

If you access the Craft CMS control panel from its own separate domain or subdomain, you’ll probably want to make sure your web server’s response headers allow live preview to work as expected.

We recommend in Securing Craft that you set security headers to specify what behaviors and policies are expected, and in the case of live preview you’ll want to make sure that the browser allows the control panel and previewed front end to be loaded simultaneously.

When your site’s front end and the Craft control panel use a single domain, you can set the following:

Content-Security-Policy: frame-ancestors 'self'

When you have multiple domains, however, you’ll need to explicitly allow each one—in this example both the control panel domain and the front-end domain:

Content-Security-Policy: frame-ancestors https://control-panel.domain https://front-end.domain

In a multi-site setup, you would need to make sure each domain is listed as an allowable frame ancestor.

While Craft sets Content-Security-Policy or X-Frame-Options for control panel requests, it doesn’t for the front end—including when you’re previewing that front end from the control panel’s live preview. If live preview fails because of browser “Refused to display” errors, you’ll need to adjust or remove those headers from your web server’s configuration.

Applies to Craft CMS 3.