Spring Security + ThymeleafでAjaxリクエストにCSRF対策トークンを適用

フォームでPOSTする時はSpring Security + Thymeleafを使えば簡単にトークンを埋め込むことができる。
しかしAjaxでリクエストする時に困ったので調べてみた。

トークンをメタタグへ埋め込み

まずはThymeleafのテンプレートに以下のように、メタタグにトークンを埋め込む。

<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>

リクエストヘッダにトークンをセット

トークンをリクエストヘッダにセットして、Ajaxを呼び出す。
jQueryの場合は以下のように実装する。

( function ( $ ) {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    $(document).ajaxSend(function(e, xhr, options) {
      xhr.setRequestHeader(header, token);
    });

    $.ajax({
      type: "POST",
      dataType: "json",
      url: "/SampleAPI",
      data: null,
    }).done(function(response, textStatus, jqXHR ) {
      // Todo success process
    }).fail(function(jqXHR, textStatus, errorThrown) {
      alert("Failed.");
  });
} )( jQuery );

ajaxSend()を設定しておけば、ページ内のすべてのAjaxに対応できる。

参考

関連記事


  1. 一部のパスだけSpring SecurityのCSRF対策を無効化する
  2. SRIによってCDN上のスクリプト改ざんを検知する
  3. OpenSSL+パスワードでファイルの暗号化/復号処理
  4. TrueCryptのレビューレポートを読んでみた
  5. Google ChromeのSSL/TLS暗号化アルゴリズム設定

tosi avatar
tosi
Web Application Engineer, Java / Spring / Azure / GCP
comments powered by Disqus