防止网页被嵌入框架的代码

最近,国内开始流行另一种流氓行为:使用框架(Frame),将你的网页嵌入它的网页中。

比如,有一家网站号称自己是”口碑聚合门户”,提供全国各个网上论坛的精华内容。但是,其实它就是用框架抓取他人的网页,然后在上面加上自己的广告和站标,这同盗版书商有何不同?!

不明内情的访问者,只看到地址栏是该门户的URL,不知道真正内容部分的网页,其实来自另一个网站。

为什么我反对这种做法?

  1)它故意屏蔽了被嵌入网页的网址,侵犯了原作者的著作权,以及访问者的知情权;

2)大量业者使用的是不可见框架,使得框架网页与被嵌入的网页视觉上完全相同,欺骗性极高;

3)不良业者在被嵌入网页的上方或周围附加广告(甚至病毒和木马),不仅破坏原作者的设计意图和形象,而且属于侵权利用他人资源的谋利行为;

4)如果访问者在框架内部,从一个网页点击到另一个网页,浏览器的地址栏是不变的,这是很差的用户体验,并且访问者会将这种体验归咎于原网页的作者。

如果确有必要,将他人的网页嵌入自己的框架,那么应该同时满足以下三个条件:

  A. 在框架网页的醒目位置,清楚地说明该网页使用了框架技术,并明确列出原网页的URL网址。

B. 在框架网页的醒目位置,向访问者提供”移除框架”的功能。

C. 不得附加任何广告或恶意代码。

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

当然,流氓业者不会理睬你的正当要求。所以,我写了一段很简单的javascript代码,大家只要将它放入网页源码的头部,那些流氓就没有办法使用你的网页了。

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

好了,升级版代码完成。除了本地域名以外,其他域名一律无法将你的网页嵌入框架。我的Blog现在就使用这段代码。

原文:http://www.ruanyifeng.com/blog/2010/08/anti-frameset_javascript_codes_continued.html

本文:防止网页被嵌入框架的代码

Leave a Reply