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 相关文章推荐
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
模拟select的代码
Oct 19 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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
php中处理模拟rewrite 效果
2006/12/09 PHP
使用adodb lite解决问题
2006/12/31 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
javascript常用对话框小集
2013/09/13 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python下MySQLdb用法实例分析
2015/06/08 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
政协会议宣传标语
2014/10/09 职场文书
初三化学教学反思
2016/02/22 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server
Python中的socket网络模块介绍
2022/07/23 Python