ユーザーがフォームを繰り返し送信するのを防ぐ方法の概要

ユーザーがフォームを繰り返し送信するのを防ぐ方法の概要

重複したフォーム送信は、マルチユーザー Web アプリケーションで最も一般的で厄介な問題です。重複送信の問題が発生する可能性があるアプリケーション シナリオは多数あります。たとえば、次のようになります。

[送信] ボタンを 2 回クリックします。 「更新」ボタンをクリックします。 ブラウザの戻るボタンを使用して前の操作を繰り返すと、フォームの送信が重複して発生します。 ブラウザの履歴を使用して、フォームを繰り返し送信します。 ブラウザは HTTP リクエストを繰り返します。

フォームの重複送信を防ぐいくつかの方法

1. 送信ボタンを無効にします。フォームが送信された後に送信ボタンを無効にするには、Javascript を使用します。このアプローチにより、せっかちなユーザーがボタンを複数回クリックするのを防ぐことができます。しかし、問題があります。クライアントが Javascript を無効にしている場合、このメソッドは無効になります。

前回の記事で、いくつかの Jquery プラグインを使用すると良い効果が得られる可能性があると述べました。

2.Post/Redirect/Getモード。送信後にページ リダイレクトを実行することを、Post-Redirect-Get (PRG) パターンと呼びます。つまり、ユーザーがフォームを送信すると、送信成功情報ページへのクライアント側リダイレクトが実行されます。

これにより、ユーザーが F5 キーを押すことで発生する繰り返しの送信を回避でき、ブラウザー フォームを繰り返し送信しても警告が表示されなくなります。また、ブラウザーの進むボタンと戻るボタンを押すことで発生する同じ問題も解消されます。

3. セッションに特別なフラグを保存します。フォーム ページが要求されると、特殊な文字列が生成され、セッションに保存され、フォームの隠しフィールドに配置されます。フォーム データを受け入れて処理するときに、識別文字列が存在するかどうかを確認し、すぐにセッションから削除してから、データを通常どおり処理します。

フォーム送信に有効なフラグ文字列がないことが判明した場合、フォームは送信されており、送信は無視されることを意味します。

これにより、Web アプリケーションにさらに高度なレベルの XSRF 保護が提供されます。

4. データベースに制約を追加します。データの重複を防ぐには、データベースに一意の制約を追加するか、一意のインデックスを作成します。これは、データの重複送信を防ぐ最も効果的な方法です。

以上が4つの方法の紹介です。より良い解決策があればぜひ教えてください。この記事は今後も更新されていきます。

<<:  IE6、IE7、IE8 で CSS3 の丸い角と影のスタイルをサポートする

>>:  親要素に対する CSS 子要素の固定配置ソリューションの詳細な説明

推薦する

Vue3 のウォッチの使用方法とベストプラクティスガイド

目次序文🌟 1. APIの紹介2. 複数のデータソースの監視3. リスニングアレイ4. 監視対象5....

JSのバイナリファミリーについての簡単な説明

目次概要ブロブBlob の動作BLOB ダウンロード ファイルブロブ画像のローカル表示BLOB ファ...

MySQL の遅いクエリの最適化方法と最適化の原則

1. 日付のサイズを比較するには、XML に渡される日付形式は 'yyyy-MM-dd...

フォーム要素の垂直方向の中央揃えに最適なソリューション

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

Linux 上でプライベート Git サーバーを構築するための詳細なチュートリアル

1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...

MySQL の複数テーブル関連付け 1 対多クエリを使用して最新のデータを取得する方法の例

この記事では、MySQL で複数のテーブルを使用して 1 対多のクエリを使用して最新のデータを取得す...

jsはポップアップウィンドウをクリックすることでポップアップログインボックスを実装します

この記事では、ポップアップウィンドウをクリックしたときにポップアップログインボックスを実現するための...

Echatsチャートの大画面適応を実装する方法

目次説明する成し遂げるプロジェクトのディレクトリ構造は次のとおりです。効果図は以下のとおりです要約す...

CSS は Alibaba ベクター ライブラリを使用して、対応する位置に見栄えの良いアイコン効果をすばやく追加します (サンプル コード)

Alibaba ベクターアイコンライブラリにアクセスAlibaba ベクターアイコンライブラリ好き...

Linux仮想マシンの静的IPアドレスを構成するための手順を完了します

序文多くの場合、仮想マシンを使用します。たとえば、一部のテストは検出されません。何かを壊すことを心配...

オペレーターが知っておくべき 18 個の Nginx プロキシ キャッシュ構成のヒント (どれを知っていますか?)

アプリケーションや Web サイトのパフォーマンスが成功の重要な要素であることは誰もが知っています。...

ubuntu18.04 での qt5.12.8 のインストールと環境設定に関する詳細なチュートリアル

環境システム: Ubuntu 18.04ソフトウェア: qt5.12.8 1. インストールパッケー...

ページに間隔を空けてグリッドレイアウトを完璧に実装する方法

典型的なレイアウト例上の写真のように、正方形の真ん中に一定の隙間があり、その隙間は固定されています。...

ウェブ標準学習リソースの素晴らしいコレクション

これらの仕様は、下位互換性のあるドキュメントを Web 上で公開し、できるだけ幅広いユーザーがアクセ...

JS はシンプルなブロック崩しピンボールゲームを実装します

この記事では、ブロック崩しピンボールゲームを実装するためのJSの具体的なコードを参考までに紹介します...