一、引言

大家好！今天我们探讨Clickjacking。Clickjacking，也叫“点击劫持”，是一种常见的网络攻击方式，它通过隐藏或伪装恶意页面来诱骗用户进行点击，从而执行攻击者预期的操作。那么，Clickjacking究竟是什么，它又是如何运作的呢？我们一起来探讨一下吧。

二、Clickjacking基础知识

Clickjacking（点击劫持）是一种网页攻击技术，攻击者通过隐藏或伪装目标网页，引导用户在不知情的情况下执行某些操作。为了理解Clickjacking，我们首先需要掌握一些iframe标签的基础知识。

1. iframe标签的基础知识

iframe（内联框架）标签是HTML中的一个标签，用于在一个网页中嵌入另一个网页。通过iframe，可以在父页面中显示一个独立的子页面，子页面可以来自同一个域名，也可以来自不同的域名。基本的iframe标签结构如下：

<iframe src="https://www.example.com" width="600" height="400"></iframe>

src：要嵌入的网页URL。
width：iframe的宽度。
height：iframe的高度。

1.1 iframe标签的属性

src：指定要嵌入的网页的URL。
width：指定iframe的宽度。
height：指定iframe的高度。
sandbox：启用额外的安全机制，限制iframe内容的行为。
allow：指定特定功能允许iframe使用，如全屏、地理位置等。

示例：

<iframe src="https://www.example.com" width="600" height="400" sandbox="allow-scripts"></iframe>

2. Clickjacking的工作原理

iframe标签在嵌入第三方内容、广告展示、视频播放等方面非常常见。Clickjacking攻击利用的正是iframe标签的这种嵌入功能，通过使用iframe标签将目标网页嵌入到攻击者控制的网页中，并对目标网页进行伪装或隐藏，诱导用户点击。

2.1 Clickjacking的基本结构

<!DOCTYPE html>
<html>
<head>
    <title>Clickjacking Example</title>
    <style>
        iframe {
            opacity: 0; /* 隐藏目标页面 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .cover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10; /* 使覆盖层在iframe之上 */
        }
    </style>
</head>
<body>
    <div class="cover">点击这里领取优惠！</div>
    <iframe src="https://target-website.com"></iframe>
</body>
</html>

在这个示例中，攻击者使用iframe标签将目标网站嵌入到自己的页面中，并通过设置opacity: 0来隐藏目标页面。同时，cover类的div层覆盖在iframe上方，并显示诱导信息。当用户点击“点击这里领取优惠！”时，实际点击的是嵌入的目标网站中的隐藏按钮。

3. Clickjacking的其他实现方式

除了使用iframe标签，Clickjacking还可以通过其他方式实现，例如：

3.1 使用透明图像

攻击者可以在页面上放置一个透明的图像层，覆盖在按钮或链接之上，引导用户点击。

<!DOCTYPE html>
<html>
<head>
    <title>Clickjacking with Image</title>
    <style>
        .hidden-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0; /* 透明图像 */
        }
    </style>
</head>
<body>
    <img src="https://target-website.com/button.png" class="hidden-image" />
    <button onclick="alert('Clicked!')">Click Me!</button>
</body>
</html>

3.2 使用CSS伪类

通过CSS伪类（如:before和:after），攻击者可以创建一个覆盖层，引导用户点击。

<!DOCTYPE html>
<html>
<head>
    <title>Clickjacking with CSS</title>
    <style>
        .button::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: 10;
        }
    </style>
</head>
<body>
    <button class="button" onclick="alert('Clicked!')">Click Me!</button>
</body>
</html>

三、Clickjacking与CSRF的区别

虽然Clickjacking和CSRF（跨站请求伪造）都是常见的基于诱导用户操作的网页攻击方式，但它们有本质上的区别。

1. Clickjacking

Clickjacking通过隐藏或伪装网页，引导用户在不知情的情况下执行操作。攻击目标主要是用户的点击行为，常见的攻击场景包括：

引导用户点击隐藏的按钮或链接，执行恶意操作。
通过嵌入iframe标签，将用户引导到恶意网站。

2. CSRF

CSRF通过诱导用户执行未经授权的操作，通常是利用用户已登录的身份，发送恶意请求到受信任的网站。攻击目标主要是用户的会话状态，常见的攻击场景包括：

在用户不知情的情况下，利用其身份发送恶意请求。
通过恶意链接或表单，伪造用户的请求。

2.1 CSRF的示例

<!-- 攻击者的网站 -->
<!DOCTYPE html>
<html>
<head>
    <title>CSRF Attack</title>
</head>
<body>
    <img src="https://target-website.com/transfer?amount=1000&to=attacker" alt="CSRF Attack" />
</body>
</html>

在这个示例中，攻击者利用用户已登录的身份，伪造转账请求，窃取用户资金。

3. Clickjacking与CSRF的对比

攻击方式：
- Clickjacking通过隐藏或伪装网页元素，引导用户点击。
- CSRF通过诱导用户发送恶意请求，利用用户的会话状态。
防御措施：
- Clickjacking可以通过X-Frame-Options和CSP防御。
- CSRF可以通过CSRF令牌和Referer检查防御。

四、Clickjacking防御措施详解

1. 使用X-Frame-Options HTTP Header

X-Frame-Options是最常见的防御Clickjacking的方法，能够防止网页被嵌入到iframe中。

DENY：完全禁止页面嵌入到任何iframe中。
SAMEORIGIN：允许页面嵌入到同源的iframe中。
ALLOW-FROM uri：允许页面嵌入到指定的iframe中。

示例：

X-Frame-Options: DENY

2. 使用Content Security Policy (CSP)

CSP能够指定哪些资源可以加载，从而防止Clickjacking。

示例：

Content-Security-Policy: frame-ancestors 'self'

这个策略指示浏览器只允许同源的页面嵌入，防止外部页面进行Clickjacking。

3. 使用JavaScript进行防御

可以通过JavaScript检测页面是否被嵌入到iframe中，如果是，则跳转到安全页面。

示例：

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

4. 使用CSS防御

通过设置pointer-events: none可以阻止用户点击隐藏的iframe。

示例：

iframe {
    pointer-events: none;
}

结语

希望这篇文章能帮你更好地理解Clickjacking的工作原理、各种实现方式及其防御措施。如果你有任何问题或建议，欢迎在评论区讨论！

每日漏洞系列（十二）：点击劫持（Clickjacking）攻击