Angular 13 来自页面 META 标记的 CSRF 令牌

Question

我有 Angular 13 个应用程序和后端在 rails 上使用 ruby。根据 Angular 文档 https://angular.io/api/common/http/HttpClientXsrfModule#description，我应该能够简单地使用 HttpClientXsrfModule 进行 XSRF 保护。它有 cookieName 和 headerName 的可选设置。问题是在我的例子中没有 CSRF cookie，令牌存储在页眉 META 标记中。这就是为什么我认为不可能像文档中所说的那样使用 HttpClientXsrfModule。

相反，我将实现一个自定义拦截器，但是我不知道如何在 Angular 自定义拦截器中获取 META 标记值。 https://angular.io/guide/http#intercepting-requests-and-responses

请指教如何在 Angular 拦截器中获取页眉 META 标记值：

import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()
export class NoopInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    req = req.clone({
            setHeaders: { 'X-CSRF-TOKEN': ...how to get it... }
        });
    return next.handle(req);
  }
}

Answer 1

Angular提供Meta服务，使用这个我们可以获取meta元素。

import { Meta } from '@angular/platform-browser';
import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()
export class NoopInterceptor implements HttpInterceptor {
  constructor(private meta:Meta){
    console.log(this.meta.getTag('name="csrf-token"').content);
  }
  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    req = req.clone({
            setHeaders: { 'X-CSRF-TOKEN': this.meta.getTag('name="csrf-token"').content }
        });
    return next.handle(req);
  }
}

Angular 13 来自页面 META 标记的 CSRF 令牌

Angular 13 CSRF Token from page META tag

ruby-on-rails

angular

interceptor

angular12

angular13