JS防止网页被嵌入iframe框架的方法分析

1. 基础方法

如果我们想要阻止我们的网页被嵌入在 iframe 框架中，可以在代码中加入以下的 JS 代码：

if (self != top) {
   top.location.href = self.location.href;
}

这段代码的作用是检测当前页面是否在顶级窗口中打开，如果不是顶级窗口，那么将会通过修改顶级窗口的 URL 来让页面跳出框架。

1. 利用 X-Frame-Options

X-Frame-Options 是一个 HTTP 响应头，它能够让网站所有者来决定自己的网站是否能够被内嵌到 iframe 框架中。它定义了 3 种不同的取值：

• DENY：禁止所有其他网站内嵌。
• SAMEORIGIN：只允许同源网站内嵌。
• ALLOW-FROM：指定允许内嵌的网站地址。

如果我们想要在代码中使用 X-Frame-Options，可以在服务器响应时加入以下内容：

response.headers['X-Frame-Options'] = 'DENY';

或者：

response.headers['X-Frame-Options'] = 'SAMEORIGIN';

如果我们想要允许特定的网站内嵌，可以这样：

response.headers['X-Frame-Options'] = 'ALLOW-FROM http://example.com';

以上 2 种方法都可以有效地防止网页被嵌入在 iframe 框架中。

示例说明1：在 iframe 框架中的网站被危害

有些攻击者会通过嵌入 iframe 框架中的网站来进行攻击，例如盗取用户的凭据信息或窃取用户的敏感数据。如果我们在自己的网站中通过 JS 代码或者 X-Frame-Options 来防范这种攻击，就能够让我们的用户更加安全。

示例说明2：在 iframe 框架中的网站受到更容易触发的 Clickjacking 攻击

Clickjacking 是一种通过伪装一个在页面下方透明的 iframe 框架，让用户在不知情的情况下在 iframe 中进行某些危险的操作。虽然 Clickjacking 攻击的危害性相对较低，但是利用 X-Frame-Options 或者 JS 代码来保护网站不容易受到 Clickjacking 攻击也是必不可少的。