JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

投稿日：2018年5月31日

1 はじめに
2 実装
- 2.1 なぜエラーが発生したか
- 2.2 修正後のコード
3 さいごに

はじめに

RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを利用すると思いますが、JavaScriptのみでPOSTリクエストを送らなければならないケースに遭遇しました。
本記事はこの際に発生した「401 Unauthorized」エラー対応のTIPSです。

実装

なぜエラーが発生したか

下記の様なコードでPOSTリクエストを送ると「401 Unauthorized」エラーが発生します。

function testRequest(){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState==4 && this.status==200) {
      location.href = '/';
    }
  };
  xhr.responseType = 'json';
  xhr.open('POST', '/something.json', true);
  xhr.send();
}

function testRequest(){

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (this.readyState==4 && this.status==200) {

location.href = '/';

}

};

xhr.responseType = 'json';

xhr.open('POST', '/something.json', true);

xhr.send();

}

エラーが発生した理由は簡単でCSRFトークンを送っていないからです。

修正後のコード

このエラーについて、head内のCSRFトークンをリクエストヘッダに含めることで対応しました。
修正後のコードは下記のとおりです。

function testRequest(){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState==4 && this.status==200) {
      location.href = '/';
    }
  };
  var token = document.getElementsByName('csrf-token').item(0).content; // 追加
  xhr.responseType = 'json';
  xhr.open('POST', '/something.json', true);
  xhr.setRequestHeader('X-CSRF-Token', token); // 追加
  xhr.send();
}

function testRequest(){

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (this.readyState==4 && this.status==200) {

location.href = '/';

}

};

var token = document.getElementsByName('csrf-token').item(0).content; // 追加

xhr.responseType = 'json';

xhr.open('POST', '/something.json', true);

xhr.setRequestHeader('X-CSRF-Token', token); // 追加

xhr.send();

}

さいごに

Railsアプリケーション内のJavaScriptのみでPOSTリクエスト送る場合のCSRFトークンの認証に関するTIPSを紹介しました。

日	月	火	水	木	金	土
« 4月				6月 »
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

はじめに

実装

なぜエラーが発生したか

修正後のコード

さいごに

フォロー

アプリ情報