こんにちは、Webプログラマの篠田です。
Laravelで、フォームを作成したときに、うまく次の画面が表示されないという現象が発生することがあります。
今日は、その1つの原因について、まとめていきます。
開発環境
・Laravel5.6
・Twig2.x
症状
症状としては、フォーム画面で「submit」ボタンをクリックすると下記のようなメッセージが表示されました。
|
1 2 |
The page has expired due to inactivity. Please refresh and try again. |
エラーを翻訳する
表示されたメッセージをGoogle翻訳に通したところ、下記のようなメッセージということがわかりました。
|
1 2 |
ページが非アクティブなために期限切れになっています。 リフレッシュしてもう一度お試しください。 |
どうやらPOST先が、有効期限切れを起しているようです。
セッションは使っていないので、有効期限切れを起こすようなものはないはず…..
原因
実は、セッション以外にも「有効期限」が設けられている設定があります。
それが「CSRF（クロス・サイト・リクエスト・フォージェリ）」のトークン設定です。
CSRFとは
CSRFとは、本来経由しないといけないフォームを経由せずに、データを登録される攻撃のことをいいます。
CSRF設定がどう影響したのか
Laravelでは、初期設定で「CSRF」トークンの有効チェックが、ミドルウェアで行われます。
ミドルウェアチェック時に、「CSRF」トークンの有効期限が切れていると、それ以降の処理をすべて停止します。
そして、先程のメッセージ「The page has expired due to inactivity. Please refresh and try again.」が表示されるという仕組みです。
CSRF対応方法
対応方法は、POST送信するformタグの中に「CSRF」トークンをhiddenデータとして送ることで解決します。
具体的にどのようにして「CSRF」トークンを設置するかというと、Twig側で「csrf_field()」という関数を呼び出すだけでOKです。
|
1 2 3 4 |
<form action="/complete/" method="post"> {{ csrf_field() }} <button type="submit">送信</button> </form> |
tiwgが出力するソースコードをみると下記のように表示されます。
|
1 2 3 4 |
<form action="/complete/" method="post"> <input type="hidden" name="_token" value="aADWx0ouaqEr3GZSSKIutk9TwAHr0ArxxVKwOyAH"> <button type="submit">送信</button> </form> |
これで、フォームに「CSRF」対策が施されたので、フォームを送信することができるようになります。
まとめ
Laravelの「初期設定」に、悩まされてしまいましたが「CSRF」対策を簡単にできる仕組みは魅力的ですね。
※Laravelに限った話ではないですが..
癖を知っていれば、回避できる問題なのでこの機会に是非、覚えてみてはどうでしょうか。
現場の業務フローに寄り添ったWebシステムをお求めなら、私たちALAKIにご相談ください。
ALAKIは経営者様が感じている問題点と、実際にWebシステムを利用される現場スタッフ様が直面している課題を、弊社システムエンジニアが丁寧に聞き取り、お客様と共にシステムを作り上げていきます。
業務改善が実現できるWebシステムをお求めの方は、是非ALAKIにご相談ください。
