How to avoid clickjacking in HTML and Javascript

Question

I tried to put the following code in HTML but it is not helping me avoid me the clickjacking:

meta http-equiv="X-Frame-Options" content="DENY"

I wrote the following code in Javascipt:

if (self == top) {
            document.documentElement.style.display = 'block';
        } else {
            top.location.replace(document.location);
        }

This solves my problem, but I don't want to redirect it a new URL, but instead, I want to show the clickjacking URL with an empty iFrame.

This is the HTML code I am using to test clickjacking:

    iframe { 
    width: 800px; 
    height: 1000px; 
    position: absolute; 
    top: 0; left: 0; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
    }  

<iframe src="URL">

I want to display only an empty frame when I run the above code.

I take it you can not set HTTP headers? – Anders Apr 12 '17 at 13:05 — Anders, Apr 12 '17 at 13:05

score 2 · Answer 1 · answered Apr 12 '17 at 08:50

2

Hide the whole page:

<style id="antiClickjack"> 
  body {
    display: none;
  }
</style>

And remove that style element if this window is the lop level window:

<script type="text/javascript">
   if (self === top) {
       var antiClickjack = document.getElementById("antiClickjack");
       antiClickjack.parentNode.removeChild(antiClickjack);
   }
</script>

answered Apr 12 '17 at 08:50

Sjoerd

28,707
12
74
102

Not working. It is getting redirected to the URL. I don't want to redirect. I want it to display an empty frame. – Shreya Srivastava Apr 12 '17 at 09:04

score 2 · Accepted Answer · edited Apr 12 '17 at 13:04

Your code

meta http-equiv="X-Frame-Options" content="DENY"

has no effect. From MDN:

Note: Setting the meta tag is useless! For instance, <meta http-equiv="X-Frame-Options" content="deny"> has no effect. Do not use it! Only by setting through the HTTP header like the examples below, X-Frame-Options will work.

The recommended way is to use frame-ancestors within a Content Security Policy, however this can't be used in a meta tag for this purpose. That is, in order to reliably defeat clickjacking you need control of HTTP headers, not just the HTML.

JavaScript solutions can often be bypassed and are not recommended generally. If you must, OWASP has this one which works because it is engineered on the basis that everything is hidden until the script runs to verify it is not framed.

It could be modified to:

<script type="text/javascript">
   if (self === top) {
       var antiClickjack = document.getElementById("antiClickjack");
       antiClickjack.parentNode.removeChild(antiClickjack);
   } 
</script>

if you do not want any redirect.

score 2 · Answer 3 · answered Jun 27 '17 at 17:31

Content Security Policy is now the preferred method to prevent your site from getting put in an iframe of another site. In fact, other older methods like the JavaScript method shown here will no longer work on most browsers. You can read more about CSP here: https://developers.google.com/web/fundamentals/security/csp/#policy_applies_to_a_wide_variety_of_resources

A sample policy header could look something like this to allow your site to be framed on your own domain and www.friend_site.com:

Content-Security-Policy: frame-ancestors 'self' www.friend_site.com

Or you could use none if you want to not allow your site in any iframes:

Content-Security-Policy: frame-ancestors 'none'

How to avoid clickjacking in HTML and Javascript

3 Answers3

Linked