[GAS] WEBアプリはフォームの多重送信に注意。特にスマホを使う場合。

Google Apps Script (GAS) はWEBアプリケーションを簡単に作成できるため、改善活動レベルで業務アプリをサクサク構築できます。JavaScript (JS)とHTMLを多少勉強する必要がありますが、業務の自動化を推進する上で強力なツールです。

GASではGET、POSTに対応する処理を行って、対応するHTMLを返すことができます。これをWEBアプリケーションと呼びます。WEBアプリの活用方法として、自作のフォームを使って依頼や連絡、申請の手続きを自動化したいと考える場面もあるでしょう。ここで気を付けたいのが、多重送信の防止です。

WEBアプリを操作する場合、ブラウザの戻る・進むの動作によって、GASに届けたい情報(パラメータ)を送るページを意図せず複数回開いてしまう可能性があります。注文のような1回だけ送りたい情報が何度も送られるようでは混乱を招くので、情報の多重送信を防ぐ仕組みの導入が必要です。
スマホを使う場合は、より多重送信への注意が必要です。PCから操作する場合、余計なタブを閉じたりPCをシャットダウンする際にブラウザも終了されるため、ブラウザの戻る・進むくらいしか意図せずページを開く可能性はありません。ところが、スマホの場合はアプリを終了しない、スマホの電源も切らないで運用されることが多く、多重送信の問題が生じやすい状況です。たとえば、ブラウザのアプリで複数のタブを開いた状態でスマホのホームボタンを押してもアプリが終了されるわけではありません。再度アプリを開いた時点でタブに残っていたページにブラウザがアクセスしようとして、前回アクセスしたときと同じリクエストを出してしまいます。

GETリクエストではURLにパラメータを含むので、同じURLにアクセスすれば同じパラメータが送信されます。別のURLに遷移させない限り、同じURLにアクセスするのを防がないと多重送信が生じます。

POSTリクエストでは、送信されるパラメータがURLに含まれないので、最後に表示されているのがPOSTリクエストへ応答してGASが生成したHTMLだということを忘れてしまうかもしれません。ブラウザ側はPOSTリクエストを覚えていて、再度その画面を開いたときにPOSTリクエストを再送してしまいます。PCでChromeなどブラウザを使っていると戻る・進むによってPOSTリクエストを送る場合に警告が出る場合がありますが、前述したスマホのタブでは警告もなくPOSTリクエストが再送されてしまいます。

多重送信の対策方法は、さいきょうの二重サブミット対策など様々な場所でまとめられています。
まず検討したいのが、GASが受け取るリクエストが過去のリクエストと同一でないか確認できる機構(トークンチェック)を組み込むことです。簡単には、フォームを含むページにアクセスしたときにトークンを発行し、formのhiddenにした要素を使ってほかの回答と一緒にトークンが送信されるようにします。送信されたトークンを過去のトークン(どこかに貯めておく)と比較して、過去に同じトークンを持った回答が送信されていない場合に次の処理に進むようにすれば、多重送信を弾けます。
トークンチェックで多重送信を検知したときに、安易にエラーページを表示するのはかえって危険です。ユーザーが送信に失敗したと思って、最初からフォームの送信作業をやり直すかもしれません。これは正規な手続きなので内容が同じであっても多重送信ではないためシステム側で検出することはできません。トークンチェックで多重送信を検出した場合は、あたかも送信に成功したかのように見せておくとユーザーの勘違いを防げます。

このほかに、フォームの送信ボタンを画面が更新される何度も押すという形の多重送信もあります。この場合はJavaScriptでフォームのボタンを無効にすることで、ボタンを複数回押せなくする方法で対策できます。formタグにonSubmitで回答送信ボタンがdisableになるJavaScriptを仕込むことで実現できます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください