ASP.NET Core ファイルアップロードをマルチパートから読み取るときのクロスサイト要求偽造の検証

オウルです。

ASP.NET Coreでファイルアップロードをマルチパートから読み取る場合、formタグで自動生成された偽造防止トークンをValidateAntiForgeryTokenフィルターで処理するとエラーになります。このエラーの解決策の１つとしてCookieのヘッダーから偽造防止トークンを読み取る方法を紹介します。

ローカル環境

WSL v1	Ubuntu18.04 LTS
App	ASP.NET Core 3.1.302

Ubuntu18.04 LTSでのASP.NET Coreの開発環境は、こちらをご参照ください。

雲の上はいつも晴れ

WSL UbuntuでASP.NET Core+SQLiteの開発環境のをつくる

https://book2525stack.com/2020/01/15/linux-netcore-development-env

オウルです。今回は、ASP.NET Core 3.1 MVC アプリの開発環境を WSL Ubuntu に準備します。※ Windows 版は、こちらを参考にしてください。RDBMS は本業で SQLServer を１０年近く使用しているため、SQLServer でと考えていましたが、SQL Server on Linux を動作させるためのマシンのメモリが、最低２ＧＢ要求されるため、今回は SQLite を使用します。WSL Ubuntu 開発環境を構築ローカル環境Client OSWindows10WSLUbuntu 18.04.2 LTSEditorVisual Studio CodeSDKASP.NET Core 3.1RDBMSSQLite 3.22.0WSL Ubuntu 18.04.2 LTS インストー...

ファイルアップロード

Javascriptを使用してファイルをコントローラーのアクションにストリーミングします。アクションでは、マルチパートセクションを読み取りアップロードされたファイルを処理します。ここでは、formタグ内にはinput type=”file”要素のみとします。

Uploadアクション

Uploadアクションは、公式のストリーミングを使用して大きいファイルをアップロードするを参考にしています。モデルバインドを使用せず、Requestを参照して処理します。

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Upload()
{
    // Content-Typeヘッダーからmultipart/が含まれるか調べます（リクエストの本文のタイプ）
    if (!MultipartRequestHelper.IsMultipartContentType(Request.ContentType))
    {
        _logger.LogError("failure is not multipart contentTyp request");
        return BadRequest();
    }
    var formAccumulator = new KeyValueAccumulator();
    // デリミターを取得します
    var boundary = MultipartRequestHelper.GetBoundary(MediaTypeHeaderValue.Parse(Request.ContentType),
        _defaultFormOptions.MultipartBoundaryLengthLimit);
    var reader = new MultipartReader(boundary, HttpContext.Request.Body);
    // セクションを読み込みます
    var section = await reader.ReadNextSectionAsync();
    ・・・
}

[HttpPost]

[ValidateAntiForgeryToken]

public async Task<IActionResult> Upload()

{

// Content-Typeヘッダーからmultipart/が含まれるか調べます（リクエストの本文のタイプ）

if (!MultipartRequestHelper.IsMultipartContentType(Request.ContentType))

{

_logger.LogError("failure is not multipart contentTyp request");

return BadRequest();

}

var formAccumulator = new KeyValueAccumulator();

// デリミターを取得します

var boundary = MultipartRequestHelper.GetBoundary(MediaTypeHeaderValue.Parse(Request.ContentType),

_defaultFormOptions.MultipartBoundaryLengthLimit);

var reader = new MultipartReader(boundary, HttpContext.Request.Body);

// セクションを読み込みます

var section = await reader.ReadNextSectionAsync();

・・・

}

MDN Content-Type: Content-Type

例外発生

UploadアクションにJavascriptからアクセスするとawait reader.ReadNextSectionAsync()で次の例外が発生します。

ERROR|Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware
|An unhandled exception has occurred while executing the request. 
System.IO.IOException: Unexpected end of Stream, the content may have already been read by another component.

ERROR|Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware

|An unhandled exception has occurred while executing the request.

System.IO.IOException: Unexpected end of Stream, the content may have already been read by another component.

このエラーを解決するために、まずは偽造防止オプションを見直します。

偽造防止オプション

通常、formタグのmethodがGETでない場合、既定で偽造防止トークンを生成します。そして、POSTの場合、その偽造防止トークンはBodyに含まれます。偽造防止トークンをヘッダーに格納するために、Startup.ConfigureServicesの偽造防止オプションをカスタマイズします。

Startup.ConfigureServices

services.AddAntiforgery(options =>
{
    // Cookie名
    options.Cookie.Name = "[CookieName]";
    // スクリプトからのアクセス制御
    options.Cookie.HttpOnly = true;
    // セキュリティポリシー
    options.Cookie.SecurePolicy = (flag) ? CookieSecurePolicy.Always : CookieSecurePolicy.None;
    // 偽造防止トークンをレンダリングする非表示フォームフィールドの名前
    options.FormFieldName = "[AntiforgeryFieldname]";
    // ★add★ 偽造防止トークンを埋め込むヘッダーの名前
    options.HeaderName = "X-CSRF-TOKEN";
    options.SuppressXFrameOptionsHeader = false;
}

services.AddAntiforgery(options =>

{

// Cookie名

options.Cookie.Name = "[CookieName]";

// スクリプトからのアクセス制御

options.Cookie.HttpOnly = true;

// セキュリティポリシー

options.Cookie.SecurePolicy = (flag) ? CookieSecurePolicy.Always : CookieSecurePolicy.None;

// 偽造防止トークンをレンダリングする非表示フォームフィールドの名前

options.FormFieldName = "[AntiforgeryFieldname]";

// ★add★ 偽造防止トークンを埋め込むヘッダーの名前

options.HeaderName = "X-CSRF-TOKEN";

options.SuppressXFrameOptionsHeader = false;

}

microsoft: 偽造防止オプション

Cookieに偽造防止トークンを設定

偽造防止トークンを生成してCookieに設定するフィルター属性をストリーミングを使用して大きいファイルをアップロードするを参考に作成します。

フィルター属性を作成

ActionResultオブジェクトが実行される前にCookieに偽造防止トークンを設定します。

public class GenerateAntiforgeryTokenCookieAttribute : ResultFilterAttribute
{
    public override void OnResultExecuting(ResultExecutingContext context)
    {
        var antiforgery = context.HttpContext.RequestServices.GetService<IAntiforgery>();
        var tokens = antiforgery.GetAndStoreTokens(context.HttpContext);
        context.HttpContext.Response.Cookies.Append(
            // Javacriptで指定する名前
            "CSRF-TOKEN",
            tokens.RequestToken,
            // 偽造防止オプション構成では、Javascriptでのアクセスを許可しないように設定したが、
            // 今回は、Javascriptでヘッダーに偽造防止トークンを設定する必要があるため許可。
            new CookieOptions() { HttpOnly = false });
    }
    
    public override void OnResultExecuted(ResultExecutedContext context){}      
}

public class GenerateAntiforgeryTokenCookieAttribute : ResultFilterAttribute

{

public override void OnResultExecuting(ResultExecutingContext context)

{

var antiforgery = context.HttpContext.RequestServices.GetService<IAntiforgery>();

var tokens = antiforgery.GetAndStoreTokens(context.HttpContext);

context.HttpContext.Response.Cookies.Append(

// Javacriptで指定する名前

"CSRF-TOKEN",

tokens.RequestToken,

// 偽造防止オプション構成では、Javascriptでのアクセスを許可しないように設定したが、

// 今回は、Javascriptでヘッダーに偽造防止トークンを設定する必要があるため許可。

new CookieOptions() { HttpOnly = false });

}

public override void OnResultExecuted(ResultExecutedContext context){}

}

フィルター属性を指定

GenerateAntiforgeryTokenCookieAttributeをビューアクションに指定します。

[HttpGet]
[GenerateAntiforgeryTokenCookie]
public IActionResult Index()
{
    return View();
}

[HttpGet]

[GenerateAntiforgeryTokenCookie]

public IActionResult Index()

{

return View();

}

Javascriptで偽造防止トークンを送信

次にUploadアクションにアクセスするクライアントの実装です。

偽造防止トークンの自動生成を無効

asp-antiforgery=”false”をformタグに追加して偽造防止トークンを明示的に無効にします。

<form id="form-upload" method="POST" enctype="multipart/form-data" asp-antiforgery="false">
・・・
</form>

・・・

</form>

偽造防止トークンの送信

クライアントの実装（TypeScript）は、分かり易くfetch部分のみを抜粋します。

// ヘッダーを作成
const getCookie = (cname: string): string => {
    const name = cname + "=";
    const decodedCookie = decodeURIComponent(document.cookie);
    const ca = decodedCookie.split(";");
    for(let i = 0; i <ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == " ") {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
// Uploadアクションにアクセス
const response = await fetch(url, {
    method: "post",
    headers: {
        "X-CSRF-TOKEN": getCookie("CSRF-TOKEN")
    },
    body: new FormData([HTMLFormElement]),
    credentials: "same-origin"
});

// ヘッダーを作成

const getCookie = (cname: string): string => {

const name = cname + "=";

const decodedCookie = decodeURIComponent(document.cookie);

const ca = decodedCookie.split(";");

for(let i = 0; i <ca.length; i++) {

let c = ca[i];

while (c.charAt(0) == " ") {

c = c.substring(1);

}

if (c.indexOf(name) == 0) {

return c.substring(name.length, c.length);

}

return "";

}

// Uploadアクションにアクセス

const response = await fetch(url, {

method: "post",

headers: {

"X-CSRF-TOKEN": getCookie("CSRF-TOKEN")

body: new FormData([HTMLFormElement]),

credentials: "same-origin"

});

これで、Javascriptからアクセスすると偽造防止トークンの検証、Updateアクションが処理されます。

ASP.NET Core ファイルアップロードをマルチパートから読み取るときのクロスサイト要求偽造の検証

ファイルアップロード

Uploadアクション

例外発生

偽造防止オプション

Startup.ConfigureServices

Cookieに偽造防止トークンを設定

フィルター属性を作成

フィルター属性を指定

Javascriptで偽造防止トークンを送信

偽造防止トークンの自動生成を無効

偽造防止トークンの送信

関連記事:

コメントを残すコメントをキャンセル

ファイルアップロード

Uploadアクション

例外発生

偽造防止オプション

Startup.ConfigureServices

Cookieに偽造防止トークンを設定

フィルター属性を作成

フィルター属性を指定

Javascriptで偽造防止トークンを送信

偽造防止トークンの自動生成を無効

偽造防止トークンの送信

関連記事:

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル