點擊劫持 · 前端筆記

[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)