Spring + Thymeleaf + AjaxのCSRF適用

今回は、Spring + Thymeleaf + AjaxでCsrfトークンをやり取りする方法についてメモしていこうと思います。

HTMLのMETA情報を記述しよう

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

• headタグに上記のソースコードを追加します。
• トークンとヘッダー名を保存します。

Ajaxリクエストヘッダーにトークンを追加する

    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を呼ぶ前に上記のソースコードを追加しましょう。
• ヘッダーにトークンとヘッダー情報を追加するロジックです。

これで終わりです。簡単ですよねw

終わりに

Spring security設定でcsrf設定をを無効にすると上記のコードはいらないですが、セキュリティ的に悪いので、上記の方法でやり取りしましょう。