angular - 使用 token API 和 angular 进行防伪

Question

我正在使用 SSO 登录和 .net 核心 Web API 开发 Angular 6 应用程序。代码第一次在/token url 上命中后端，这是一个后期操作。在这种情况下我如何做防伪。请说明代币转账的流程

Answer 1

我不确定这是否是您要找的，但我会尝试解释我是如何在类似情况下实现的。
首先，Angular 内置了用于 XSRF 处理的帮助程序:

https://angular.io/guide/security#http

https://angular.io/api/common/http/HttpClientXsrfModule

https://angular.io/api/common/http/HttpXsrfTokenExtractor

所以最难的部分是在 api 级别创建自定义 XSRF 中间件。
前段时间我为我的一个应用程序做了它，该应用程序在前端使用 Angular 6 构建，在后端使用 ASP.NET Core WebApi 构建。
帮助我的文章:

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

您的中间件可能如下所示:

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 方法中的服务中:

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

并在 Configure 方法中使用它:

app.UseAntiforgeryToken();

当然，要使用它，你必须用 [ValidateAntiForgeryToken] 装饰你的 api 方法。属性。
然后在您的 Angular 应用程序中，您可以创建 HttpInterceptor 以仅在需要时发送 token 。

@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());
    }
}