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に対応できる。