您現在的位置: 365建站網 > 365學習 > JS防止網頁被嵌入iframe框架的方法

JS防止網頁被嵌入iframe框架的方法

文章來源:365jz.com     點擊數:198    更新時間:2021-03-31 20:21   參與評論

本文實例講述了JS防止網頁被嵌入iframe框架的方法。

防止網頁被Frame,方法有很多種;

方法一:常見的比如使用js,判斷頂層窗口跳轉:

js 代碼:

<script type="text/JavaScript">
  if (window!=top) // 判斷當前的window對象是否是top對象
  top.location.href = window.location.href; // 如果不是,將top對象的網址自動導向被嵌入網頁的網址
</script>

這段代碼是有效的。但是,有一個問題:使用后,任何人都無法再把你的網頁嵌入框架了,包括你自己在內。

于是,我今天就在考慮,有沒有一種方法,使得我的網頁只能被嵌入我自己的框架,而不是別人的框架?

表面上看,這個問題很簡單。只要做一個判斷:當前框架和頂層框架的域名是否相同,如果答案是否,就做了一個URL重定向。

if (top.location.hostname != window.location.hostname) {
  top.location.href = window.location.href;
}

但是,出乎意料的是,這樣寫是錯誤的,根本無法運行。你能看出,錯在哪里嗎?

假定 top.location.hostname 是 www.111.com,而 window.location.hostname 是 www.222.com。也就是說,111.com把222.com嵌入了它的網頁中。這時,比較 top.location.hostname != window.location.hostname 會有什么結果?

瀏覽器會提示代碼出錯!

因為它們跨域(cross-domain)了,瀏覽器的安全政策不允許222.com的網頁操作111.com的網頁,反之亦然。IE把這種錯誤叫做"沒有權限"。進一步說,瀏覽器甚至不允許你查看top.location.hostname,跨域情況下,一看到這個對象,就直接報錯。

那么,代碼應該如何修改?

事實上,這提示我們,只要查看top.location.hostname是否報錯就可以了。如果報錯了,表明存在跨域,就對top對象進行URL重導向;如果不報錯,表明不存在跨域(或者未使用框架),就不采取操作。

try{
  top.location.hostname;
}catch(e){
  top.location.href = window.location.href;
}

這樣寫已經正確了,在IE和Firefox中可以正確運行。但是,Chrome瀏覽器會出現錯誤,不知為何,在跨域情況下,Chrome對top.location.hostname不報錯!

沒辦法,只能為了Chrome,再加一段補充代碼。

try{
  top.location.hostname;
  if (top.location.hostname != window.location.hostname) {
    top.location.href =window.location.href;
  }
}catch(e){
  top.location.href = window.location.href;
}

好了,升級版代碼完成。除了本地域名以外,其他域名一律無法將你的網頁嵌入框架。


一般這樣夠用了,但是有一次發現失效了,看了一下人家網站就是頂層窗口中的代碼,發現這段代碼:

js 代碼:

var location = document.location;
// 或者 var location = "";

輕輕松松被破解了,悲劇。

注:此方式破解對IE6,IE7,IE9+、Chrome、firefox無效

方法二:meta 標簽:基本沒什么效果,所以也放棄了:

HTML 代碼:

<meta http-equiv="Windows-Target" contect="_top">

方法三:使用HTTP 響應頭信息中的 X-Frame-Options屬性

使用 X-Frame-Options 有三個可選的值:

  1. DENY:瀏覽器拒絕當前頁面加載任何Frame頁面

  2. SAMEORIGIN:frame頁面的地址只能為同源域名下的頁面

  3. ALLOW-FROM:origin為允許frame加載的頁面地址

絕大部分瀏覽器支持:

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4.1.249.10423.6.9 (1.9.2.9)8.010.54.0

具體的設置方法:

Apache配置:

html 代碼:

Header always append X-Frame-Options SAMEORIGIN

nginx配置:

html 代碼:

add_header X-Frame-Options SAMEORIGIN;

IIS配置:

html 代碼:

<system.webServer>
 ...
 
 <httpProtocol>
 <customHeaders>
 <add name="X-Frame-Options" value="SAMEORIGIN" />
 </customHeaders>
 </httpProtocol>
 
 ...
</system.webServer>

web.config 設置 X-Frame-Options 的方法,不少文章都有介紹過,代碼看似簡單,但一不小心就會出現錯誤,例如代碼塊放錯了地方。這里我提供一個完整的web.config代碼,可以更清楚的看到代碼塊的位置。

代碼如下:

<?XML version="1.0" encoding="UTF-8"?>
<configuration>
<connectionStrings>
  <add name="ApplicationServices" connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnetdb.mdf;User Instance=true" providerName="System.Data.SqlClient" />
</connectionStrings>
<system.web>
<compilation debug="true" targetFramework="4.0" />
<authentication mode="Forms">
  <forms loginUrl="~/Account/Login.aspx" timeout="2880" />
</authentication>
</system.web>
<system.webServer>
<httpProtocol>
  <customHeaders>
    <add name="X-Frame-Options" value="SAMEORIGIN" />
  </customHeaders>
</httpProtocol>
</system.webServer>
</configuration>

說明, <httpProtocol>...</httpProtocol> 整塊代碼一定要放到 <system.webServer>...</system.webServer> 里面,尤其要注意的是, <system.webServer>...</system.webServer> 與 <system.web>...</system.web> 是并列的代碼塊,相互不能被包含。

X-Frame-Options 有三個值:

DENY

表示該頁面不允許在 frame 中展示,即便是在相同域名的頁面中嵌套也不允許。

SAMEORIGIN

表示該頁面可以在相同域名頁面的 frame 中展示。

ALLOW-FROM uri

表示該頁面可以在指定來源的 frame 中展示。uri 是網頁地址,如:http://www.webkaka.com/

web.config 設置 X-Frame-Options 無效的原因

做項目時,有可能遇到 web.config 設置 X-Frame-Options 無效的情況,請確認自己已經重啟了IIS。如果不行,試試下面的代碼:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="default-src: https:; frame-ancestors 'self' X-Frame-Options: SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

代碼解釋,您的 web.config 條目需要在 Content-Security-Policy (內容安全策略)下才能使用之前沒有折舊的編碼。 value ="default-src: https:"內容安全策略下的值對您的網站是唯一的。

重要的內容是 'value =“default-src: https:' 后面的內容,但最重要的是包含在內容安全策略中。

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (198人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 深夜特黄a级毛片免费视频| 天天摸天天碰天天添| 高h猛烈失禁潮喷a片| 97碰碰碰人妻无码视频| 亚洲av日韩综合一区久热| gai视频在线观看| 啦啦啦免费高清在线直播| 8x8xcom拔插拔插华人永久免费| 日本高清在线观看www色| 伊人久久大香线蕉无码| 日本免费一区二区三区最新| 亚洲中字无码av电影在线观看| 亚洲综合图文偷拍| 欧美成人电影| 777亚洲人成视频免费视频| 最新国产aⅴ精品无码| 亚洲日本va中文字幕人妖| 男人和女人做爽爽免费视频| 11孩岁女被a片| 国产成人av电影在线观看第一页| 淫乱小说| http:色情日本com| 2012国语完整版免费观看| 五月丁香六月激情综合色| 被公侵犯玩弄漂亮人妻| 韩国a片大全免费看片| 香港三日本三级少妇三级66| 狠狠躁夜夜躁人人爽天天69| 一炕四女| 暖暖直播日本高清免费中文| 四库影院永久四虎精品国产| http://www.cw71.com