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

Is there any way to do it using JavaScript?

  • 7
    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 8 '17 at 19:06
  • how do you set it in server, is it something that needs to be set in IIS? – sam Aug 8 '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 9 '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: docs.microsoft.com/en-us/iis/configuration/system.webserver/… – Jasper Aug 9 '17 at 15:58

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.

  • 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 8 '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. – user52472 Aug 8 '17 at 20:40

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:

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

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

  • 3
    @jpmc26 well the web server is written in a programming language isn't it? – OrangeDog Aug 8 '17 at 22:18
  • 3
    @jpmc26 A little nitpicky. :) Hope you find it a little more precise now. – Arminius Aug 8 '17 at 22:31
  • 1
    Maybe a little bit, but the OP expressed 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 8 '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 at 15:36
  • 1
    @Anders Love your edit summary :-) – Arminius Jan 14 at 16:17

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.