Some years ago, I wrote an article on how to use the frame blocking facility provided in modern web browsers to prevent your website from being placed in a frame by some other site. Since then, browsers have generalized their support for a variety of website security measures and, as a consequence, provided new ways for a site to block attempts to place it in a frame. This article describes both the backward-compatible method as well as the latest officially recommended way.
If you don't do anything special, any other website can create a frame (either using the HTML
<frame> or <iframe> elements) and place your site in it.
They can do this to either place advertisements in the outer frame, and so attempt to make money off
your content, or they can even alter things on your web page (via
JavaScript)
so as to trick your visitors in some way ("clickjacking").
As such, unless you specifically want your page to be framed inside another, most webmasters will probably want to block such attempts.
Note that the methods provided here require that your web server send an HTTP header to your visitor's browser informing it of your intentions. The guide below gives practical instructions on how you can issue such headers for sites that are hosted on an Apache web server (probably the most commonly-used server on the Internet). I also provide instructions for sites whose pages are delivered using PHP (regardless of which web server they use). If your site uses neither of these, you can still adapt the information provided (namely the headers to send) for your particular web server.
For those who are not sure if their website is hosted on an Apache server, get the information from
your web host.
Just ask them. Alternatively, see if the documentation on their website provides that information.
In addition, you must also be allowed to use .htaccess files to override the default
Apache configuration. This is a fairly standard feature provided by most, if not all,
commercial web hosts.
As I said, if in doubt, ask them.
The backward-compatible method described in my previous article is supported by all modern browsers, and even some old browsers as far back as Internet Explorer 8. This requires your web server to issue the following header:
The way to do this for an Apache web server is to add a line to a file called
".htaccess", placed at the topmost directory of your website (the same folder where you place
your home page).
For those not familiar with modifying a ".htaccess" file, you can find detailed steps
on how to do this later in this article. For now, read on. There's more, before we get to the practical
part.
If your web page is delivered via a PHP script, you can also send the header through PHP:
Like all headers, it must be sent before your page content.
The currently-advocated way to block attempts to frame your site is to issue the following header:
You can do this by adding the following ".htaccess" directive:
If your page is sent via a PHP script, you can alternatively do it by calling header():
Although a Content Security Policy (CSP) can theoretically be specified in an HTML meta tag, it is probably useless for the purpose of preventing your page from being framed, since the framing site can easily disable it with JavaScript. For completeness sake, though, the code for it is as follows:
If you insist on using it, the line should be placed in the <head> section of the page. But as I said, it's pointless.
If you want to be sure that as many browsers as possible refuse attempts to frame your site, you can
issue both the X-FRAME-OPTIONS and Content-Security-Policy headers. Place
following block in the .htaccess file.
The PHP equivalent is as follows:
Obviously, if your visitor uses a browser so old as to support neither of these headers, then the directives won't have any effect. But as a webmaster, you can only work with what you have.
For those who found my instructions above too vague, here is a detailed step-by-step guide on how to get your Apache server to issue these headers for your website.
It's not possible for me to give a step-by-step guide for the PHP method, since where you place the calls
to header() in your program depends on your code. If you're not sure, put them at the
very beginning of the file, immediately after the opening "<?php" tag,
and test to see if it works.
Connect to your website with an FTP program. Alternatively, you can also use the web-based file manager facility provided in your web host's control panel (if they provide such a thing). If you don't have either of these, see the tutorial on how to use FileZilla. It shows you how you can obtain and use a free FTP program called FileZilla.
From within your FTP program, go to the folder where you have placed your home page. Look for a file named
".htaccess". And yes, the filename starts with a dot ("."). If the file exists, download it
to your computer.
If you aren't using FileZilla but some other FTP program, and you don't see any ".htaccess" file,
check the software's settings or options page to make sure it is set up to display files that have names
starting with a dot ("."). As far as I know, FileZilla displays all files regardless of how they are named, so
if you use this program, you can ignore this paragraph.
If the file really does not exist, don't worry. It often does not. Just go to the next step.
Start up a plain text editor. On a Windows system, you can do this by typing "notepad" into your start menu and clicking the "Notepad" entry that appears. On Mac OS X, start up TextEdit. Do not use a word processor like Microsoft Word or LibreOffice.
If you have successfully downloaded a ".htaccess" file earlier, open that file in the editor. You can
do this in Notepad by clicking "File" on the menu bar, and "Open..." in the drop-down menu that appears. Then
select the file in question and click the "Open" button.
If there wasn't any ".htaccess" file on your site, just skip to the next step.
Scroll to the blank line at the bottom of the file. (This applies to those who have an existing ".htaccess"
file. Obviously, if you have a blank file, you are already at a blank line at the bottom of the file.)
Copy and paste the following two lines into the file.
Hit the ENTER key (or the RETURN key on a Mac) to make sure the file ends on a blank line.
Save the file. To do this in Notepad, click "File" from the menu, followed by "Save" in the drop down menu
that appears. If you started with an empty file (that is, you did not have an existing ".htaccess"
that you were modifying), a "Save As" dialog box will appear. Type ".htaccess" (including
the quotation marks) into the "File name" field. You have to include the opening and closing quotation marks around
the name because if you don't, Notepad will modify the filename to ".htaccess.txt" behind your back.
Start up your FTP program again, and use it to upload your newly-modified (or newly-created) .htaccess file,
overwriting the existing one (if any) in the topmost folder of your website.
Since sending the headers blocks your site from being placed in a frame, the simplest way to test is to create a page that frames another on your site.
One way to do it is to use the following code:
Create a blank web page (using your
usual method of making web
pages, whatever it may be) and insert the above line into the body, replacing
"http://www.example.com/" with a URL (web address) on your site.
There's no need to upload this test page to your site. Just open it in a web browser on your computer. If your directives are correctly specified, a modern web browser will display an error message in the iframe instead of the contents of the included page.
Copyright © 2019-2020 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Prevent Your Website from being Placed in a Frame
