Blazor WebAssembly中的防止跨站點請求偽造 (XSRF/CSRF) 攻擊

　　這里以Asp.net Core的服務端並且Asp.net Core托管客戶端為例，跨域請求的參考其他跨域設置。

　　在Asp.net Core中，XSRF/CSRF是通過驗證http頭或form表單中的字段來驗證請求的。

　　在Asp.net Core的Startup中注入如下服務以啟用防止跨站點請求偽造 (XSRF/CSRF) 攻擊

            services.AddAntiforgery(options =>{ options.HeaderName = "X-CSRF-TOKEN-HEADER"; options.FormFieldName = "X-CSRF-TOKEN-FORM"; });

　　啟用如下中間件以在Cookie中寫入令牌

app.Use(next=>context=> 
            {
                var tokens = antiforgery.GetAndStoreTokens(context);
                context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken,new CookieOptions() {HttpOnly=false });
                return next(context);
            });

　　在Blazor WebAssembly 客戶端中注入JSRuntime用於通過js讀取Cookie

@inject IJSRuntime JSRuntime

　　在FORM表單中附加令牌

  var token = await JSRuntime.InvokeAsync<string>("getCookie", "XSRF-TOKEN");

        //FORM
        HttpContent httpcontent = new StringContent($"X-CSRF-TOKEN-FORM={token}", System.Text.Encoding.UTF8);
        httpcontent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/x-www-form-urlencoded");

        using HttpResponseMessage responseMessage = await Http.PostAsync("WeatherForecast", httpcontent);
        forecasts = await JsonSerializer.DeserializeAsync<WeatherForecast[]>(await responseMessage.Content.ReadAsStreamAsync());

　　在Header中附加令牌

   //HEADER
        Http.DefaultRequestHeaders.Add("X-CSRF-TOKEN-HEADER", token);
        forecasts = await Http.PostJsonAsync<WeatherForecast[]>("WeatherForecast", httpcontent);

 

參考：https://docs.microsoft.com/zh-cn/aspnet/core/security/anti-request-forgery?view=aspnetcore-3.1#javascript-ajax-and-spas

源碼：https://github.com/saber-wang/BlazorAppFormTset