Block iFrames | How to Stop Your Website From Being iFramed

While there are some use cases in which you’d want to allow another website to embed portions of your own site within theirs, it’s generally not a good idea. The most common method used to embed website content is through iFrames and in this post we’re going to show you how to block iFrames used to display your site within someone else’s.

Embedding YouTube videos like the one in this post is an example of a legitimate use of iFraming. In the case of YouTube videos, you’re allowing YouTube to serve up the video content instead of putting that load on your own servers. In fact most sites that provide an embed code for content such as Flickr and Twitter do so through the use of iFrames.

Why Block iFrames Anyway?

Chances are you’re reading this because you already know. If so, skip down to the code snippets now. Otherwise, read on…

Prevent Clickjacking

Clickjacking is when a user’s clicks are hijacked and pointed elsewhere. In most cases, clickjacking is accomplished by iFraming trusted content and overlaying transparent elements over them.

A malicious entity could iFrame a portion of your site and then use HTML to overlay their own elements such as malicious hyperlinks. A user thinks they’re clicking on a link in your site, but unknowingly is clicking an invisible link layered over it.

Clickjacking can be used to harvest login credentials by rendering a fake login box on top of the real one or send users to sites or downloads they wouldn’t normally click^[ref].

Protect Your Intellectual Property

Perhaps you’re a blogger. You spend hours researching and writing your articles and posts. One day, you find that your entire blog is iFramed in some foreign website – that site’s visitors are reading your content without visiting your site. And if your site is monetized, you’re not getting any credit for the traffic in that iFrame.

This is exactly what happened to a client of mine. They were losing revenue and site traffic. The site which was iFraming their content was based in Romania so options were limited.

In cases like this, you’d want to ensure your site cannot be iFramed.

iFrame Blocking Methods

You can protect your site from being iFramed by incorporating the correct HTTP response headers on your website.

There are two different response headers that are used to block iFrame loading – X-Frame-Options and Content-Security-Policy. You can usually get by with just using the X-Frame-Options header because it’s supported in more browsers whereas Content-Security-Policy has some options which aren’t supported in any Microsoft browser. For this reason I’ll only be showing the X-Frame-Options header and it’s parameters.

The X-Frame-Options header has 3 settings: DENY, SAMEORIGIN, and ALLOW-FROM.

The DENY setting is the most restrictive option which blocks all iFrame requests. The SAMEORIGIN allows a site to iFrame its own content. The ALLOW-FROM setting allows you to set trusted locations that can iFrame your page – but you must be careful because the ALLOW-FROM setting isn’t recognized by all browsers and could leave you vulnerable.

The SAMEORIGIN setting is the most commonly used of the three. In the following code snippets, we’ll show you the snippets for all versions in the first section. The remaining sections are only showing the SAMEORIGIN option, but you can swap that out with one of the other ones as the format is the same.

Block iFrames using .htaccess

If you’re using shared hosting for your website, you probably don’t have access to the Apache configuration. Luckily, you can usually set the X-Frame-Options header by adding one of the following lines to your .htaccess file.

Deny iFraming of your website to everyone:

header set x-frame-options DENY

Deny iFraming of your website to everyone except those with the same origin:

header set x-frame-options SAMEORIGIN

Deny iFraming of your website to everyone except the domains you specify – change domain.com to the domain you wish to allow access to:

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

Block iFrames on Apache

If you aren’t using shared hosting and have access to your Apache configuration files, you can add the following line in your httpd.conf file:

header always set x-frame-options "SAMEORIGIN"

Blocking iFrames on Nginx

If you’re using an Nginx server for you website you’ll need to add the following to your server block config:

header always set x-frame-options "SAMEORIGIN"

Blocking iFrames on IIS

For those of you using Windows servers to deliver your website, you can add the following to your web.config file:

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

On IIS, you can also perform the configuration through the IIS Manager GUI by following these steps^[ref]:

1. Open Internet Information Services (IIS) Manager.
2. In the Connections pane on the left side, expand the Sites folder and select the site that you want to protect.
3. Double-click the HTTP Response Headers icon in the feature list in the middle.
4. In the Actions pane on the right side, click Add.
5. In the dialog box that appears, type X-Frame-Options in the Name field and type SAMEORIGIN in the Value field.
6. Click OK to save your changes.

Final Thoughts

Using iFrames for embedding content can be a useful web tool.

Unfortunately, it can be used for more nefarious purposes. Adding the SAMEORIGIN x-frame-options header to your website will prevent iFrame embedding & help protect your users. In addition, most hosts don’t have this header set by default so it’s up to you to configure it and help lock down your site.

FAQs