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 相关文章推荐
jQuery 常见学习网站与参考书
Nov 09 Javascript
javascript操作css属性
Dec 30 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
vue项目中极验验证的使用代码示例
Dec 03 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
php中namespace及use用法分析
2016/12/06 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
js post提交调用方法
2014/02/12 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Python的形参和实参使用方式
2019/12/24 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
python跨文件使用全局变量的实现
2020/11/17 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
公司庆典活动邀请函
2014/01/09 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书