使用 X-Frame-Options 防止被iframe 形成跨域iframe 提交掛掉

 Refused to display 'http://www.***.com/login/doLogin.html' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. 

觸發緣由：頁面的返回頭被設置 X-Frame-Options SAMEORIGIN ，只能被同源的iframe 引用。跨域名的iframe 無法顯示了。

解決辦法：
第一步 把 服務器上的 X-Frame-Options header 去掉

第二步 添加 以下代碼到 不想被iframe 的頁面header 裏去。
<style id="antiClickjack">body{display:none !important;}</style>
<script>
if (self === top) {
var antiClickjack = document.getElementById("antiClickjack");
antiClickjack.parentNode.removeChild(antiClickjack);
} else {
top.location = self.location;
}
</script>

其餘：

X-Frame-Options ALLOW-FROM 只支持單一域名 想支持多個二級域名的這個無解

並非全部的瀏覽器都支持  這個header 因此，低版本的瀏覽器仍然會被iframe 成功

參考：http://www.css88.com/archives/5141

Browsers Supporting X-Frame-Options  
http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx

• IE8+
• Opera 10.50+
• Safari 4+
• Chrome 4.1.249.1042+ (Allow-From not yet supported)
• Firefox 3.6.9 (or earlier with NoScript)

 

沒法經過 <meta http-equiv=」X-FRAME-OPTIONS」 content=」SAMEORIGIN」> 這種形式在document 的 header 裏面設置，只能經過 http header 設置。

Browsers ignore the header if speicified in the META tag. So the following META will be ignored:

<meta http-equiv="X-Frame-Options" content="deny">

防止被IFRAME ：把這些代碼放到你的 header 裏

<style id="antiClickjack">body{display:none !important;}</style>
<script>
if (self === top) {
var antiClickjack = document.getElementById("antiClickjack");
antiClickjack.parentNode.removeChild(antiClickjack);
} else {
top.location = self.location;
}
</script>
參考這個帖子
https://www.codemagi.com/blog/post/194

 

關於點擊劫持 和 被iframe 的其餘參考：

http://javascript.info/tutorial/clickjacking

http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx

https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

帶中文請求的URL 可能會返回400 須要 encodeURIComponent 處理.尤爲是使用IE 的時候。