如何使用 angular2 app 和 net core app 实现 X-XSRF-TOKEN？

Question

我在 Startup.cs 中设置了我的网络核心应用和防伪中间件：

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

在 ConfigureServices 方法中，并且

        app.UseAntiForgeryMiddleware();

在配置方法中。

防伪中间件：

public class AntiForgeryMiddleware
    {
        private readonly IAntiforgery antiforgery;
        private readonly AntiforgeryOptions options;
        private readonly RequestDelegate next;

        public AntiForgeryMiddleware(RequestDelegate next, IAntiforgery antiforgery, IOptions<AntiforgeryOptions> options)
        {
            this.next = next;
            this.antiforgery = antiforgery;
            this.options = options.Value;
        }

        public async Task Invoke(HttpContext context)
        {
            try
            {
                if (string.Equals(context.Request.Path.Value, "/", StringComparison.OrdinalIgnoreCase) ||
                    string.Equals(context.Request.Path.Value, "/index.html", StringComparison.OrdinalIgnoreCase))
                {
                    // We can send the request token as a JavaScript-readable cookie, and Angular will use it by default.
                    var tokens = antiforgery.GetAndStoreTokens(context);
                    context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken, new CookieOptions() { HttpOnly = false });
                }

                if (string.Equals("POST", context.Request.Method, StringComparison.OrdinalIgnoreCase))
                {
                    await antiforgery.ValidateRequestAsync(context);

                    context.Response.StatusCode = 204;
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }

            await next(context);
        }
    }

我用

[ValidateAntiForgeryToken]

关于我的控制器操作。

如何设置 angular2 post 请求以发送与 net core 应用程序匹配的 x-xsrf-token 标头？

Answer 1

感谢 Angular 提供的 CookieXSRFStrategy，Angular 为您完成了这部分工作。

对于 Angular，您将使用他们的 $http 服务来发送 AJAX 请求。如果该服务可以将令牌值作为名为 XSRF-TOKEN 的 cookie 找到，则该服务将自动包含一个名为 X-XSRF-TOKEN 的标头。

在 .net 端，您只需要创建一些中间件来获取请求令牌，并将其值存储为 XSRF-TOKEN cookie (HttpOnly = false)。

验证过程：-

1) 应用程序会将带有请求令牌的 cookie XSRF-TOKEN 和带有 cookie 令牌的另一个 cookie .AspNetCore.Antiforgery.* 发送回浏览器。

2) 每当 Angular 发送 Ajax 请求时，该请求将包含带有请求令牌的标头 X-XSRF-TOKEN 和带有 cookie 令牌的 cookie .AspNetCore.Antiforgery.*。

3) Antiforgery 验证将确保两个令牌都有效并共享相同的秘密等。

由于请求令牌的默认标头名称是RequestVerificationToken，我们需要更改它并确保 Antiforgery 在名称为 X-XSRF-TOKEN 的标头中搜索请求令牌。让我们手动添加 Antiforgery 并在 ConfigureServices 方法中设置选项：

services.AddAntiforgery(opts => opts.HeaderName = "X-XSRF-Token");

现在我们需要确保生成令牌并将请求令牌包含在名为 XSRF-TOKEN 的 cookie 中，以便 Angular $http 服务可以读取它并将其作为标头包含在内。

这不能是一个仅限 http 的 cookie，因为 Angular 代码需要读取 cookie 值，以便它可以作为标头包含在后续请求中！

Answer 2

您所说的是在您的请求中插入标头x-xsrf-token并将其发送到后端。

您可以在进行 http 调用时通过修改标头选项来实现：

服务

@Injectable
export class YourService {

    constructor(private http: Http) { }

    makeSomeRequst(data: any) {

        let headers = new Headers({ 'X-XSRF-TOKEN': yourTokenFromLocalStorage });
        let options = new RequestOptions({ headers: headers });

        this.http.post('url to your API call', data, options)
            .subscribe(result => {
                console.log('Your request was done and compliant to security on backend');
            }, err => {
                console.error('There was a problem with authentication');
                console.log(err)
            });
    }

}

这样，您将修改标头并插入令牌以符合您的安全机制。如果您想实现自动化，您可以按照本教程了解如何为 http 调用创建拦截器并在一个地方为所有这些调用插入令牌，而不是在每个服务中手动执行：

您需要扩展 Angular 的 Http 并为您的模块提供新的依赖项。 按照此处的完整教程进行操作：

https://medium.com/aviabird/http-interceptor-angular2-way-e57dc2842462