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

Question

我在Startup.cs中设置了我的net core app和antiforgery middlweare：

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

在ConfigureServices方法中，和

        app.UseAntiForgeryMiddleware();

在Configure方法中。

防伪中间件：

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 app的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浏览器发送一个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