初探前端WEB安全#3
CSRF
CSRF(Cross-site request forgery)，也就是我們常說的跨站請求偽造，你可以這樣理解CSRF攻擊：攻擊者盜用了你的身份，以你的名義傳送惡意請求。
CSRF能夠做的事情包括：以你名義傳送郵件，發訊息，盜取你的賬號，甚至於購買商品，虛擬貨幣轉賬......造成的問題包括：個人隱私洩露以及財產安全。
以下是個簡單的示意圖，來闡述CSRF的攻擊思想：
由於使用者訪問目標網站的時候，會攜帶cookie，所以CSRF攻擊者在使用者已經登入目標網站之後，誘使使用者訪問一個攻擊頁面，利用目標網站對使用者的信任，以使用者身份在攻擊頁面對目標網站發起偽造使用者操作的請求，達到攻擊目的。
接下來，我們來模擬一個CSRF攻擊，一個司空見慣的轉賬DEMO
首先是我們的首頁，如果已經登入過，則顯示轉賬頁面，如果沒有登入過，則顯示登入頁面
<?php require_once('common.php'); if ($_POST['username'] === 'test' && $_POST['password'] === 'test') { $_SESSION['logged_in'] = true; $_SESSION['username'] = $_POST['username']; resetAccount(); //header('Set-Cookie: PHPSESSID=nope; path=/; SameSite=Lax;'); header('Location: /account.php'); } else { header('Location: /login.html'); } ?>
接下來是一個簡單的登入頁面
<html> <head> </head> <body> <form method="POST" action="login.php"> <div> <label for="username">Username</label> <input type="text" name="username"> </div> <div> <label for="Password">password</label> <input type="text" name="password"> </div> <input type="submit"> </form> </body> </html>
登入的賬戶和密碼都是test，成功登入後，我們可以看到瀏覽器中已經存在目標站點的cookie，其中儲存了使用者的sessionID
之後進入我們的轉賬頁面，同樣地，如果使用者沒有登入成功，會重定向到登入頁，如果使用者登入成功，則進入轉賬頁面，轉賬的明細儲存在伺服器的session中，頁面會顯示轉賬的明細同時允許使用者進行轉賬行為，程式碼如下：
<?php
require_once('common.php');
if (!isLoggedIn()) {
header('Location: /login.html');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSRF Demo</title>
</head>
<body>
<div class="container">
<div>
<h1><strong>Balance:</strong> $<span id="balance"><?= $_SESSION['balance'] ?></span></h1>
</div>
<div>
<div>
<h3>Transfers</h3>
<table class="table table-striped">
<thead>
<tr>
<th>From</th>
<th>To</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<?php
foreach ($_SESSION['transfers'] as $transfer) {
?>
<tr>
<td><?= $transfer['from'] ?></td>
<td><?= $transfer['to'] ?></td>
<td><?= $transfer['amount'] ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<div class="col-md-4">
<h3>Make a Transfer</h3>
<form method="GET" action="transfer.php">
<div class="form-group">
<label for="to">To</label>
<input class="form-control" type="text" name="to" id="to" />
</div>
<div class="form-group">
<label for="amount">Amount</label>
<input class="form-control" type="text" name="amount" id="amount" />
</div>
<input type="submit" class="btn btn-default" value="Send" />
</form>
</div>
</div>
</div>
</body>
</html>頁面的內容也很簡單，另外這裡我們設定賬戶總額是500,000，同時我們嘗試轉賬給“me”123元，我們可以看到如下結果
接下來，假如CSRF攻擊者在我們的目標站點中通過放入了一個攜帶目標站點的圖片連結，並誘使我們的使用者點選
<img src="transfer.php?to=attacker&amount=100000"></img>這時使用者點選後，如同向用戶名為“attacker”的使用者轉賬了100,000元，從而CSRF攻擊者成功從使用者賬戶盜取100,000元
但是若攻擊者在自己的電腦上執行這種操作，會因為SESSION不匹配從而無法進行轉賬
CSRF防禦手段
那麼既然我們瞭解了CSRF的攻擊原理，我們如何進行防禦呢
目前防禦 CSRF 攻擊主要有三種策略：
- 驗證 HTTP Referer 欄位
- 在請求地址中新增 token 並驗證
- 在 HTTP 頭中自定義屬性並驗證
（1）驗證 HTTP Referer 欄位
根據 HTTP 協議，在 HTTP 頭中有一個欄位叫 Referer，它記錄了該 HTTP 請求的來源地址。在通常情況下，訪問一個安全受限頁面的請求來自於同一個網站，比如需要訪問 http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory，使用者必須先登陸 bank.example，然後通過點選頁面上的按鈕來觸發轉賬事件。這時，該轉帳請求的 Referer 值就會是轉賬按鈕所在的頁面的 URL，通常是以 bank.example 域名開頭的地址。而如果黑客要對銀行網站實施 CSRF 攻擊，他只能在他自己的網站構造請求，當用戶通過黑客的網站傳送請求到銀行時，該請求的 Referer 是指向黑客自己的網站。因此，要防禦 CSRF 攻擊，銀行網站只需要對於每一個轉賬請求驗證其 Referer 值，如果是以 bank.example 開頭的域名，則說明該請求是來自銀行網站自己的請求，是合法的。如果 Referer 是其他網站的話，則有可能是黑客的 CSRF 攻擊，拒絕該請求。
然而，這種方法並非萬無一失。Referer 的值是由瀏覽器提供的，雖然 HTTP 協議上有明確的要求，但是每個瀏覽器對於 Referer 的具體實現可能有差別，並不能保證瀏覽器自身沒有安全漏洞。使用驗證 Referer 值的方法，就是把安全性都依賴於第三方（即瀏覽器）來保障，從理論上來講，這樣並不安全。事實上，對於某些瀏覽器，比如 IE6 或 FF2，目前已經有一些方法可以篡改 Referer 值。如果 bank.example 網站支援 IE6 瀏覽器，黑客完全可以把使用者瀏覽器的 Referer 值設為以 bank.example 域名開頭的地址，這樣就可以通過驗證，從而進行 CSRF 攻擊。
即便是使用最新的瀏覽器，黑客無法篡改 Referer 值，這種方法仍然有問題。因為 Referer 值會記錄下使用者的訪問來源，有些使用者認為這樣會侵犯到他們自己的隱私權，特別是有些組織擔心 Referer 值會把組織內網中的某些資訊洩露到外網中。因此，使用者自己可以設定瀏覽器使其在傳送請求時不再提供 Referer。當他們正常訪問銀行網站時，網站會因為請求沒有 Referer 值而認為是 CSRF 攻擊，拒絕合法使用者的訪問。
（2）在請求地址中新增 token 並驗證
CSRF 攻擊之所以能夠成功，是因為黑客可以完全偽造使用者的請求，該請求中所有的使用者驗證資訊都是存在於 cookie 中，因此黑客可以在不知道這些驗證資訊的情況下直接利用使用者自己的 cookie 來通過安全驗證。要抵禦 CSRF，關鍵在於在請求中放入黑客所不能偽造的資訊，並且該資訊不存在於 cookie 之中。可以在 HTTP 請求中以引數的形式加入一個隨機產生的 token，並在伺服器端建立一個攔截器來驗證這個 token，如果請求中沒有 token 或者 token 內容不正確，則認為可能是 CSRF 攻擊而拒絕該請求。
這種方法要比檢查 Referer 要安全一些，token 可以在使用者登陸後產生並放於 session 之中，然後在每次請求時把 token 從 session 中拿出，與請求中的 token 進行比對，但這種方法的難點在於如何把 token 以引數的形式加入請求。對於 GET 請求，token 將附在請求地址之後，這樣 URL 就變成 http://url?csrftoken=tokenvalue。 而對於 POST 請求來說，要在 form 的最後加上 <input type=”hidden” name=”csrftoken” value=”tokenvalue”/>，這樣就把 token 以引數的形式加入請求了。但是，在一個網站中，可以接受請求的地方非常多，要對於每一個請求都加上 token 是很麻煩的，並且很容易漏掉，通常使用的方法就是在每次頁面載入時，使用 javascript 遍歷整個 dom 樹，對於 dom 中所有的 a 和 form 標籤後加入 token。這樣可以解決大部分的請求，但是對於在頁面載入之後動態生成的 html 程式碼，這種方法就沒有作用，還需要程式設計師在編碼時手動新增 token。
該方法還有一個缺點是難以保證 token 本身的安全。特別是在一些論壇之類支援使用者自己發表內容的網站，黑客可以在上面釋出自己個人網站的地址。由於系統也會在這個地址後面加上 token，黑客可以在自己的網站上得到這個 token，並馬上就可以發動 CSRF 攻擊。為了避免這一點，系統可以在新增 token 的時候增加一個判斷，如果這個連結是鏈到自己本站的，就在後面新增 token，如果是通向外網則不加。不過，即使這個 csrftoken 不以引數的形式附加在請求之中，黑客的網站也同樣可以通過 Referer 來得到這個 token 值以發動 CSRF 攻擊。這也是一些使用者喜歡手動關閉瀏覽器 Referer 功能的原因。
（3）在 HTTP 頭中自定義屬性並驗證
這種方法也是使用 token 並進行驗證，和上一種方法不同的是，這裡並不是把 token 以引數的形式置於 HTTP 請求之中，而是把它放到 HTTP 頭中自定義的屬性裡。通過 XMLHttpRequest 這個類，可以一次性給所有該類請求加上 csrftoken 這個 HTTP 頭屬性，並把 token 值放入其中。這樣解決了上種方法在請求中加入 token 的不便，同時，通過 XMLHttpRequest 請求的地址不會被記錄到瀏覽器的位址列，也不用擔心 token 會透過 Referer 洩露到其他網站中去。
然而這種方法的侷限性非常大。XMLHttpRequest 請求通常用於 Ajax 方法中對於頁面區域性的非同步重新整理，並非所有的請求都適合用這個類來發起，而且通過該類請求得到的頁面不能被瀏覽器所記錄下，從而進行前進，後退，重新整理，收藏等操作，給使用者帶來不便。另外，對於沒有進行 CSRF 防護的遺留系統來說，要採用這種方法來進行防護，要把所有請求都改為 XMLHttpRequest 請求，這樣幾乎是要重寫整個網站，這代價無疑是不能接受的。