WARNING: Can't verify CSRF token authenticity が出たときの対応

技術系の記事は割と検索エンジンから人が来る要員（要因）になるらしいのでこの前引っかかった箇所をメモ。

RailsではPOSTで情報を送るとき、自動的にCSRF防止用のワンタイムトークンが添加されるようになっている。
普通にコントローラで定義したメソッドを行き来する場合は意識する必要は無いんだけど、jQueryを用いたAjaxでアレコレするときは手動で追加しないとタイトルのようなWARNINGが出てそのまま送信に失敗する場合がある。

そんなときはこうする。

$(function() {
  var data = {"authenticity_token":$("*[name=authenticity_token]").val()};
  $('#hoge').click(function() {
    $.ajax({
      url: "/hoge/huga", 
      type: "POST", 
      data: data,
      dataType : 'script',
      error: function() {
        alert("通信エラーが発生しました。時間をおいてもう一度操作をおこなってください。"); 
      }
    });
    return false;
  });
});

.val()で取ってきた値をそのまま文字列に結合すると、トークン文字列内の+(プラス)記号が半角スペースとしてエスケープされてしまい、本来のトークン文字列と一致しなくなってしまう。
そのため、.ajax()内のdataに直書きするのではなく、前もって準備しておく。

// こうじゃなくて
data = "hoge=huga";
// こう書く
data = {"hoge":"huga"};

ただ、何も書かなくてもWARNINGが出ずに普通に通る場合もある。謎。

参考

jquery-uiのdrag入替時にRails on ajaxで更新したい - うんたらかんたら日記