前端安全问题之点击劫持
漏洞定义
点击劫持也可以称 UI 覆盖攻击。是一种视觉上的欺骗手段，攻击者通过使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，通过调整iframe页面的位置，可以使得伪造的页面恰好和iframe里受害页面里一些功能重合（按钮），以达到窃取用户信息或者劫持用户操作的目的。如下示例（图片来自网络，如有侵权，请留言删除）：
用户点击按钮网页a.html click to win 实际是点击另一个网页b.html 的confirm按钮，从而产生点击劫持。
漏洞原理
那如何如能做到漏洞攻击呢，其关键可能是两点：
使用iframe 嵌套目标网页: 使用iframe 嵌套要攻击的目标网页，如上个例子的b.html,并且通过position 等属性使得其z-index 高于Click to win按钮；当点击Click to win按钮时，实际是点击a.html中的内容。
隐藏目标网页：点击劫持的另一个核心是当我们点击某个网页时，是完全不能发现是点击的另一个网页。实现的方式是使用css 相关属性，可以用下面的属性来实现透明：
- visibility: hidden
- opacity: 0
一个简单的攻击网页如下：
//a.html
<body>
<button class="btn1">Click to win</button>
<iframe src="xxxb.html" width="1300" height="700" style="opacity: 0"/>
</iframe>
</body>
防御方式
对于点击劫持，其防御思路之一就是使得网页不能被iframe 嵌套，可以通过设置X-FRAME-OPTIONS响应头来实现。X-FRAME-OPTIONS的属性如下：
（1）DENY：不能被嵌入到任何iframe或frame中。
（2）SAMEORIGIN：页面只能被本站页面嵌入到iframe或者frame中。
（3）ALLOW-FROM URL：只能被嵌入到指定域名的框架中
比如以koa 框架为例，可以做如下设置：
ctx.set("X-frame-options", "DENY");
在设置之后，页面会出现如下的提示：
另外一种方式判定如果是嵌套，直接进行页面跳转。可以通过top 对象和window对象是否相等来判定。
if( window != top ) {
top.location = window.location ;
}
总结
本文主要介绍了前端安全问题：点击劫持，作为一种UI 劫持，其特点是利用iframe 来嵌套目标网页，并且使iframe 的z-index比其他dom 元素要大的；要防御点击劫持，可以通过设置 `X-FRAME-OPTIONS` 响应头，也可判定页面在iframe 中时进行跳转。