0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

AjaxのPOSTでデータを送信しようとしてうまくいかないとき

Posted at

大参考にさせていただきました
ajaxのPOST送信で403が返却される場合の対処方法

###環境

spring boot
spring security
thymeleaf

###SpringSecurityを使っているときはCSRFトークンが必要
SpringSecurityを使ってログイン機能を作った場合、そのアプリケーション全体でCSRF対策が有効になる

すごくシンプルに言うと、

POSTメソッドを使うときは、入力データだけじゃなくてCSRFトークンも送らないとアクセス禁止になる!

###th:actionでトークンが自動で挿入される

参考

Ajaxじゃなくて普通にformで画面遷移する場合は、

<form th:action="@{hoge}" method="post">

</form>

のように書けば

<form action="/login" method="post">
    <!-- Spring MVCの機能と連携して出力されたCSRFトークン値のhidden項目 -->
    <input type="hidden"
        name="_csrf" value="63845086-6b57-4261-8440-97a3c6fa6b99" />
    <!-- omitted -->
</form>

超便利!!

###でもAjaxのときは自動で生成されず、Forbiddenが返ってくる

chromeのデベロッパーツールでヘッダーを確認してみると、

image.png

403のステータスコード。アクセスしたらアカンって言われてる。

俺がええって言うてんのに!

SpringSecurityが勝手に「だってCSRFトークンないからあきまへん」って頑なになっとるんですな。

###CSRFトークンを手動でAjaxのヘッダーにセットする


// htmlファイルの最後にCSRFをセット
// ちょっと変な場所
</body>
<meta th:name="_csrf" th:content="${_csrf.token}"/>
<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
</html>
</body>の直前だとエラーになります。

ちょっと変な場所だけど、ここじゃないとダメでした

<head>の中に書いても読み込まれません

テンプレートエンジンを利用している場合、layoutファイルに次の様な書いてある場合は、個別のhtmlファイルにmetaを挿入しても読み込まれない

<head xmlns:th="http://www.thymeleaf.org"
	th:fragment="base_header(title, scripts, links)">


base_header(title, scripts, links)
この部分で、個別のファイルで<head>の中に書いてある
title
script
link
は読み込めるようになっている

metaはない → headにmetaを追加してもCSRFトークンはセットできない

###postで403が返ってきたらCSRFトークンが送信できているか確認しよう!

これほんと初歩でしょうけど。

これで丸一日かかってしまいました。。。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?