在 Aurelia 中防御 CSRF 攻击

Posted 2023-03-10

【中文标题】在 Aurelia 中防御 CSRF 攻击

【英文标题】：Protecting against CSRF attacks in Aurelia

【发布时间】：2015-10-02 16:07:37

【问题描述】：

在 Aurelia 中，似乎还没有任何对 CSRF 保护的支持，这与 AngularJS 的 XSRF-TOKEN 标头相反，AngularJS 框架会在所有 XHR 请求上自动设置。

我应该如何保护 Aurelia 应用免受 CSRF 攻击？我应该基于OWASP CSRF Prevention Cheat Sheet 推出自己的支持，还是已经有任何替代 Aurelia 的方法？

【问题讨论】：

使用 modsecurity。它是 apache 或 nginx 的一个模块，或者可以充当反向代理。它内置了反 CSRF。或者使用 cloudflare 之类的东西

【参考方案1】：

使用 Aurelia 的 HTTP interceptors（请参阅 examples in the docs），您应该可以相当轻松地自己完成此操作。在每次请求之前，您都可以发送您的令牌。这可以通过传统的aurelia-http-client 和新的标准aurelia-fetch-client 来完成。

您的代码可能如下所示：

export class MyRestAPI 
    static inject ()  return [HttpClient];  // This could easily be fetch-client

    constructor (http) 
        this.http = http.configure(x => 
            x.withBaseUrl(myBaseUrl);
            x.useStandardConfiguration();
            x.withInterceptor(
                request: function (request) 
                    request.headers.set('XSRF-TOKEN', myAwesomeToken);
                    return request;
                
            );
        );
    

    ...

在每次请求时，都会发送您的令牌。您必须在服务器端处理验证。您可以轻松设置代码，以便您的初始请求可以获取令牌，或者您可以将令牌作为身份验证有效负载的一部分传回，或者如果您愿意，您甚至可以将令牌存储在浏览器的本地存储中并使用它方式。

您甚至可以更进一步，实现 JWT 身份验证。如果您使用的是 node.js，我有一个小的 blog post，它描述了我如何在 Express 中实现 JWT。 Github 上有一个名为 aurelia-auth 的插件来处理 JWT，还有一个 blog post on its implementation on the Aurelia blog as well。

【参考方案2】：

这是一个示例拦截器，它从响应标头中读取令牌（如果存在）并在每个需要它的请求上自动设置它。

import Interceptor, HttpResponseMessage, RequestMessage from "aurelia-http-client";

class CsrfHeaderInterceptor implements Interceptor 
  private static readonly TOKEN_HEADER = 'X-CSRF-Token';

  private latestCsrfToken: string;

  response(response: HttpResponseMessage): HttpResponseMessage 
    if (response.headers.has(CsrfHeaderInterceptor.TOKEN_HEADER)) 
      this.latestCsrfToken = response.headers.get(CsrfHeaderInterceptor.TOKEN_HEADER);
    
    return response;
  

  request(request: RequestMessage): RequestMessage 
    if (this.latestCsrfToken) 
      if (['POST', 'PUT', 'PATCH'].indexOf(request.method) >= 0) 
        request.headers.add(CsrfHeaderInterceptor.TOKEN_HEADER, this.latestCsrfToken);
      
    
    return request;
  

您在 http/fetch 客户端中注册它，例如：

httpClient.configure((config) => 
  config
    .withBaseUrl("/api/") // adjust to your needs
    .withHeader('Accept', 'application/json') // adjust to your needs
    .withHeader('X-Requested-With', 'XMLHttpRequest') // adjust to your needs
    .withInterceptor(new CsrfHeaderInterceptor());
);