What are you trying to accomplish
Making the preview url work in all environments
Code stack you are integrating Builder with
In my case: a LAMP (PHP) website with Vue.js used in CDN mode in PHP pages
When I tried to integrate Builder.io content in our existing website built using PHP pages, I decided to use Builder.io’s Vue.js integration because I was also using Vue.js inside my PHP pages to handle in-page changes in a modern way. If you’re interested in this integration concept (btw, applicable to a lot of existing PHP websites), see this post containing the info you need to use Builder.io’s sdk-vue in CDN mode (aka. for all kinds of existing SSR web technology like PHP, ASP, …).
When I got the sdk-vue working in CDN mode (i.e. directly as a browser-compatible script module in a standard html page), I tried the next step to preview and edit my Builder.io content in my existing PHP pages using the Visual Editor. But in this situation, I encountered problems as the temporary preview url I tried to use refused to work.
My preview url was e.g. http://builder-demo.mydomain.com. But I immediately got the error in the Visual Editor that my page preview could not be loaded. However, e.g. a Builder.io section showed up perfectly fine on my PHP page opening the page in Chrome.
To solve these issues, you need to know how the Visual Editor works: your webpage is embedded in the editor as an iframe. The Visual Editor “talks” to the Builder.io content in your page using the window postMessage method. This works fine as long as you take care of two important details:
- no mixed content
- no X-Frame-Option header SAMEORIGIN set
No mixed content: the Visual Editor uses https and you need to make sure your own page is served from localhost or - if it’s served from another host - it must be using https too. When your local webhost uses http, the Visual Editor will not work (will not embed your webpage) as you’re trying to embed http content inside an https page: your browser blocks this, you can’t mix content using different http protocols.
no X-Frame-Options header SAMEORIGIN set: your webserver’s headers must allow the Visual Editor to embed your webpage: for embedding to work, you must be sure the X-Frame-Options header is not present in your HTTP headers. E.g. for an Apache webserver, you can unset this header in your virtual host configuration:
<VirtualHost *:443>
...
Header unset X-Frame-Options
...
</VirtualHost>
If the X-Frame-Options header is set to DENY or SAMEORIGIN, embedding will not work inside the Visual Editor because your browser blocks the embedded content. Check the response headers using the developer tools of your browser.
Be careful however: by removing this header, your webpage can now be embedded in an iframe in any other webpage, i.e. is sensitive to clickjacking. For internal webpages, this is less of an issue, but when your preview url is a public webpage, you must setup a Content-Security-Policy header to limit embedding of your webpage to only the Visual Editor url!
Btw, using preview url’s of localhost dev servers used by modern frameworks like Vue.js, React, … are not affected by these issues: localhost content served over http can be embedded inside the Visual Editor. The issues above occur as soon as you use a preview url different from localhost like an ip address or a dns name. You’ll need to use a ssl certificate (e.g. Let’s Encrypt) to make your content embeddable.
If you follow these steps, the Visual Editor will work with any preview url.