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.

ghost: iframes: Embedding External Pages Inside Your Blog.
Photo by Leif Christoph Gottwald / Unsplash

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:

Linux Rocks Every Day