Javascript to prevent clickjacking

Question

I have this Javascript snippet in my application to prevent clickjacking:

<script language="javascript" type="text/javascript">
     var style = document.createElement('style');
     style.type = "text/css";
     style.id = "antiClickjack";
     style.innerHTML = "body{display:none !important;}";
     document.head.appendChild(style);

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

Basically, it creates a style element (CSS on the fly) to hide the body of the current page by default. Then, if it doesn't detect clickjacking, it deletes it. So, doing it this way, everyone who doesn't have Javascript can see the page too (although they won't be protected from clickjacking).

It works for every browser except for Internet Explorer, which throws a Unknown runtime error exception. Does someone have a suggestion on how to fix this?

Thanks :-)

I've always loved "unknown runtime error". It's like it's so confused that it can't even tell you what happened. — Pointy, Nov 17 '11 at 15:14
i have found on most occasions "unknown runtime error", will be on the next line, to where the error is line number shows, that why when developing code its good to use multiple lines for each statement, as you do — david, Nov 17 '11 at 15:21
You can see my discussion that contains pretty good frame buster with this example: http://stackoverflow.com/questions/9349628/busting-a-tough-frame-killer — Gavriel Dorino, Feb 22 '12 at 08:56

score 4 · Accepted Answer · edited Feb 22 '12 at 12:57

4

You can't set the content of a <style> element via innerHTML. I think the correct property name is cssText but I'll have to check MSDN.

edit — yup that's it.

Thus your code can do this:

 var style = document.createElement('style');
 style.type = "text/css";
 style.id = "antiClickjack";
 if ('cssText' in style)
   style.cssText = "body{display:none !important;}";
 else
   style.innerHTML = "body{display:none !important;}";

edited Feb 22 '12 at 12:57

Brian Mains

50,520
35
148
257

answered Nov 17 '11 at 15:12

Pointy

405,095
59
585
614

Thanks for the answers guys, I tried both of your suggestions but I'm still getting a "unknown runtime error" error. I guess the problem must be somewhere else.. – federico-t Nov 17 '11 at 15:29
Sorry, I now recieve a DIFFERENT error (also, only in IE). "document.head" is null or not an object – federico-t Nov 17 '11 at 15:30
1

Try `document.getElementsByTagName('head')[0].appendChild(style);` instead. Also, make sure you do that when there's actually a complete `` element - it might not work so well from *inside* the `` (not sure; never tried it). – Pointy Nov 17 '11 at 15:41
It worked! And from inside the element. So I guess the "document.getElementsByTagName('head')[0].appendChild(style);" was the solution. Thanks! – federico-t Nov 17 '11 at 15:46

score 0 · Answer 2 · answered Jul 13 '16 at 12:18

In the document HEAD element, add the following:

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

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

Javascript to prevent clickjacking

2 Answers2

Linked