JavaScript 的点击劫持（Clickjacking）

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

✨ 前言

点击劫持是一种恶意攻击，攻击者会在用户不知情的情况下诱使用户点击他们想要点击的元素。通常情况下，攻击者会将一个透明的 iframe 覆盖在合法的网页上，并将其放置在用户可能点击的位置。当用户点击该位置时，他们实际上是在点击 iframe 中的恶意链接。

点击劫持是一种非常严重的网络安全威胁，它可能导致以下后果：

窃取用户的个人信息：攻击者可以利用点击劫持来窃取用户的登录凭据、信用卡信息和其他敏感信息。
感染用户的设备：攻击者可以利用点击劫持来诱使用户下载恶意软件或访问恶意网站，从而感染用户的设备。
造成经济损失：攻击者可以利用点击劫持来进行欺诈活动，例如将用户重定向到虚假广告页面或钓鱼网站，从而造成用户的经济损失。

防御点击劫持至关重要。本章将介绍点击劫持的原理、常见场景、危害以及防御措施。我们将学习以下内容：

点击劫持的原理：我们将了解攻击者如何利用技术手段实现点击劫持。
点击劫持的常见场景：我们将了解点击劫持在哪些情况下会被使用。
点击劫持的危害：我们将了解点击劫持可能造成的后果。
防御点击劫持的措施：我们将学习如何防御点击劫持，包括使用 HTTP 头、JavaScript 代码和其他安全措施。

本章还将提供一些代码示例，帮助您理解如何防御点击劫持。

✨ 正文

简介

点击劫持是一种恶意攻击，攻击者会在用户不知情的情况下诱使用户点击他们想要点击的元素。通常情况下，攻击者会将一个透明的 iframe 覆盖在合法的网页上，并将其放置在用户可能点击的位置。当用户点击该位置时，他们实际上是在点击 iframe 中的恶意链接。

点击劫持的常见场景:

在广告中插入恶意链接
在钓鱼网站上伪造登录按钮
在社交媒体上发布虚假信息

点击劫持的危害:

窃取用户的个人信息
感染用户的设备
造成经济损失

如何防御点击劫持

以下是一些防御点击劫持的措施:

使用 X-Frame-Options HTTP 头: 该头可以指示浏览器如何处理 iframe。
使用 Content-Security-Policy HTTP 头: 该头可以限制 iframe 的来源。
使用 JavaScript 来检查 iframe: 可以使用 JavaScript 来检查 iframe 的来源和内容。

代码示例

以下是一些防御点击劫持的代码示例:

使用 X-Frame-Options HTTP 头:

// 允许 iframe 在同一来源中显示
response.setHeader('X-Frame-Options', 'sameorigin');

// 阻止 iframe 显示
response.setHeader('X-Frame-Options', 'deny');

使用 Content-Security-Policy HTTP 头:

// 允许 iframe 仅从同一来源加载
response.setHeader('Content-Security-Policy', "frame-ancestors 'self'");

// 允许 iframe 从特定来源加载
response.setHeader('Content-Security-Policy', "frame-ancestors 'self' https://www.example.com");

使用 JavaScript 来检查 iframe:

// 检查 iframe 的来源
function checkIframeSource(iframe) {
  var src = iframe.getAttribute('src');
  if (!src.startsWith('https://www.example.com')) {
    // 阻止 iframe 显示
    iframe.style.display = 'none';
  }
}

// 检查所有 iframe
var iframes = document.getElementsByTagName('iframe');
for (var i = 0; i < iframes.length; i++) {
  checkIframeSource(iframes[i]);
}