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

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

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

https://clickjacker.io/

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

![](https://img-blog.csdnimg.cn/img_convert/5958d32af66e680ad9fb87d9ebe0999f.png)

我本地開發的網站，使用 localhost 執行，當然沒辦法被這個工具網站掃描，所以我把它們釋出到阿里雲上，透過後者的公網 ip 地址進行訪問。

首先使用 `pm2 list` 檢視阿里雲伺服器上執行的伺服器程式：
![](https://img-blog.csdnimg.cn/img_convert/568a1ad5bae4450190f820c0d36baeb8.png)

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

![](https://img-blog.csdnimg.cn/img_convert/5c301d68d9d2e757a3c0d7fbbccc1a93.png)

在 `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 標頭起作用，如下例所示。

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

上面的程式碼效果如下：
![](https://img-blog.csdnimg.cn/img_convert/66e3888ef954b098e46df656d37a4c2c.png)

![](https://img-blog.csdnimg.cn/img_convert/217c58f555235118209f76d733396ed6.png)

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

![](https://img-blog.csdnimg.cn/img_convert/d7ba5a5992a23e33b9a4b793f654899f.png)

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

> it is safe from clickjacking attack.

![](https://img-blog.csdnimg.cn/img_convert/7955eff64ee7fbb93e6e54e8f0ec20e7.png)

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

![](https://img-blog.csdnimg.cn/img_convert/31a55d2246621f0c02fc104db95ba940.png)

```javascript
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

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

![](https://img-blog.csdnimg.cn/img_convert/0c1324471c8691ec294eb9b718391271.png)

![](https://img-blog.csdnimg.cn/img_convert/1016d5c521640755ab733f385c5a6a9c.png)

關於前端頁面測試和抵禦 clickjacking attack 的一些方法

相關文章