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

はじめに

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();
}

エラーが発生した理由は簡単で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();
}

さいごに

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