防止点击劫持的Javascript

我的应用程序中有以下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>

var style=document.createElement（'style'）；
style.type=“text/css”；
style.id=“防舔杰克”；
style.innerHTML=“正文{显示：无！重要；}”；
document.head.appendChild（样式）；
如果（自我===顶部）{
var antiClickjack=document.getElementById（“antiClickjack”）；
antiClickjack.parentNode.removeChild（antiClickjack）；
}否则{
top.location=self.location；
}

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

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

---

谢谢：-）

您不能通过

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

---

不能通过

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

---

在“文档头”元素中，添加以下内容：

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

body{display:none！重要；}
如果（自我===顶部）{
var antiClickjack=document.getElementById（“antiClickjack”）；
antiClickjack.parentNode.removeChild（antiClickjack）；
}否则{
top.location=self.location；
}

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

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

body{display:none！重要；}
如果（自我===顶部）{
var antiClickjack=document.getElementById（“antiClickjack”）；
antiClickjack.parentNode.removeChild（antiClickjack）；
}否则{
top.location=self.location；
}

我一直喜欢“未知运行时错误”。这就像它是如此的困惑，以至于它甚至不能告诉你发生了什么。我发现在大多数情况下，“未知运行时错误”，将出现在下一行，错误是行号显示的，这就是为什么在开发代码时，每个语句使用多行是好的，正如你们所做的，你们可以看到我的讨论，其中包含了这个例子中相当好的帧分解器：我一直喜欢“未知运行时错误”。这就像它是如此的困惑，以至于它甚至不能告诉你发生了什么。我发现在大多数情况下，“未知运行时错误”，将出现在下一行，错误是行号显示的，这就是为什么在开发代码时，每个语句使用多行是好的，正如你们所做的，你们可以看到我的讨论，其中包含了非常好的帧分解器，这个例子：谢谢你们的回答，伙计们，我尝试了你们的两个建议，但我仍然得到一个“未知运行时错误”错误。我想问题一定出在别的地方了。对不起，我现在收到了一个不同的错误（同样，仅在IE中）。“document.head”为null或不是objectTry

document.getElementsByTagName（'head'）[0]。appendChild（样式）取而代之。另外，当实际上有一个完整的
元素时，请确保这样做-它可能在
内部工作得不太好（不确定；从未尝试过）。它工作得很好！从元素内部。所以我猜“document.getElementsByTagName（'head'）[0].appendChild（style）；”就是解决方案。谢谢谢谢大家的回答，我尝试了你们的两个建议，但仍然得到一个“未知运行时错误”错误。我想问题一定出在别的地方了。对不起，我现在收到了一个不同的错误（同样，仅在IE中）。“document.head”为null或不是objectTry
document.getElementsByTagName（'head'）[0]。appendChild（样式）取而代之。另外，当实际上有一个完整的
元素时，请确保这样做-它可能在
内部工作得不太好（不确定；从未尝试过）。它工作得很好！从元素内部。所以我猜“document.getElementsByTagName（'head'）[0].appendChild（style）；”就是解决方案。谢谢