What is X-Frame-Options

x-frame-options (XFO), is a HTTP response header, also referred to as a HTTP security header, which has been around since 2008. In 2013 it was officially published as RFC 7034, but is not an internet standard. This header tells your browser how to behave when handling your site’s content. The main reason for its inception was to provide clickjacking protection by not allowing rendering of a page in a frame. This can include rendering of a page in a <frame>, <iframe>, or <object>. Iframes are used to embed and isolate third-party content into a website. Examples of things that use iframes might include social media sharing buttons, Google Maps, video players, audio players, 3rd party advertising, and even some OAuth implementations.

The x-frame-options header has three different directives in which you can choose from. These must be sent as an HTTP header, as the browser will ignore if found in a META tag. It is also important to note that certain directives are only supported in certain browsers. See browser support further below in this post. While it is not required to send this response header across your entire site, it is best practice to at least enable it on pages that need it.

1. DENY Directive

The DENY directive completely disables the loading of the page in a frame, regardless of what site is trying. Below is what the header request will look like if this is enabled.

x-frame-options: DENY

This might be a great way to lock down your site, but it will also break a lot of functionality. The following two directives below are more common use cases for a typical website.

Examples of Sites Currently Using the DENY directive

Facebook
GitHub

2. SAMEORIGIN Directive

The SAMEORIGIN directive allows the page to be loaded in a frame on the same origin as the page itself. Below is what the header request will look like if this is enabled.

x-frame-options: SAMEORIGIN

A good example of this working is the YouTube video we have above in this post. It is using the following iframe to load the video.

<iframe width="625" height="469" src="https://www.youtube.com/embed/3mk0RySeNsU?feature=oembed" frameborder="0" allowfullscreen=""></iframe>

We have the SAMEORIGIN header enabled on this blog, and this allows the YouTube video to still work. With this directive, you can still use the page in a frame as long as the site including it in a frame is the same as the one serving the page. This is probably the most commonly used directive out of the three. It is a good balance between functionality and security.

It is also important to note that if a browser or plugin can not reliably determine whether the origin of the content and the frame have the same origin, this must be treated as DENY.

Examples of Sites Currently Using the SAMEORIGIN directive

Twitter
Amazon
eBay
LinkedIn

3. ALLOW-FROM uri Directive

The ALLOW-FROM uri directive allows the page to only be loaded in a frame on the specified origin and or domain. Below is what the header request will look like if this is enabled.

x-frame-options: ALLOW-FROM https://domain.com/

This allows you to lock down your site to only trusted origins. But be careful with this directive. If you apply it and the browser does not support it, then you will have NO clickjacking defense in place.

Enabling X-Frame-Options Header

The x-frame-options header is easy to implement and only requires a slight web server configuration change. You might also want to check to make sure you don’t already have the header enabled. Here are a couple easy ways to quickly check.

Open up the network tab in Chrome DevTools and if your site is using a security header it will show up on the Headers tab.
Another quick way to check your security headers is to quickly scan your site with a free tool, securityheaders.io. This gives you a grade based on all of your security headers and you can see what you might be missing.

Enable on Nginx

To enable the x-frame-options header on Nginx simply add it to your server block config.

add_header x-frame-options "SAMEORIGIN" always;

Enable on Apache

To enable on Apache simply add it to your httpd.conf file (Apache config file).

header always set x-frame-options "SAMEORIGIN"

Enable on IIS

To enable on IIS simply add it to your site’s Web.config file.

<system.webServer>
        ...
    
        <httpProtocol>
            <customHeaders>
                <add name="X-Frame-Options" value="SAMEORIGIN" />
            </customHeaders>
        </httpProtocol>
    
        ...
    </system.webServer>

Source

More information can be found on this website.

Updated on: 18/07/2022