您现在的位置: 365建站网 > 365文章 > JS防止网页被嵌入iframe框架的方法

JS防止网页被嵌入iframe框架的方法

文章来源:365jz.com     点击数:554    更新时间:2021-03-31 20:21   参与评论

本文实例讲述了JS防止网页被嵌入iframe框架的方法。

防止网页被Frame,方法有很多种;

方法一:常见的比如使用js,判断顶层窗口跳转:

js 代码:

</>code

  1. <script type="text/javascript">
  2.   if (window!=top) // 判断当前的window对象是否是top对象
  3.   top.location.href = window.location.href; // 如果不是,将top对象的网址自动导向被嵌入网页的网址
  4. </script>

这段代码是有效的。但是,有一个问题:使用后,任何人都无法再把你的网页嵌入框架了,包括你自己在内。

于是,我今天就在考虑,有没有一种方法,使得我的网页只能被嵌入我自己的框架,而不是别人的框架?

表面上看,这个问题很简单。只要做一个判断:当前框架和顶层框架的域名是否相同,如果答案是否,就做了一个URL重定向。

</>code

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

但是,出乎意料的是,这样写是错误的,根本无法运行。你能看出,错在哪里吗?

假定 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重导向;如果不报错,表明不存在跨域(或者未使用框架),就不采取操作。

</>code

  1. try{
  2.   top.location.hostname;
  3. }catch(e){
  4.   top.location.href = window.location.href;
  5. }

这样写已经正确了,在IE和Firefox中可以正确运行。但是,Chrome浏览器会出现错误,不知为何,在跨域情况下,Chrome对top.location.hostname不报错!

没办法,只能为了Chrome,再加一段补充代码。

</>code

  1. try{
  2.   top.location.hostname;
  3.   if (top.location.hostname != window.location.hostname) {
  4.     top.location.href =window.location.href;
  5.   }
  6. }catch(e){
  7.   top.location.href = window.location.href;
  8. }

好了,升级版代码完成。除了本地域名以外,其他域名一律无法将你的网页嵌入框架。


一般这样够用了,但是有一次发现失效了,看了一下人家网站就是顶层窗口中的代码,发现这段代码:

js 代码:

</>code

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

轻轻松松被破解了,悲剧。

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

方法二:meta 标签:基本没什么效果,所以也放弃了:

html 代码:

</>code

  1. <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 代码:

</>code

  1. Header always append X-Frame-Options SAMEORIGIN

nginx配置:

html 代码:

</>code

  1. add_header X-Frame-Options SAMEORIGIN;

IIS配置:

html 代码:

</>code

  1. <system.webServer>
  2.  ...
  3.  
  4.  <httpProtocol>
  5.  <customHeaders>
  6.  <add name="X-Frame-Options" value="SAMEORIGIN" />
  7.  </customHeaders>
  8.  </httpProtocol>
  9.  
  10.  ...
  11. </system.webServer>

web.config 设置 X-Frame-Options 的方法,不少文章都有介绍过,代码看似简单,但一不小心就会出现错误,例如代码块放错了地方。这里我提供一个完整的web.config代码,可以更清楚的看到代码块的位置。

代码如下:

</>code

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <configuration>
  3. <connectionStrings>
  4.   <add name="ApplicationServices" connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnetdb.mdf;User Instance=true" providerName="System.Data.SqlClient" />
  5. </connectionStrings>
  6. <system.web>
  7. <compilation debug="true" targetFramework="4.0" />
  8. <authentication mode="Forms">
  9.   <forms loginUrl="~/Account/Login.aspx" timeout="2880" />
  10. </authentication>
  11. </system.web>
  12. <system.webServer>
  13. <httpProtocol>
  14.   <customHeaders>
  15.     <add name="X-Frame-Options" value="SAMEORIGIN" />
  16.   </customHeaders>
  17. </httpProtocol>
  18. </system.webServer>
  19. </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。如果不行,试试下面的代码:

</>code

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

代码解释,您的 web.config 条目需要在 Content-Security-Policy (内容安全策略)下才能使用之前没有折旧的编码。 value ="default-src: https:"内容安全策略下的值对您的网站是唯一的。

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

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (554人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号