javascript - 防止点击劫持的Javascript

Question

我的应用程序中有这个 Javascript 片段来防止点击劫持：

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

基本上，它默认创建一个样式元素（动态 CSS）来隐藏当前页面的正文。然后，如果它没有检测到点击劫持，则会将其删除。所以，这样做，每个没有 Javascript 的人也可以看到该页面（尽管他们不会受到点击劫持的保护）。

它适用于除 Internet Explorer 之外的所有浏览器，它会引发未知运行时错误异常。有人对如何解决这个问题有建议吗？

谢谢 ：-）

Answer 1

您<style>不能通过innerHTML. 我认为正确的属性名称是cssText，但我必须检查 MSDN。

编辑——是的，就是这样。

因此，您的代码可以做到这一点：

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

Answer 2

在文档 HEAD 元素中，添加以下内容：

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