點(diǎn)擊劫持(clickjacking)是一種欺騙用戶的攻擊，當(dāng)他們實(shí)際點(diǎn)擊另一件事時，他們認(rèn)為他們正在點(diǎn)擊另一件事。 它的另一個名稱，用戶界面 (UI) 修正，更好地描述了正在發(fā)生的事情。 用戶以為他們使用的是網(wǎng)頁的普通 UI，但實(shí)際上有一個隱藏的 UI 在控制； 換句話說，UI 已被修復(fù)。 當(dāng)用戶點(diǎn)擊他們認(rèn)為安全的東西時，隱藏的 UI 會執(zhí)行不同的操作。

由于 HTML 框架 (iframe) 能夠通過框架在其他網(wǎng)頁中顯示網(wǎng)頁，因此攻擊成為可能。 如果網(wǎng)頁允許自己在框架內(nèi)顯示，攻擊者可以用隱藏的透明層覆蓋原始網(wǎng)頁，并使用自己的 JavaScript 和 UI 元素。 然后，攻擊者誘騙用戶訪問惡意頁面，該頁面看起來就像用戶知道并信任的站點(diǎn)。 沒有跡象表明原始站點(diǎn)上有隱藏的 UI。 用戶單擊鏈接或按鈕，期望原始站點(diǎn)執(zhí)行特定操作，然后攻擊者的腳本運(yùn)行。 但是攻擊者的腳本也可以執(zhí)行預(yù)期的操作，讓它看起來沒有出錯。

我們可以使用下面這個工具網(wǎng)站來檢測自己的網(wǎng)站是否存在被 clickjacking 攻擊的漏洞。

https://clickjacker.io/

只需要把自己的網(wǎng)站 url，填入輸入框，即可檢測：

我本地開發(fā)的網(wǎng)站，使用 localhost 運(yùn)行，當(dāng)然沒辦法被這個工具網(wǎng)站掃描，所以我把它們發(fā)布到阿里云上，通過后者的公網(wǎng) ip 地址進(jìn)行訪問。

首先使用 pm2 list 查看阿里云服務(wù)器上運(yùn)行的服務(wù)器進(jìn)程：

使用 pm2 stop all 停掉所有的進(jìn)程：

在 meta 元素中設(shè)置 X-Frame-Options 是沒有用的！ 例如， meta http-equiv="X-Frame-Options" content="deny" 沒有效果。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

X-Frame-Options 僅通過設(shè)置 HTTP 標(biāo)頭起作用，如下例所示。

const frameguard = require('frameguard'); app.use(frameguard({ action: 'SAMEORIGIN' }));

上面的代碼效果如下：

使用本文開頭提到的工具網(wǎng)站進(jìn)行掃描：

上面的代碼生效了，現(xiàn)在的輸出是：

it is safe from clickjacking attack.

另一個指令：CSP: frame-ancestors，同樣不支持在 meta 元素里定義：

var express = require('express'); var app = express();app.use(function(req, res, next) {res.setHeader("Content-Security-Policy", "script-src 'self'");return next(); });

https://stackoverflow.com/questions/21048252/nodejs-where-exactly-can-i-put-the-content-security-policy

上述代碼的作用，讓工具網(wǎng)站的檢查重新顯示綠燈：

總結(jié)

以上是生活随笔為你收集整理的关于前端页面测试和抵御 clickjacking attack 的一些方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。