css - Javascript to prevent clickjacking - Stack Overflow

admin管理员组

文章数量:1405393

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 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 :-)

• javascript
• css
• internet-explorer
• runtime-error
• clickjacking

Share Improve this question Follow edited Nov 17, 2011 at 15:55 federicot asked Nov 17, 2011 at 15:00 federicotfedericot 12.4k1919 gold badges6969 silver badges111111 bronze badges 3

• 2 I've always loved "unknown runtime error". It's like it's so confused that it can't even tell you what happened. – Pointy Commented Nov 17, 2011 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 Commented Nov 17, 2011 at 15:21
• You can see my discussion that contains pretty good frame buster with this example: stackoverflow./questions/9349628/… – Gavriel Dorino Commented Feb 22, 2012 at 8:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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;}";

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>

本文标签： cssJavascript to prevent clickjackingStack Overflow