使用 JavaScript 防止网页被嵌入框架 - 文章教程

使用 JavaScript 防止网页被嵌入框架

发布于 2019-12-27 字数 3609 浏览 970 评论 0

网站之前被恶意网站嵌入框架,而且网页的标题和内容都跟网站完全不相干,明显就是为了欺骗用户浏览,对于这个问题我们是可以通过 JavaScript 脚本测底解决。

国内似乎这个现象很普遍,载入被人的网页,然后放上自己的广告和站标,这和盗版书商有何不同?

不明内情的访问者,只看到地址栏是该网站的 URL,不知道真正内容部分的网页,其实来自另一个网站,严重损害了源站的流量和用户体验。

我为什么反对这种做法?

可能框架给我们带来了很多的好处,目前网站的广告基本都是采用框架载入,但是在正常的网页里面,我是极力反对这种做法的。

  • 它故意屏蔽了被嵌入网页的网址,侵犯了原作者的著作权,以及访问者的知情权;
  • 大量业者使用的是不可见框架,使得框架网页与被嵌入的网页视觉上完全相同,欺骗性极高;
  • 不良业者在被嵌入网页的上方或周围附加广告(甚至病毒和木马),不仅破坏原作者的设计意图和形象,而且属于侵权利用他人资源的谋利行为;
  • 如果访问者在框架内部,从一个网页点击到另一个网页,浏览器的地址栏是不变的,这是很差的用户体验,并且访问者会将这种体验归咎于原网页的作者。

如何合理的使用框架?

难道我们就不能友好的使用框架么?也不是的,这的看情况:

  • 在框架网页的醒目位置,清楚地说明该网页使用了框架技术,并明确列出原网页的 URL 网址,很多素材源码网站的示例就使用这种方式。
  • 在框架网页的醒目位置,向访问者提供”移除框架”的功能。
  • 不得附加任何广告或恶意代码。

如果你经常使用 Google 的图片搜索,你就会知道,Google 就是这样做的。

解决方法

光是谴责是不够的,我们得有所行动来杜绝这种恶意的嵌入框架,下面是使用 JavaScript 防止网页被嵌入框架的代码,附有详细的代码解释和使用说明。

// 判断当前的window对象是否是top对象
if (window!=top)
    // 如果不是,将top对象的网址自动导向被嵌入网页的网址
    top.location.href = window.location.href;

这段代码是有效的。但是有一个问题使用后,任何人都无法再把你的网页嵌入框架了,包括你自己在内,表面上看,这个问题很简单。只要再做一个判断:当前框架和顶层框架的域名是否相同,如果是否,就做了一个 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;
}

好了这就是最终完成的代码。除了本地域名以外,其他域名一律无法将你的网页嵌入框架。本站现在就使用这段代码,话说有些搜索引擎的网页快照也会自动跳转到真实的网页。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0