Spring Security + Thymeleaf + Mithril.js で CSRF対策トークンを適用

Spring Security + ThymeleafでAjaxリクエストにCSRF対策トークンを適用 を参考に Mithril.js の場合をメモしておく。

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

ここは、上記のリンクと同様、Thymeleaf テンプレートに以下を追加する。

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

HTML5 を使用したい場合は、th:content の代わりに data-th-content 属性を使用する。

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

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

Mithril.js でリクエストを投げる例

// リクエストヘッダの準備
var headers = {};
var token = document.querySelector("meta[name='_csrf']").getAttribute("content");
var header = document.querySelector("meta[name='_csrf_header']").getAttribute("content");
headers[header] = token;

// DELETE リクエスト
m.request({
	method: "DELETE",
	url: "/organizations/" + item.organizationId,
	withCredentials: true,
	headers: headers
}).then(function (result) {
	console.log(result);
})

参考文献

• Spring Security + ThymeleafでAjaxリクエストにCSRF対策トークンを適用
• 【javascript】オブジェクトにプロパティを追加する - Qiita