点击劫持 · 前端笔记

[TOC] # 概念点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过`iframe`嵌套的方式嵌入自己的网页中，并将`iframe`设置为透明，在页面中透出一个按钮诱导用户点击。 ![](https://box.kancloud.cn/f82856a933445418b737e2fef1b60a4a_812x424.png) 对于这种攻击方式，推荐防御的方法有两种。 ## X-FRAME-OPTIONS `X-FRAME-OPTIONS`是一个 HTTP 响应头，在现代浏览器有一个很好的支持。这个 HTTP 响应头就是为了防御用`iframe`嵌套的点击劫持攻击。该响应头有三个值可选，分别是 * `DENY`，表示页面不允许通过`iframe`的方式展示 * `SAMEORIGIN`，表示页面可以在相同域名下通过`iframe`的方式展示 * `ALLOW-FROM`，表示页面可以在指定来源的`iframe`中展示 Nginx配置 ~~~ add_header X-Frame-Options SAMEORIGIN ~~~ ## JS 防御对于某些远古浏览器来说，并不能支持上面的这种方式，那我们只有通过 JS 的方式来防御点击劫持了。 ~~~ <head> <style id="click-jack"> html { display: none !important; } </style> </head> <body> <script> if (self == top) { var style = document.getElementById('click-jack') document.body.removeChild(style) } else { top.location = self.location } </script> </body> ~~~ 以上代码的作用就是当通过`iframe`的方式加载页面时，攻击者的网页直接不显示所有内容了。 # 参考资料 [前端面试之道 - 掘进小册](https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdc721851882516c33430a2)