使用令牌API和角度进行防伪 [英] Anti forgery with token API and angular

问题描述

我正在使用SSO登录和.net核心Web API来开发Angular 6应用程序.该代码第一次在/token网址上到达后端，这是一项后期操作.在这种情况下，我该如何做防伪.请说明令牌转移的流程

I am working on Angular 6 application with SSO login and .net core web API. The code hits the back end on /token url first time which is a post operation. How do I do the anti forgery in this scenario. Please explain the flow of token transfer

推荐答案

我不确定这是否是您要寻找的东西，但我将尝试解释在类似情况下如何实现这一目标.

I'm not sure if that's what you're looking for, but I'll try to explain how I achieved it in a similar case.

首先，Angular内置了用于XSRF处理的助手:

First of all Angular has built in helpers for XSRF handling:

• https://angular.io/guide/security#http
• https://angular.io/api/common/http/HttpClientXsrfModule
• https://angular.io/api/common/http/HttpXsrfTokenExtractor

• https://angular.io/guide/security#http
• https://angular.io/api/common/http/HttpClientXsrfModule
• https://angular.io/api/common/http/HttpXsrfTokenExtractor

所以最困难的部分是在api级别上创建自定义XSRF中间件.

So the hardest part is to create custom XSRF middleware at api level.

前段时间，我为其中一个应用程序创建了该应用程序，该应用程序的前端是Angular 6，后端是ASP.NET Core WebApi.

I did it some time ago for one of my apps which was built with Angular 6 on the front and ASP.NET Core WebApi on the back-end.

有帮助的文章

• https://www .domstamand.com/secure-your-angularasp-net-core-application-with-anti-forgery-token/

您的中间件可能看起来像这样:

Your middleware could look like this:

public class AntiForgeryTokenMiddleware
{
    private readonly RequestDelegate _next;
    private readonly IAntiforgery _antiforgery;

    public AntiForgeryTokenMiddleware(RequestDelegate next, IAntiforgery antiforgery)
    {
        _next = next;
        _antiforgery = antiforgery;
    }

    public Task Invoke(HttpContext context)
    {
        if (context.Request.Path.Value.IndexOf("/your api endpoint, e.g. /api", StringComparison.OrdinalIgnoreCase) != -1)
        {
            var tokens = _antiforgery.GetAndStoreTokens(context);
            context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken, new CookieOptions { HttpOnly = false, Secure = false });
        }
        return _next(context);
    }
}

然后按照上述文章，您必须将其添加到Startup类的ConfigureServices方法中的服务中:

Then as per mentioned article you have to add it to services in ConfigureServices method of Startup class:

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

并在Configure方法中使用它:

And use it in Configure method:

app.UseAntiforgeryToken();

当然要使用它，您必须使用[ValidateAntiForgeryToken]属性装饰api方法.

And of course to make use of it you have to decorate your api methods with [ValidateAntiForgeryToken] attribute.

然后在Angular应用中，您可以创建HttpInterceptor以仅在需要时发送令牌.

Then in your Angular app you could create HttpInterceptor to send token only when it's needed.

    @Injectable()
    export class XsrfInterceptor implements HttpInterceptor {

    constructor(private tokenExtractor: HttpXsrfTokenExtractor) {}

    private actions: string[] = ["POST", "PUT", "DELETE"];
    private forbiddenActions: string[] = ["HEAD", "OPTIONS"];

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let token = this.tokenExtractor.getToken();
        let permitted =  this.findByActionName(request.method, this.actions);
        let forbidden =  this.findByActionName(request.method, this.forbiddenActions);;

        if (permitted !== undefined && forbidden === undefined && token !== null) {
            request = request.clone({ setHeaders: { "X-XSRF-TOKEN": token } });
        }

        return next.handle(request);
    }

    private findByActionName(name: string, actions: string[]): string {
        return actions.find(action => action.toLocaleLowerCase() === name.toLocaleLowerCase());
    }
}

这篇关于使用令牌API和角度进行防伪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！