.NET Core 3.1、Vue、Axios 和 [ValidateAntiForgeryToken]

Question

我整天都在玩这个，尽可能多地阅读，但我完全没能让它工作。

我已经将我的实现与 MS 文档和围绕 SO 的其他答案进行了比较，none 这些方法似乎有效。

问题的根源是匿名用户和登录用户的切换。

我一直在遵循 MS 的建议here. And various answers here and

为了测试，我有一个联系表，其端点装饰有 [ValidateAntiForgeryToken]。

流量为：

访问网站，post 这个表格，一切正常。登录访问表单，post - BOOM - 所提供的防伪令牌是针对与当前用户不同的 claims-based 用户。

在我的 public void Configure( 方法中，我有：

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

    await next();
});

在我的 public void ConfigureServices( 方法中我有：

services.AddAntiforgery(options => options.HeaderName = "X-CSRF-TOKEN");

在我的 Vue 路由器中，我添加了对 axios API 方法的调用，如下所示：

router.afterEach((to, from) => {
    api.readCsrfCookieAndSetHeader();
});

此方法只读取 cookie 并更新 header:

public readCsrfCookieAndSetHeader() {
    console.info('READING CSRF-TOKEN');
    if (document.cookie.indexOf('CSRF-TOKEN') > -1) {
        const v = document.cookie.match('(^|;) ?' + 'CSRF-TOKEN' + '=([^;]*)(;|$)');
        const r = v ? v[2] : '';
        // console.log(r);
        this.csrfToken = r;
        axios.defaults.headers.common['X-CSRF-TOKEN'] = this.csrfToken;
        console.log(axios.defaults.headers.common['X-CSRF-TOKEN']);
    } else {
        this.csrfToken = '';
    }
}

我可以看到这个值一页一页地变化。一个似乎对某些人有用的建议是在用户登录时重新运行 GetAndStoreTokens，例如：

var user = await _userManager.FindByEmailAsync(userName);
var result = await _signInManager.PasswordSignInAsync(user, password, true, false);
_httpContextAccessor.HttpContext.User = await _signInManager.CreateUserPrincipalAsync(user);
if (result.Succeeded)
{
    // get, store and send the anti forgery token
    AntiforgeryTokenSet tokens = _antiforgery.GetAndStoreTokens(_httpContextAccessor.HttpContext);
    _httpContextAccessor.HttpContext.Response.Cookies.Append("CSRF-TOKEN", tokens.RequestToken, new CookieOptions { HttpOnly = false });
}

return result;

但这对我也没有用。

我也尝试过使用 axios 拦截器更新值，如下所示：

axios.interceptors.response.use(
    (response) => {
        // this.readCsrfCookieAndSetHeader();
        return response;
    }, 
    (error) => {

但这实际上只是另一种获取更新值的方法，我确定它已经被更新了。

我运行没有想法，似乎没有什么可以尝试的。因此这个问题。

我错过了什么明显的东西吗？似乎我几乎一字不漏地复制了 MS Angular 示例，所以我不知道自己做错了什么。

任何指点将不胜感激。

Answer 1

如您问题的评论中所述。我隐约记得它与 AppStartup 中某些东西的排序有关。这是我所拥有的转储。这目前有效（似乎很好）。

    /// <summary>
    /// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    /// </summary>
    /// <param name="app">The <see cref="IApplicationBuilder"/>.</param>
    /// <param name="env">The <see cref="IHostingEnvironment"/>.</param>
    /// <param name="antiforgery">Enables setting of the antiforgery token to be served to the user.</param>
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, IAntiforgery antiforgery)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true,
            });
        }

        app.UseSession();

        app.UseHttpsRedirection();

        app.UseStaticFiles();

        // global cors policy
        app.UseCors(x => x
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader());

        // Authenticate before the user accesses secure resources.
        app.UseAuthentication();

        app.Use(next => context =>
        {
            string path = context.Request.Path.Value;
            if (path.IndexOf("a", StringComparison.OrdinalIgnoreCase) != -1 || path.IndexOf("b", StringComparison.OrdinalIgnoreCase) != -1)
            {
                // The request token can be sent as a JavaScript-readable cookie,
                // and Angular uses it by default.
                var tokens = antiforgery.GetAndStoreTokens(context);
                context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken, new CookieOptions() { HttpOnly = false });
            }

            return next(context);
        });

        app.Use(next => context =>
        {
            string timezone = context.Request.Headers["Timezone"];

            if (!string.IsNullOrEmpty(timezone))
            {
                context.Session.SetString(nameof(HttpContextSessionValues.SessionStrings.Timezone), timezone);
            }

            return next(context);
        });

        app.UseExceptionHandler(errorApp =>
        {
            errorApp.Run(async context =>
            {
                context.Response.StatusCode = 500;
                context.Response.ContentType = "text/html";

                var exHandlerFeature = context.Features.Get<IExceptionHandlerFeature>();
                var exception = exHandlerFeature.Error;

                if (exception is PresentableException)
                {
                    await context.Response.WriteAsync(exception.Message).ConfigureAwait(false);
                }
                else
                {
                    await context.Response.WriteAsync("An Unexpected error has occured. You may need to try again.").ConfigureAwait(false);
                }
            });
        });
        app.UseHsts();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Home", action = "Index" });
        });
    }

Answer 2

HttpContextSessionValues.SessionStrings.Timezone 的定义在哪里？

.NET Core 3.1、Vue、Axios 和 [ValidateAntiForgeryToken]

.NET Core 3.1, Vue, Axios and [ValidateAntiForgeryToken]

c#

antiforgerytoken

vue.js

asp.net-core

axios