フロントエンドに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 を取得する必要がありますか? または、他の何か?
修正方法を教えてください。