federicot federicot - 1 year ago 129
CSS Question

Javascript to prevent clickjacking

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;}";

if (self === top) {
var antiClickjack = document.getElementById("antiClickjack");
} else {
top.location = self.location;

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

Answer Source

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;}";
   style.innerHTML = "body{display:none !important;}";
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download