1
2

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.

【Spring】【Thymeleaf】CSRFトークンを入れる

Posted at

###formやbuttonをカスタマイズしていると、送信先やCSRFトークンが入らなくて遷移できなかった
thymeleafを利用して

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

のように@{}を使ってaction属性を書けば、自動的にCSRFトークンがhiddenで入る

つまり

<form action="url" method="post">

では、CSRFトークンは入らない。
なのでこの状態でsubmitしても遷移できなかった。

###button毎に送信先を変える手法だと、CSRFトークンが入らない

<form th:action="url" method="post">
<button type="button" onClick="submit();" th:formaction="@{url2}">
</form>

のようにして、jQueryのsubmit関数を利用すると、formタグのaction属性のurl先に対して提出されるみたい。

つまり、`th:formaction="@{url2}'とすればトークンが入ると思ったら駄目でした。

###対策

<form th:action="url" method="post">
// ↓これを追加すればトークンが入る。つまり手動でトークンを入れる
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<button type="button" onClick="submit();" th:formaction="@{url2}">
</form>

scriptを書いてどうにか書けないかなといろいろ試しましたがうまく行かなかったので、とりあえず手動で入れておけばbuttonを増やしても問題なさそうな気がします。

ただ、th:formactionも効かず、formのaction属性がsubmit先になります。

###submit()を変更してsubmit先を変更する


<button type="button" onClick="setAction("好きなURL");">

<script type="text/javascript">
function setAction(url){
  $('form').attr('action', url); // action属性に引数のurlをセット
  $('form').submit(); // submitを実行(上でaction属性を変えたので、そこがsubmit先になる!)
}
</script>

これで、buttonを増やしてsubmit先を複数用意することも可能になると思われます。

もっと良い方法があれば教えていただきたいですm(__)m

1
2
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
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?