ghost: iframes: Embedding External Pages Inside Your Blog.
In this quick guide we show how to embed an iframe inside a page, and how to set your config.json inside your nginx proxy.
Iframes let you insert an external page inside your website. That is easy in most environments but can be a little tricky in a docker-nginx-ghost blog setup. There are actually quite a few moving parts to this - but it is simple.
- For a secure https ghost blog it needs the nginx (or Traefix) proxy in front of it handling the SSL layer of the http transport. Inside the nginx config.json of your docker-compose directory is where we will add a "proxy_set_header"
- If you are using docker nginx-proxy from here in the config.json you want to modify your "server" configuration as:
"server":
{
"proxy_set_header" : "Content-Security-Policy: frame-ancestors https://sitea.com https://site.b",
... rest of your config
}
- Content-Security-Policy supercedes the older "
X-Frame-Options
" as it allows you to specify multiple iframe external page domains.
As you write your article in a new section you will want to hit your plus and select <html> insert:
Here is some example iframe html injection code:
<iframe id="extFrame" src="https://www.thinkmelt.com" width="800" height="800"></iframe>
www.thinkmelt.com is the alternate site of this one. Once it is all done it will embed like so: