HttpClientXsrfModuleで設定したヘッダがリクエストに反映されない

質問するのは初めてのAngular初心者です。
APIサーバからCookieで

cookie: csrftoken=KLQT7vh4XcaC2vOawPKsW2cngqR0Vc63gGrniDezHw0CaipNOLryeEdEaQgk4nmo; sessionid=z1xoa5m66r30f6yra4i2hlhbbymet4ix

こんな感じでレスポンスされたcsrftokenというキーのCSRF用トークンを、HttpClientXsrfModuleの機能で次のリクエストに含めたいです。
(このCookieはChromeの開発者ツールで確認したものです)

app.module.tsに下記のように定義しているので、X-CSRFTokenというキーでリクエストヘッダに乗って欲しいのですが、乗ってくれず困っています。
これ以外に必要な設定など、なにか原因思い当たりましたら、ご助言お願い致します。

環境
Angular8 (AWSのEC2上のnginx1.12.2とgunicornで稼働)

import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
...
...
@NgModule({
  declarations: [
    AppComponent,
...
...
  ],
  imports: [
...
...
    HttpClientXsrfModule.withOptions({
      cookieName: 'csrftoken',
      headerName: 'X-CSRFToken',
    }),
...
...
  ],
  providers: [
...
...
  ],
  bootstrap: [AppComponent]
})
1 Like

https://angular.jp/guide/http#セキュリティ-xsrfプロテクション

まず確認ですが、サーバーからセットされるXSRF-TOKENのCookieは httpOnly属性がfalseになっていますか? Angularから読み取るため、JavaScriptからアクセス可能である必要があります。

また、上記ドキュメントにもありますが、Angularがトークンのヘッダをセットするのは URLが相対パス かつ GET, HEAD 以外 のリクエストに限られます。

それ以外のケースだと、HttpClientのHttpInterceptor機能を使って自分でヘッダーを付与することができます。

こちらが参考になると思います。

lacolacoさん早速ありがとうございます!
ご指摘の件、認識してなかったので、確認してまたご報告致します。

1 Like

URLを絶対パスにしていたのが原因でした。ありがとうございました!

1 Like