AS400/IBMi Laravel Ajax通信 エラー419 CSRFトークンの設置 JavaScript

IT関連

基本私の記事はIBMi/AS400をベースにやっています。ご了承のほど。

 

LaravalではPOST通信時にCSRFトークンを送らないといけないのはすでに知っている。

 

なのでFormを設置時に下記のように{{ csrf_field }}を入れないといけない。

これを入れる理由はセキュリティのため。クロスサイトリクエストフォージェリ対策。詳しくはググってほしい。

<form action="{{ url('hogehoge/post')}}" method="POST">
  {{ csrf_field() }}
  <input type="text" name="hoge">
  <input type="submit">
</form>

 

この{{ csrf_field }}は、実際には下記のようなものが吐き出される。これがないとPOST時にLaravel大先生から怒られてしまう。

<input type="hidden" name="_token" value="JOLyzlbt********anpDvE6PkyxnUaLw">

 

 

今回Ajax通信をしようとしてみた。

 

詳細は割愛するとして、こんな感じでPOSTで通信するわけだが、CSRF対策を何もせずにやると当然のごとくエラーになる。

// Ajax通信
let xhr = new XMLHttpRequest();

// パス
xhr.open('post','{{url('testajaxjq/')}}',true);

 

そのときブラウザのコンソールに出るエラーコードは419。

これはいわずとしれたCSRF対策、前述のものが出来ていないと怒られている。

 

 

しからばどう書けばいいのか。

 

書き方は、request.setRequestHeaderにそれを書いてあげる。

xhr.setRequestHeader('X-CSRF-TOKEN','{{ csrf_token() }}');

こう書く。{{ csrf_field }}にすれば<input>から</input>まで要素から全てが生成されるが、{{ csrf_token() }}にすればさっきの

 

JOLyzlbt********anpDvE6PkyxnUaLw

の部分だけが吐き出されるわけですね。

 

なので、結果的に、

xhr.setRequestHeader('X-CSRF-TOKEN','JOLyzlbt********anpDvE6PkyxnUaLw');

といった形で収まり、うまくいく。

 

jQueryの書き方はこんな感じ

$.ajax({
  headers: {
  'X-CSRF-TOKEN' : '{{csrf_token()}}',
  },
  type: "POST",
  以下略..

 

 

別解

JavaScriptは別ファイルにすると思いますが、そうなってくるとJavaScriptコードの中で{{ csrf_token() }}が使えないので、

 

Bladeのヘッダー部に

 <meta id="csrf-token" content="{{ csrf_token() }}">

とメタデータで入力しておき、

 

こうやって取得するしかないのかも。

let csrf = document.getElementById('csrf-token').content;
xhr.setRequestHeader('X-CSRF-TOKEN','csrf');

 

下記はその場合のjQueryの書き方。

$.ajax({
  headers: {
    'X-CSRF-TOKEN': $('meta[id="csrf-token"]').attr('content')
  },
  type: "POST",
  以下略...

 

 

Ajax通信の決まり事も割愛させていただきますが、Laravel/IBMi/Ajaxの通信の仕方は追々記事にする予定です。

コメント

タイトルとURLをコピーしました