I discovered the X-Frame-Options response header this morning; it can be used to prevent your website being rendered within a <frame>, <iframe> or <object>. There are different options to either deny access to all websites, allow from the same origin only, and to allow from a specific origin.
Documentation at Mozilla
I won’t document how it’s used here, because it’s already done here at Mozilla, which covers how it works and how to configure the header with Apache, nginx, IIS and HAProxy.
What I am going to look at is how the browser responds to the blocked content in various browsers.
Browser response – Firefox
Firefox loads about:blank into the frame instead of rendering anything, so the frame/object will quite simply be blank. There is no error message at all, unless you happen to dive into the developer console where you will see the message “Load denied by X-Frame-Options: http://example.com/ does not permit cross-origin framing.”
This is accurate as of the current version of Firefox at the time of writing this post, version 42 on OSX Yosemite. According to the Mozilla documentation page: “At some point, an error message of some kind will be displayed in the frame instead.”
Browser response – Chrome & Safari
A blank page as per Firefox. Again, if you look in the console you’ll see an error message which is currently the same for both browsers: “Refused to display ‘http://www.example.com/’ in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’.”
Versions tested: Chrome 46 & Safari 9 on OSX Yosemite.
Browser response – IE8 to IE11
Internet Explorer is (unusually!) much better than the other browsers, and displays an error message where the framed content would normally have been rendered, with a link to open the framed content into a new window:
“This content cannot be displayed in a frame. To help protect the security of the information you enter into this website, the publisher of this content does not allow it to be displayed in a frame. What you can try: open this content in a new window.”
Browser response – Edge
And Microsoft’s Edge browser works in the same way as the older Internet Explorer versions, but with slightly re-worded content:
“This content can’t be shown in a frame. There is supposed to be some content here, but the publisher doesn’t allow it to be displayed in a frame. This is to help protect the security of any information you might enter into this site. Try this: open this in a new window”
Conclusion
I’ve always busted my sites out of frames using Javascript, but the X-Frame-Options response header gives the ability to prevent your site being framed without the need for scripting. The downside is that the majority of browsers don’t show any sort of obvious error which then makes it easy for the user to click through to the actual website. A shame that in this instance the other browsers aren’t more like Internet Explorer / Edge.
