Web安全之CSRF例項解析

木子星兮發表於2020-06-05
Web

前言

文章首次發表在 個人部落格

之前寫過一篇 web安全之XSS例項解析,是通過舉的幾個簡單例子講解的，同樣通過簡單得例子來理解和學習CSRF，有小夥伴問實際開發中有沒有遇到過XSS和CSRF，答案是有遇到過，不過被測試同學發現了，還有安全掃描發現了可能的問題，這兩篇文章就是簡化了一下當時實際遇到的問題。

CSRF

跨站請求偽造（Cross Site Request Forgery），是指黑客誘導使用者開啟黑客的網站，在黑客的網站中，利用使用者的登陸狀態發起的跨站請求。CSRF攻擊就是利用了使用者的登陸狀態，並通過第三方的站點來做一個壞事。

要完成一次CSRF攻擊,受害者依次完成兩個步驟:

  1. 登入受信任網站A，並在本地生成Cookie
  2. 在不登出A的情況，訪問危險網站B

CSRF攻擊

在a.com登陸後種下cookie, 然後有個支付的頁面，支付頁面有個誘導點選的按鈕或者圖片，第三方網站域名為 b.com，中的頁面請求 a.com的介面，b.com 其實拿不到cookie，請求 a.com會把Cookie自動帶上（因為Cookie種在 a.com域下）。這就是為什麼在服務端要判斷請求的來源，及限制跨域（只允許信任的域名訪問），然後除了這些還有一些方法來防止 CSRF 攻擊，下面會通過幾個簡單的例子來詳細介紹 CSRF 攻擊的表現及如何防禦。

下面會通過一個例子來講解 CSRF 攻擊的表現是什麼樣子的。
實現的例子：
在前後端同域的情況下，前後端的域名都為 http://127.0.0.1:3200, 第三方網站的域名為 http://127.0.0.1:3100，釣魚網站頁面為 http://127.0.0.1:3100/bad.html。

平時自己寫例子中會用到下面這兩個工具，非常方便好用：
  • http-server: 是基於node.js的HTTP 伺服器，它最大的好處就是：可以使用任意一個目錄成為伺服器的目錄，完全拋開後端的沉重工程，直接執行想要的js程式碼;
  • nodemon: nodemon是一種工具，通過在檢測到目錄中的檔案更改時自動重新啟動節點應用程式來幫助開發基於node.js的應用程式

前端頁面： client.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSRF-demo</title>
    <style>
        .wrap {
            height: 500px;
            width: 300px;
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 20px;
        }
        input {
            width: 300px;
        }
        .payInfo {
            display: none;
        }
        .money {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="loginInfo">
            <h3>登陸</h3>
            <input type="text" placeholder="使用者名稱" class="userName">
            <br>
            <input type="password" placeholder="密碼" class="password">
            <br>
            <br>
            <button class="btn">登陸</button>
        </div>
        
        
        <div class="payInfo">
            <h3>轉賬資訊</h3>
            <p >當前賬戶餘額為 <span class="money">0</span>元</p>
            <!-- <input type="text" placeholder="收款方" class="account"> -->
            <button class="pay">支付10元</button>
            <br>
            <br>
            <a href="http://127.0.0.1:3100/bad.html" target="_blank">
                聽說點選這個連結的人都賺大錢了，你還不來看一下麼
            </a>
        </div>
    </div>
</body>
<script>
    const btn = document.querySelector('.btn');
    const loginInfo = document.querySelector('.loginInfo');
    const payInfo = document.querySelector('.payInfo');
    const money = document.querySelector('.money');
    let currentName = '';
    // 第一次進入判斷是否已經登陸
    Fetch('http://127.0.0.1:3200/isLogin', 'POST', {})
    .then((res) => {
        if(res.data) {
            payInfo.style.display = "block"
            loginInfo.style.display = 'none';
            Fetch('http://127.0.0.1:3200/pay', 'POST', {userName: currentName, money: 0})
            .then((res) => {
                money.innerHTML = res.data.money;
            })
        } else {
            payInfo.style.display = "none"
            loginInfo.style.display = 'block';
        }
        
    })
    // 點選登陸
    btn.onclick = function () {
        var userName = document.querySelector('.userName').value;
        currentName = userName;
        var password = document.querySelector('.password').value;
        Fetch('http://127.0.0.1:3200/login', 'POST', {userName, password})
        .then((res) => {
            payInfo.style.display = "block";
            loginInfo.style.display = 'none';
            money.innerHTML = res.data.money;
        })
    }
    // 點選支付10元
    const pay = document.querySelector('.pay');
    pay.onclick = function () {
        Fetch('http://127.0.0.1:3200/pay', 'POST', {userName: currentName, money: 10})
        .then((res) => {
            console.log(res);
            money.innerHTML = res.data.money;
        })
    }
    // 封裝的請求方法
    function Fetch(url, method = 'POST', data) {
        return new Promise((resolve, reject) => {
            let options = {};
            if (method !== 'GET') {
                options = {
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data),
                }
            }
            fetch(url, {
                mode: 'cors', // no-cors, cors, *same-origin
                method,
                ...options,
                credentials: 'include',
            }).then((res) => {
                return res.json();
            }).then(res => {
                resolve(res);
            }).catch(err => {
                reject(err);
            });
        })
    }
    
</script>

</html>

實現一個簡單的支付功能：

  1. 會首先判斷有沒有登入，如果已經登陸過，就直接展示轉賬資訊，未登入，展示登陸資訊
  2. 登陸完成之後，會展示轉賬資訊，點選支付，可以實現金額的扣減

後端服務： server.js

const Koa = require("koa");
const app = new Koa();
const route = require('koa-route');
const bodyParser = require('koa-bodyparser');
const cors = require('@koa/cors');
const KoaStatic = require('koa-static');

let currentUserName = '';

// 使用  koa-static  使得前後端都在同一個服務下
app.use(KoaStatic(__dirname));

app.use(bodyParser()); // 處理post請求的引數

// 初始金額為 1000
let money = 1000;

// 呼叫登陸的介面
const login = ctx => {
    const req = ctx.request.body;
    const userName = req.userName;
    currentUserName = userName;
    // 簡單設定一個cookie
    ctx.cookies.set(
        'name', 
        userName,
        {
          domain: '127.0.0.1', // 寫cookie所在的域名
          path: '/',       // 寫cookie所在的路徑
          maxAge: 10 * 60 * 1000, // cookie有效時長
          expires: new Date('2021-02-15'),  // cookie失效時間
          overwrite: false,  // 是否允許重寫
          SameSite: 'None',
        }
      )
    ctx.response.body = {
        data: {
            money,
        },
        msg: '登陸成功'
    };
}
// 呼叫支付的介面
const pay = ctx => {
    if(ctx.method === 'GET') {
        money = money - Number(ctx.request.query.money);
    } else {
        money = money - Number(ctx.request.body.money);
    }
    ctx.set('Access-Control-Allow-Credentials', 'true');
    // 根據有沒有 cookie 來簡單判斷是否登入
    if(ctx.cookies.get('name')){
        ctx.response.body = {
            data: {
                money: money,
            },
            msg: '支付成功'
        };
    }else{
        ctx.body = '未登入';
    }
}

// 判斷是否登陸
const isLogin = ctx => {
    ctx.set('Access-Control-Allow-Credentials', 'true');

    if(ctx.cookies.get('name')){
        ctx.response.body = {
            data: true,
            msg: '登陸成功'
        };

    }else{
        ctx.response.body = {
            data: false,
            msg: '未登入'
        };
    }
}
// 處理 options 請求
app.use((ctx, next)=> {
    const headers = ctx.request.headers;
    if(ctx.method === 'OPTIONS') {
        ctx.set('Access-Control-Allow-Origin', headers.origin);
        ctx.set('Access-Control-Allow-Headers', 'Content-Type');
        ctx.set('Access-Control-Allow-Credentials', 'true');
        ctx.status = 204;
    } else {
        next();
    }
})

app.use(cors());
app.use(route.post('/login', login));
app.use(route.post('/pay', pay));
app.use(route.get('/pay', pay));
app.use(route.post('/isLogin', isLogin));

app.listen(3200, () => {
    console.log('啟動成功');
});

執行 nodemon server.js，訪問頁面 http://127.0.0.1:3200/client.html

CSRF-demo

登陸完成之後，可以看到Cookie是種到 http://127.0.0.1:3200 這個域下面的。

第三方頁面 bad.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三方網站</title>
</head>
<body>
    <div>
        哈哈，小樣兒，哪有賺大錢的方法，還是踏實努力工作吧！
        <!-- form 表單的提交會伴隨著跳轉到action中指定 的url 連結，為了阻止這一行為，可以通過設定一個隱藏的iframe 頁面，並將form 的target 屬性指向這個iframe，當前頁面iframe則不會重新整理頁面 -->
        <form action="http://127.0.0.1:3200/pay" method="POST" class="form" target="targetIfr" style="display: none">
            <input type="text" name="userName" value="xiaoming">
            <input type="text" name="money" value="100">
        </form>
        <iframe name="targetIfr" style="display:none"></iframe>
    </div>
</body>
<script>
    document.querySelector('.form').submit();
</script>
</html>

使用 HTTP-server 起一個 本地埠為 3100的服務，就可以通過 http://127.0.0.1:3100/bad.html 這個連結來訪問，CSRF攻擊需要做的就是在正常的頁面上誘導使用者點選連結進入這個頁面
CSRF-DEMO

點選誘導連結，跳轉到第三方的頁面，第三方頁面自動發了一個扣款的請求，所以在回到正常頁面的時候，重新整理，發現錢變少了。
我們可以看到在第三方頁面呼叫 http://127.0.0.1:3200/pay 這個介面的時候，Cookie自動加在了請求頭上，這就是為什麼 http://127.0.0.1:3100/bad.html 這個頁面拿不到 Cookie，但是卻能正常請求 http://127.0.0.1:3200/pay 這個介面的原因。

CSRF攻擊大致可以分為三種情況，自動發起Get請求， 自動發起POST請求，引導使用者點選連結。下面會分別對上面例子進行簡單的改造來說明這三種情況

自動發起Get請求

在上面的 bad.html中，我們把程式碼改成下面這樣

<!DOCTYPE html>
<html>
  <body>
    <img src="http://127.0.0.1:3200/payMoney?money=1000">
  </body>
</html>

當使用者訪問含有這個img的頁面後，瀏覽器會自動向自動發起 img 的資源請求，如果伺服器沒有對該請求做判斷的話，那麼會認為這是一個正常的連結。

自動發起POST請求

上面例子中演示的就是這種情況。

<body>
    <div>
        哈哈，小樣兒，哪有賺大錢的方法，還是踏實努力工作吧！
        <!-- form 表單的提交會伴隨著跳轉到action中指定 的url 連結，為了阻止這一行為，可以通過設定一個隱藏的iframe 頁面，並將form 的target 屬性指向這個iframe，當前頁面iframe則不會重新整理頁面 -->
        <form action="http://127.0.0.1:3200/pay" method="POST" class="form" target="targetIfr">
            <input type="text" name="userName" value="xiaoming">
            <input type="text" name="money" value="100">
        </form>
        <iframe name="targetIfr" style="display:none"></iframe>
    </div>
</body>
<script>
    document.querySelector('.form').submit();
</script>

上面這段程式碼中構建了一個隱藏的表單，表單的內容就是自動發起支付的介面請求。當使用者開啟該頁面時，這個表單會被自動執行提交。當表單被提交之後，伺服器就會執行轉賬操作。因此使用構建自動提交表單這種方式，就可以自動實現跨站點 POST 資料提交。

引導使用者點選連結

誘惑使用者點選連結跳轉到黑客自己的網站，示例程式碼如圖所示

<a href="http://127.0.0.1:3100/bad.html">聽說點選這個連結的人都賺大錢了，你還不來看一下麼</a>

使用者點選這個地址就會跳到黑客的網站，黑客的網站可能會自動傳送一些請求，比如上面提到的自動發起Get或Post請求。

如何防禦CSRF

利用cookie的SameSite

SameSite有3個值： Strict, Lax和None

  1. Strict。瀏覽器會完全禁止第三方cookie。比如a.com的頁面中訪問 b.com 的資源，那麼a.com中的cookie不會被髮送到 b.com伺服器，只有從b.com的站點去請求b.com的資源，才會帶上這些Cookie
  2. Lax。相對寬鬆一些，在跨站點的情況下，從第三方站點連結開啟和從第三方站點提交 Get方式的表單這兩種方式都會攜帶Cookie。但如果在第三方站點中使用POST方法或者通過 img、Iframe等標籤載入的URL，這些場景都不會攜帶Cookie。
  3. None。任何情況下都會傳送 Cookie資料

我們可以根據實際情況將一些關鍵的Cookie設定 Stirct或者 Lax模式，這樣在跨站點請求的時候，這些關鍵的Cookie就不會被髮送到伺服器，從而使得CSRF攻擊失敗。

驗證請求的來源點

由於CSRF攻擊大多來自第三方站點，可以在伺服器端驗證請求來源的站點，禁止第三方站點的請求。
可以通過HTTP請求頭中的 Referer和Origin屬性。

HTTP請求頭

但是這種 Referer和Origin屬性是可以被偽造的，碰上黑客高手，這種判斷就是不安全的了。

CSRF Token

  1. 最開始瀏覽器向伺服器發起請求時，伺服器生成一個CSRF Token。CSRF Token其實就是伺服器生成的字串，然後將該字串種植到返回的頁面中(可以通過Cookie)
  2. 瀏覽器之後再發起請求的時候，需要帶上頁面中的 CSRF Token（在request中要帶上之前獲取到的Token，比如 x-csrf-token：xxxx）, 然後伺服器會驗證該Token是否合法。第三方網站發出去的請求是無法獲取到 CSRF Token的值的。

其他知識點補充

1. 第三方cookie

Cookie是種在服務端的域名下的，比如客戶端域名是 a.com，服務端的域名是 b.com， Cookie是種在 b.com域名下的，在 Chrome的 Application下是看到的是 a.com下面的Cookie，是沒有的，之後，在a.com下傳送b.com的介面請求會自動帶上Cookie(因為Cookie是種在b.com下的)

2. 簡單請求和複雜請求

複雜請求需要處理option請求。

之前寫過一篇特別詳細的文章 CORS原理及@koa/cors原始碼解析，有空可以看一下。

3. Fetch的 credentials 引數

如果沒有配置credential 這個引數，fetch是不會傳送Cookie的

credential的引數如下

  • include：不論是不是跨域的請求，總是傳送請求資源域在本地的Cookies、HTTP Basic anthentication等驗證資訊
  • same-origin：只有當URL與響應指令碼同源才傳送 cookies、 HTTP Basic authentication 等驗證資訊
  • omit： 從不傳送cookies.

平常寫一些簡單的例子，從很多細節問題上也能補充自己的一些知識盲點。

參考

相關文章