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


Posted in Javascript onSeptember 13, 2016

本文实例讲述了JS防止网页被嵌入iframe框架的方法。分享给大家供大家参考,具体如下:

例如:

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

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

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
js中的this的指向问题详解
Aug 29 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
javascript数组遍历的方法实例分析
Sep 13 #Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 #Javascript
JS简单去除数组中重复项的方法
Sep 13 #Javascript
jQuery包裹节点用法完整示例
Sep 13 #Javascript
jQuery查找节点方法完整实例
Sep 13 #Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 #Javascript
jQuery实现的放大镜效果示例
Sep 13 #Javascript
You might like
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
两个DIV等高的JS的实现代码
2007/12/23 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python 如何对logging日志封装
2020/12/02 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
师德师风演讲稿
2014/05/05 职场文书
伏羲庙导游词
2015/02/09 职场文书
民事答辩状范本
2015/05/21 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
Python pyecharts绘制条形图详解
2022/04/02 Python
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL
一文搞懂Java中的注解和反射
2022/06/21 Java/Android