防止网页被嵌入 iframe

1. 前言

iframe 标签能将一个指定的 url 地址的网址展示在页面上。但是它同时造成了一些问题。由于 iframe 标签引用的网站在用户看来就像是当前网站的内容，这就给了一些人可乘之机。

在以前，使用 iframe 标签嵌入他人的网站，然后在页面上加入病毒、广告等内容影响用户，由于 iframe 标签展示的内容与原网站十分相似，会给原网站作者带来负面影响。

2. 分析

在不同的 iframe 中，每个 iframe 都是一个单独的全局作用域，它们的 window 对象是不同的，但是每个全局作用域都有一个 top 属性，这个属性通常是最顶层的 window 对象。

由于在 iframe 中的 window 对象不等于 top 对象，所以我们可以通过比较这两个的值，判断我们的网站是否被别人嵌入到 iframe 中。

3. 解决代码

判断网站是否被嵌入到 iframe 中

if(top !== window) { 
	// 页面将导航到 iframe 中的网站
	top.location.href = window.location.href;
}

上面的代码能阻止任何人嵌套我们的网站到 iframe 标签中，包括我们自己，所以为了我们自己能够嵌套自己的网站，得改进一下代码。

这个问题看似很简单，我们只需要比较一下 hostname 似乎就行了。

if(top.lcoation.hostname !== window.location.hostname) {
	top.location.href = window.location.href;
}

但是上面的代码会报错，错误原因是跨域，浏览器不允许 iframe 中的代码访问 top.location.hostname 属性。由于这个错误是由于在 iframe 中访问 top.location.hostname 导致的，所以我们可以利用这个错误，即捕获这个错误。然后对页面进行跳转。

try {
	top.location.hostname;
} catch(e) {
	top.location.href = window.location.href;
}

上面的代码在 Edge、Firefox 中运行正常，但是在 Chrome 中会有问题，因为在 Chrome 的 iframe 中访问 top.location.hostname 不报错。所以再改进一下代码：

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

现在，除了你的域名的页面能嵌入你的网站，其他的网站都不能嵌入你的网站了。

4. 参考

阮一峰的网络日志 — 防止网站嵌入 iframe