从 0 到 1 讲解如何从前后端有效防范点击劫持攻击
点击此处查看最新的网赚项目教程
点击劫持攻击的定义
点击劫持攻击就是—欺骗当前网站的用户在不知情的情况下在目标网站点击。例如，用户在当前网站看到一条中奖信息，当用户点击中奖信息按钮时，实际是在点击购物网站的购买按钮。通常此类攻击是通过隐藏目标网站的界面或者对界面进行重新排列，从而使用户并不知道是在点击目标网站，因此点击劫持攻击又称为UI覆盖攻击。
由于目标网站的伪装欺骗，用户会在不知不觉中进行转账、购物、社交网站点赞等操作。
点击劫持攻击的类型
根据点击劫持的目的，可以分为以下几种类型：
1.点赞劫持：这类点击劫持的目的是获取用户的点击并重定向到Facebook或其他社交网站的页面去点赞。
2.Cookie劫持：这类攻击会引导用户进行拖拽操作，并使用户存储cookie在浏览器中。这样攻击者可以获取到用户cookie从而在目标网站上假冒用户进行操作。
3.文件劫持：攻击者可以访问用户的本地文件并进行读写操作。
4.光标劫持：这类攻击在用户不知情的情况下改变光标的实际位置，因此用户以为在执行A操作，实际在执行B操作。
5.密码管理器劫持：这类攻击在自动填充密码操作欺骗密码管理器获取用户密码。
以上是点击劫持具体分类中的几种。点击劫持可以分为很多种类，但是所有的点击劫持的原理都是相同的：通过视觉欺骗用户从而获取用户的点击或拖拽等操作。
点击劫持攻击的过程
为了更好的理解点击劫持攻击，让我们看看在实际攻击产生过程中具体发生了什么。这将帮助我们更好的理解攻击者的行为并作出相应的防御措施。
运行本文的示例，需要Node.js运行环境，但是点击劫持攻击的原理和防御与具体的编程语言和框架并无必要关系。
1.搭建环境
首先，下载本文的示例程序，命令如下：
git clone https://github.com/auth0-blog/clickjacking-sample-app.git
其次，下载完成后打开clickjacking-sample-app文件夹，安装项目所需要的依赖，命令如下：
npm install
再次，启动程序，命令如下：
npm start
最后，打开浏览器，导航栏中输入 :3000，网页效果如下：
上图是电影网站中的某个具体电影介绍，在当前网页可以观看电影和购买DVD。实际项目中需要进行session认证才能观看或者购买，简便起见，本项目并未实现实际的认证过程。我们可以通过点击页面底部的valid session，进行模拟session认证，获取到模拟的用户seesion后，这句话将消失。
2.发起点击劫持攻击
电影网站运行后，我们将要对其进行点击劫持。这时还需要运行另一个网站—攻击网站，它将抓取用户的点击，并在用户不知不觉的情况下重定向到电影网站。下一步让我们启动攻击网站，在终端中输入以下命令：
node attacker-server.js
然后，在浏览器中打开新的窗口，在地址栏中输入:4000。你将看到如下页面：
上图的网页为获奖消息通知，点击“Accept the prize!”按钮即可领奖。这看起来完全和电影网站无关，然而如果点击领取奖励按钮将会在电影网站购买DVD。点击领奖按钮前，我们打开Chrome浏览器的开发者工具栏的Network来分析发送的网络请求。如下图所示：
我们可以看到上图是发送到:3000/purchase 也就是电影网站的POST请求，领奖网站和电影网站之间有什么关系呢？想想文章开始我们提到的点击劫持攻击的原理：电击劫持攻击就是通过视觉欺骗获取用户的点击，从当前网站引诱用户到攻击网站。
点击劫持攻击的分析
为了更好的理解点击劫持攻击，我们看一下攻击网站的源码，其中views/index.ejs的代码如下：
<html lang=en>
<body>
<div id="attacker_website">
<h1>You Are The Winner!!!</h1>
<h2>You won an awesome tropics holiday!</h2>
<img alt="Tropical Holiday" src="images/tropical-holiday.jpg">
<h2>Accept it by clicking the button below.</h2>
<button type="submit">Accept the prize!</button>
</div>
<iframe id="vulnerable_website" src="http://localhost:3000">
</iframe>
</body>
</html>
其中ejs模版中主要有以下两个元素：1.可见部分：id="attacker_website"的div元素2.不可见部分：id="vulnerable_website"的iframe元素，在攻击者网站上我们并不能看到iframe的内容这是因为CSS规则定义了元素的位置及可见性，如下所示：
<html lang=en>
<head>
<style>
#vulnerable_website {
position:relative;
opacity:0.0;
width:800px;
height:900px;
top:75px;
left: -95px;
z-index:2;
padding-left:80px;
}
#attacker_website {
position:absolute;
z-index:1;
}
#attacker_website button {
margin-left:100px;
}
</style>
</head>
</html>
其中，id="vulnerable_website"的iframe元素的opacity为0.0，这代表iframe的内容完全透明。而且iframe的位置和id="attacker_website"的div元素的位置重叠。我们把透明度opacity设为0.3，然后重启攻击者网站，效果如下：
我们可以看到“Accept the prize!”按钮和“Buy DVD”按钮是重叠的。其中z-index的作用是，将iframe元素置于攻击者网站的上层，因此当用户点击“Accept the prize!”时，其实是点击“Buy DVD”，所以点击劫持攻击叫做UI覆盖攻击。
点击劫持攻击与CSRF攻击的不同
现在可能觉得点击劫持和CSRF攻击有些类似，都是攻击者通过当前网站向目标网站发送请求。
他们的最大不同点在于攻击者是否构造请求，CSRF是攻击者直接构造HTTP请求向目标网站发送，而点击劫持是直接访问目标网站。
———END———
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： qs62318888
主题授权提示：请在后台主题设置-主题授权-激活主题的正版授权，授权购买：RiTheme官网
