如何在基于 angular 的 cordova 应用程序中正确处理 X-CSRF-TOKEN？

Question

我有一个 Angular (v10) WebApp，它通过在我的导入中使用 HttpClientXsrfModule 来正确处理 X-CSRF-TOKEN cookie，如 Angular Guide 中所述，即:

  // app.module.ts
HttpClientModule,
HttpClientXsrfModule.withOptions({
  cookieName: 'XSRF-TOKEN',
  headerName: 'X-XSRF-TOKEN',
}),

并在我的服务请求中设置相对路径，例如：

  // some service.ts
  public deleteX(x_id: number): Observable<any> {
      return this.httpClient.delete(`api/X/${x_id}`);
  }

现在，浏览器本身会处理从服务器获取令牌并通过每个后续 POST/DELETE/PUT/PATCH 请求成功发送令牌。

但是，如果我现在使用 cordova 将应用程序编译为 Android 应用程序，该应用程序会向 file:///android_asset/www/api/X/1068 发送一个请求（x_id=1068）。我可以修改我的 http 服务以轻松使用特定于平台的 absolute/relative 路径，例如：

  // some service.ts
  public deleteX(x_id: number): Observable<any> {
    if (this.cordovaService.platform === CordovaService.PLATFORM_ANDROID) {
      return this.httpClient.delete(`${environment.baseUrl}/api/X/${x_id}`);
    } else {
      return this.httpClient.delete(`api/X/${x_id}`);
    }
  }

但是 Android 应用程序对我的请求的响应是

error: "access_denied"
error_description: "Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-XSRF-TOKEN'."

我能做什么，为我的 cordova 编译的 Android 应用程序添加正确的 X-XSRF-TOKEN 处理？

Answer 1

我最终使用了 cordova-plugin-advanced-http, that is offering a response-cookie-fetching opportunity described here。我创建了一个 generic-http-service 包含每个 HTTP 方法（GET、HEAD、PATCH、PUT、POST、DELETE）的通用方法，这是首先检查运行平台和然后转发调整后的请求。

通用 GET (pseudo-code) 示例：

// generic-http-service.ts
   
public get<T>(url: string, queryParams?: any): Observable<T> {
   if (this.cordovaService.platform === CordovaService.PLATFORM_ANDROID) {
       // android-specific solution
       // 1. adjust params
       // 2. set general headers + the XSRF-TOKEN from the previous sendt request
       // 3. return Observable(obs) {
       // 4. send:
       cordova.plugin.http.get(`${environment.baseUrl}/${url}`, adjustedParams, adjustedHeaders, 
              successResponse => { 
                  // 5. fetch & save XSRF-TOKEN
                  obs.next(JSON.parse(successResponse.data) as T);
              }, errorResponse => { 
                  obs.error(errorResponse);
              })
       }
   } else {
       // web-specific solution based on the angular guide
       return this.httpClient.get(`${url}`);
   }
}

后来我只需要稍微调整一下我的服务。

如何在基于 angular 的 cordova 应用程序中正确处理 X-CSRF-TOKEN？

How to handle X-CSRF-TOKEN correctly in an angular-based cordova app?

android

angular

cordova

csrf