9

I am having trouble adding X-Frame-Options header to a simple HTML file.

Is there any way to do it using JavaScript?

Xander
  • 35,525
  • 27
  • 113
  • 141
sam
  • 93
  • 1
  • 1
  • 3
  • 8
    you have to add it "above" the file; it's a server setting, not a per-file setting. well, you can config it per-file using htaccess or whatever, but nothing about the html file itself can alter such behavior. – dandavis Aug 08 '17 at 19:06
  • how do you set it in server, is it something that needs to be set in IIS? – sam Aug 08 '17 at 20:35
  • 2
    Can you give some more context why you even want to do this? Clickjacking protection only makes sense for online resources – Kos Aug 09 '17 at 10:01
  • In IIS you can use a `web.config` file in the directory to add the header to page responses. You can also do it via the IIS administration application on the server. Here's some documentation to help, it's got some good examples: https://docs.microsoft.com/en-us/iis/configuration/system.webserver/httpprotocol/customheaders/ – Jasper Aug 09 '17 at 15:58

3 Answers3

30

X-Frame-Options is an HTTP header. As such, it's not part of HTML and can't be set inside an HTML document.

One reason why it's an HTTP header only is that clients should be able to decide if the document is allowed to be embedded in a frame before parsing the HTML code.

Hence, you can't achieve that by editing the file but you need to modify the server's HTTP response. Typically, this is done in the settings provided by the web server software or with a server-side language.

E.g., a setting in Apache could look like this:

Header always append X-Frame-Options DENY

Or, in PHP you could set the header like that:

<?php header('X-Frame-Options: DENY'); ?>

Note that there is a more modern CSP equivalent frame-ancestors. But while some CSP policies can be set as <meta> tags, that's not possible here. This does not work:

<head>
  <!-- This does *not* work! -->
  <meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none'">
</head>

Also have a look at the Clickjacking Defense Cheat Sheet for an overview of clickjacking defense measures beyond setting the XFO header.

thaJeztah
  • 103
  • 4
Arminius
  • 43,922
  • 13
  • 140
  • 136
  • I'm not sure it's correct that you must use a server side programming language to dynamically generate the response with the desired headers. That's certainly one and a simple way, but [here](https://geekflare.com/http-header-implementation/#X-Frame-Options) is an example (that I have not tested) of some web server settings that my also add the header, without writing any executable code. – jpmc26 Aug 08 '17 at 22:15
  • 3
    @jpmc26 well the web server is written in a programming language isn't it? – OrangeDog Aug 08 '17 at 22:18
  • @OrangeDog It is, but its code is not typically written by the people installing and using it if you want to be pedantic. If you don't want to be pedantic, "server-side language/code" is virtually always understood to mean that you're writing code specifically for the site or page being served; it does not include the web server responsible for static content or for invoking the runtime. I doubt I'm stating anything you didn't know, though. – jpmc26 Aug 08 '17 at 22:23
  • 3
    @jpmc26 A little nitpicky. :) Hope you find it a little more precise now. – Arminius Aug 08 '17 at 22:31
  • 1
    Maybe a little bit, but the OP [expressed](https://security.stackexchange.com/questions/167081/how-to-add-x-frame-options-header-to-a-simple-html-file/167083?noredirect=1#comment318594_167082) that they "don't have a [sic] server side code," which indicates they may not understand that it's also possible via configuration. Thanks for adding! – jpmc26 Aug 08 '17 at 22:35
  • 2
    I took the liberty to add a comment clarifying that the meta tag does not work, in case people just see the code and don't read the text. Obviously, feel free to roll back if you dislike it. – Anders Jan 14 '19 at 15:36
  • 1
    @Anders Love your edit summary :-) – Arminius Jan 14 '19 at 16:17
18

The X-Frame-Options header is added on the server-side, not the client. This is because the header is used to control how the browser should render the page.

Whatever server is hosting your file would have to add this header.

Dan Landberg
  • 3,312
  • 12
  • 17
  • I dont have a server side code since it is just an html file, and since the clickjacking issue is getting detected through qual scan, I need to get rid of it, not sure how. Could you give me some idea on how this header can be added thought the server? – sam Aug 08 '17 at 20:38
  • That would depend on which server you're using: IIS, nginx, apache, etc. It should be simple enough to google the server you're using + add http header to the response. – Dan Landberg Aug 08 '17 at 20:40
-1

Since you mention in the comments that IIS is your web server, yes, there is a way to set this on the web server itself.

Several of the other answers mention adding it to web.config, which is a fine option if this is an ASP.NET application, but there is another way that works for any web application being served from IIS, regardless of technology.

If you open the Internet Information Services (IIS) Manager, and expand the node under Sites in the navigation pane and highlight your site, under the IIS features group in the Features View pane, there is a feature named HTTP Response Headers. If you open this node, in the Actions pane on the right, you see an action to add a header. Just add the header with the X-Frame-Options name and whatever your desired value is, and it'll be added by IIS to every response served from that site.

Xander
  • 35,525
  • 27
  • 113
  • 141