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

Question

网站之前被恶意网站嵌入框架，而且网页的标题和内容都跟网站完全不相干，明显就是为了欺骗用户浏览，对于这个问题我们是可以通过 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;
}

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