Categories
blog

Resolving X-Frame-Options DENY issues – Ghost, WordPress and More

TL;DR if you are having issues with X-Frame-Options DENY appearing in your logs, you’ll probably want to change the setting to X-Frame-Options SAMEORIGIN for the site or your overall web server settings.

I recently rebuilt and relaunched my company website using the website building platform Ghost.

Aside: it’s been a long time since I’ve posted here! Most of the content on this website is a distilling of my ‘just google it’ history. More recently there’s been a permanent job and a freelance focus on live streaming both of which are a bit more kept behind the curtain.

One quirk needing dealt with is that like many modern services, Ghost focusses on what it’s good at (blog management) and for my needs, requires a secure reverse proxy in front of it. Until Caddy takes over the world, Nginx is the option of choice. Ghost knows how to interact with Nginx and automatically sets up a LetsEncrypt certificate when you’re getting going. Everything works pretty smoothly.

However, the home page dashboard view is a “View Site” interface, for previewing updates etc. My Nginx configuration blocks this sort of website-in-website previewing to avoid bad actors hijacking hosted image on any client websites. This is what it looks like:

Screenshot of Ghost admin interface with "refused to connect" message for homepage preview

Chrome’s inspector reveals the problem: “Refused to display ‘https://infinity21.net/’ in a frame because it set ‘X-Frame-Options’ to ‘deny’.”

Chrome console message

The solution is quite simple. LetEncrypt creates a file called something like /etc/nginx/snippets/ssl-params.conf (other versions maybe ssl-dhparams.conf) containing a line refering to X-Frame-Options.


# add_header X-Frame-Options DENY;
add_header X-Frame-Options SAMEORIGIN;

Please note this will override your global Nginx settings for this server. If you have multiple domains on your server, you may wish instead to override this global setting on your Nginx website’s / location block instead. Just make sure it’s after the ssl-params.conf call.

Nginx configuration block to solve X-Frame-Options DENY configuration

Sorted.

Screenshot of Ghost admin interface with fixed homepage preview

PS. remember to check your logs!