2

フロントエンドにAngular 6、バックエンドにAdonisjsを使用してSPAを作成しています。

そして今、問題のcsrfに行き詰まりました。adonis/config/shield.js で csrf を無効にすると、タスクは完了です。しかし、csrf を無効にしたくありません。

Angular HttpInterceptor の使用に関するインターネット上のいくつかの提案に従いましたが、まだ機能しません。

これがshield.jsのcsrf構成です

csrf: {
enable: true,
methods: ['POST', 'PUT', 'DELETE'],
filterUris: ['/api/auth/signin'],
cookieOptions: {
  httpOnly: false,
  sameSite: true,
  path: '/',
  maxAge: 7200
}
// compareHostAndOrigin: true}

そして、これが私の token-interceptor.service.ts です

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

@Injectable()
export class TokenInterceptorService implements HttpInterceptor {
  constructor(private tokenExtractor: HttpXsrfTokenExtractor) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const headerName = 'XSRF-TOKEN';
    const respHeaderName = 'X-XSRF-TOKEN';
    const token = this.tokenExtractor.getToken() as string;
    if (token !== null && !req.headers.has(headerName)) {
      req = req.clone({ headers: req.headers.set(respHeaderName, token) });
    }
    return next.handle(req);

  }
}

そして、Angular が Http をインターセプトするかどうかはわかりません。私のリクエストでは、X-XSRF-TOKEN ヘッダーが表示されないためです。

そして、Adonisjs が使用するトークンについてはまだ混乱しています。ログインしconsole.log(request.csrfToken)て値を取得すると、値がデータベースのトークンと異なるためです(mongoDBを使用しています)。

アプリを開いた最初から csrf を取得する必要がありますか? または、他の何か?

修正方法を教えてください。

4

0 に答える 0