mrkt 的程式學習筆記: ASP.NET MVC 防範 CSRF 攻擊 - 在 AJAX 裡使用 AntiForgeryToken 的處理

在 ASP.NET MVC 裡要防範 CSRF 攻擊可以在檢視頁面上加入使用 AntiFrogeryToken，並且在後端所對應的 Action 方法加上 ValidateAntiForgeryToken Attribute，這樣就可以防止 CSRF 的攻擊，相關的資訊我之前有寫過依篇文章來說明「ASP.NET MVC - ValidateAntiForgeryToken 與自定 HandleError 處理顯示客製的錯誤訊息頁」。

但如果網站的前端與後端互動大多都是經由 AJAX 方式的話，似乎就無法加上 AntiForgeryToken 來防護 CSRF 的攻擊，有些朋友是認為因為 Javascript 操作是不能跨網域的，所以就不用刻意對 AJAX 的操作加入 AntiForgeryToken 防範 CSRF，但我則是認為還是有必要去做這一層的防範，外在的攻擊手法是我們無法可以預測的，我們對於網站還是有必要去做到一些根本的防護，至少是多一層保障。

而這一篇則是跟大家說明如何在 AJAX 的操作裡使用 AntiForgeryToken。

在「Preventing Cross-Site Request Forgery (CSRF) Attacks : The Official Microsoft ASP.NET Site」這一篇文章裡有提到了「Anti-CSRF and AJAX」，作者「Mike Wasson」示範了如何在檢視頁面裡去建立一個 Razor @functions 「TokenHeaderValue」，然後在頁面裡使用 jQuery.Ajax 操作時在 headers 去加入 RequestVerificationToken 的內容，然後當 Request 傳送到後端 Controller Action 方法時再去驗證前端所傳送的 Token 是否正確，但是該文章最後所提供的方法並沒有完整的說明該用在何處，而且如果直接在 Controller Action 方法裡調用的話，還需要做調整，而且如果能夠跟原來使用 ValidateAntiForgeryToken Attribute 方式一樣的話會比較好，直接在 Action 方法上加個 Attribute 標籤而不是直接在方法裡再去加入程式。

於是在不久前看到了另一篇文章「AngularJS and AntiForgeryToken in ASP.NET MVC | TechBrij」，這篇文章雖然是說明 ASP.NET MVC 以及使用 AngularJS 的情況下使用 AntiForgeryToken 的方式，雖然前端使用了 AngularJS，不過重點在於後端有另外建立了「MyValidateAntiForgeryTokenAttribute」，這樣就可以直接在 Action 方法前加入這個標籤，然後在 MyValidateAntiForgeryTokenAttribute Filter 類別裡去對前端放在 Request Header 裡的 token 做驗證。

以下將上面兩篇文章的實作做個整理，如下：

Step.1

在專案根目錄下建立「App_Code」目錄，並且新增 CommonRazorFunctions.cshtml 檢視檔案，

在 CommonRazorFunctions.cshtml 裡加入以下的 Razor @functions，

一般 Razor @functions 如果是在個別檢視頁面裡是不需要加入 static 修飾詞，但如果作為可共用的方法時，就需要加上 static 修飾詞，如此才能再有需要使用的檢視頁面裡使用該 Razor @functions。

Step.2

加入 Action 方法與檢視頁面，

檢視頁面的內容：

@{    Layout = null;}<!DOCTYPE html><html lang="zh"><head>    <meta name="viewport" content="width=device-width" />    <title>Backend - Logon</title>    <!-- Le styles -->    <link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />    <link href="~/Content/bootstrap-responsive.css" rel="stylesheet" type="text/css" />    <link href="~/Content/jquery.pnotify.default.css" rel="stylesheet" type="text/css" />    <link href="~/Content/jquery.pnotify.default.icons.css" rel="stylesheet" type="text/css" />    <link href="~/Content/Logon.css" rel="stylesheet" />    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->    <!--[if lt IE 9]>      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>    <![endif]--></head><body>    <div class="container" style="padding-top: 50px;">        <form class="form-signin" id="FormLogon" method="post" action="@Url.Action("AccountEdit", "Home")">            <fieldset>                <legend>帳號編輯</legend>            </fieldset>            <label for="account">帳號</label>            @Html.TextBox("account", null, new { id = "TextBox_Account", @class = "input-block-level", placeholder = "Account", AutoComplete = "Off", tabindex = "1" })             <label for="name">名稱</label>            @Html.TextBox("name", null, new { id = "TextBox_Name", @class = "input-block-level", placeholder = "Name", AutoComplete = "Off", tabindex = "2" })             <div style="padding-top: 10px;">                <button type="button" class="btn btn-primary" id="Button_Submit" tabindex="3">送出</button>                <button type="button" class="btn" id="Button_Reset" tabindex="4">取消</button>            </div>        </form>    </div>    <!-- /container --> </body></html>

Step.3

接著就是 jQuery Ajax 裡去加入 Request Header，這裡就會使用到在 Step.1 所建立的 GetAntiForgeryToken()

Step.4

在網站專案根目錄下的 Filters 目錄裡新增「AjaxValidateAntiForgeryTokenAttribute.cs」

AjaxValidateAntiForgeryTokenAttribute 類別的程式內容：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Helpers;using System.Web.Mvc; namespace MvcApplication2.Filters{    [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = false, Inherited = true)]    public class AjaxValidateAntiForgeryTokenAttribute : FilterAttribute, IAuthorizationFilter    {        public void OnAuthorization(AuthorizationContext filterContext)        {            try            {                if (filterContext.HttpContext.Request.IsAjaxRequest())                {                    ValidateRequestHeader(filterContext.HttpContext.Request);                }                else                {                    filterContext.HttpContext.Response.StatusCode = 404;                    filterContext.Result = new HttpNotFoundResult();                }            }            catch (HttpAntiForgeryException e)            {                throw new HttpAntiForgeryException("Anti forgery token cookie not found");            }        }         private void ValidateRequestHeader(HttpRequestBase request)        {            string cookieToken = String.Empty;            string formToken = String.Empty;            string tokenValue = request.Headers["RequestVerificationToken"];            if (!String.IsNullOrEmpty(tokenValue))            {                string[] tokens = tokenValue.Split(':');                if (tokens.Length == 2)                {                    cookieToken = tokens[0].Trim();                    formToken = tokens[1].Trim();                }            }            AntiForgery.Validate(cookieToken, formToken);        }     }}

AjaxValidateAntiForgeryTokenAttribute 只限定用於接收 AJAX 請求的 Action 上，所以一般的 Action 就還是使用 ValidateAntiForgeryTokenAttribute。

註：與「AngularJS and AntiForgeryToken in ASP.NET MVC | TechBrij」裡面所提供的「MyValidateAntiForgeryTokenAttribute.cs」作法不同，我這邊的作法是希望能夠有所區分，讓 AjaxValidateAntiForgeryTokenAttribute 只會出現在接收 AJAX Request 的 Action 方法上，而不是另外去建立一個新的 ValidateAntiForgeryTokenAttribute 類別然後把兩種操作都給涵蓋。