防止點擊劫持的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之外的所有瀏覽器，后者會引發Unknown runtime error異常。 有人對如何解決此問題有建議嗎？

謝謝 ：-）

Answer 1

您不能通過innerHTML設置<style>元素的內容。 我認為正確的屬性名稱是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>