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

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

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

https://clickjacker.io/

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

我本地開發的網站，使用 localhost 運行，當然沒辦法被這個工具網站掃描，所以我把它們發布到阿里云上，通過后者的公網 ip 地址進行訪問。

首先使用 pm2 list 查看阿里云服務器上運行的服務器進程：

使用 pm2 stop all 停掉所有的進程：

在 meta 元素中設置 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 僅通過設置 HTTP 標頭起作用，如下例所示。

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

上面的代碼效果如下：

使用本文開頭提到的工具網站進行掃描：

上面的代碼生效了，現在的輸出是：

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。