Empêcher la resoumission de formulaires

La première page contient un formulaire HTML. Page deux – le code qui gère les données soumises.

Le formulaire de la première page est soumis. Le navigateur est redirigé vers la page deux. La page deux gère les données soumises.

À ce stade, si la page deux est actualisée, une alerte “Confirmer la soumission de nouveau formulaire” apparaît.

Est-ce que cela peut être empêché?

Il y a 2 approches que les gens prenaient ici:

Méthode 1: Utiliser la redirection AJAX +

De cette façon, vous publiez votre formulaire en arrière-plan à l’aide de JQuery ou de quelque chose de similaire à Page2, tandis que l’utilisateur voit toujours la page1 affichée. En cas de publication réussie, vous redirigez le navigateur vers Page2.

Méthode 2: publier + redirect vers soi

C’est une technique courante sur les forums. Formulaire sur Page1 publie les données sur Page2, Page2 traite les données et fait ce qui doit être fait, puis effectue une redirection HTTP sur lui-même. Ainsi, la dernière “action” dont le navigateur se souvient est un simple GET à la page 2, de sorte que le formulaire n’est pas soumis à nouveau sur F5.

Vous devez utiliser PRG – Post / Redirect / Get pattern et vous venez de mettre en œuvre le P de PRG. Vous devez redirect . (Maintenant, vous n’avez plus besoin de redirection. Voir ceci )

PRG est un modèle de conception de développement Web qui empêche certaines soumissions de formulaires en double, ce qui signifie Soumettre le formulaire (Post Request 1) -> Redirect -> Get (Request 2)

Under the hood 

Code d’état de la redirection – HTTP 1.0 avec HTTP 302 ou HTTP 1.1 avec HTTP 303

Une réponse HTTP avec le code d’état de la redirection fournira en outre une URL dans le champ d’en-tête de l’emplacement. L’agent utilisateur (par exemple, un navigateur Web) est invité par une réponse avec ce code à faire une deuxième demande, identique par ailleurs, à la nouvelle URL spécifiée dans le champ Emplacement.

Le code d’état de la redirection est destiné à garantir que, dans cette situation, le navigateur de l’utilisateur Web peut actualiser en toute sécurité la réponse du serveur sans provoquer la nouvelle soumission de la demande HTTP POST initiale.

 Double Submit Problem 

Problème de double envoi

 Post/Redirect/Get Solution 

Post / Redirect / Get Solution

La source

Directement, vous ne pouvez pas, et c’est une bonne chose. L’alerte du navigateur est là pour une raison. Ce fil devrait répondre à votre question:

Empêcher le bouton Retour d’afficher une alerte de confirmation POST

Deux solutions principales suggérées étaient le modèle PRG et une soumission AJAX suivie d’une relocalisation de script.

Notez que si votre méthode permet une méthode GET et non une soumission POST, cela résoudrait le problème et correspondrait mieux à la convention. Ces solutions sont fournies en supposant que vous souhaitez / devez envoyer des données.

Le seul moyen d’être sûr à 100% que le même formulaire ne sera jamais soumis deux fois est d’intégrer un identifiant unique dans chacun de vos formulaires et de suivre ceux qui ont été envoyés sur le serveur. L’écueil est que si l’utilisateur sauvegarde sur la page où le formulaire était et entre de nouvelles données, le même formulaire ne fonctionnera pas.

La réponse comporte deux parties:

  1. Assurez-vous que les messages en double ne gênent pas vos données côté serveur. Pour ce faire, intégrez un identifiant unique dans le message afin de pouvoir rejeter les requêtes ultérieures côté serveur. Ce modèle est appelé récepteur Idempotent dans les termes de messagerie.

  2. Assurez-vous que l’utilisateur ne soit pas dérangé par la possibilité de soumettre en double les deux

    • redirect vers un GET après le POST (modèle GET de redirection POST)
    • désactiver le bouton en utilisant javascript

Rien de ce que vous faites sous 2. n’empêchera totalement les soumissions en double. Les gens peuvent cliquer très rapidement et les pirates peuvent poster quand même. Vous avez toujours besoin de 1. si vous voulez être absolument sûr qu’il n’y a pas de doublons.

Si vous actualisez une page avec des données POST, le navigateur confirmera votre nouvelle soumission. Si vous utilisez des données GET, le message ne sera pas affiché. Vous pourriez également avoir la deuxième page, après avoir enregistré la soumission, redirect vers une troisième page sans données.

Eh bien, j’ai trouvé personne n’a mentionné cette astuce.

Sans redirection, vous pouvez toujours empêcher la confirmation du formulaire lors de l’actualisation.

Par défaut, le code de formulaire est comme suit:

maintenant, changez-le en

Vous verrez la magie.

Je suppose que c’est parce que les navigateurs ne déclenchent pas la fenêtre contextuelle d’alerte de confirmation si une méthode GET (chaîne de requête) apparaît dans l’URL.

Le motif PRG ne peut empêcher que la resoumission provoquée par l’actualisation de la page. Ce n’est pas une mesure sûre à 100%.

D’habitude, je vais prendre des mesures ci-dessous pour empêcher la resoumission:

  1. Côté client – Utilisez javascript pour éviter les clics sur un bouton qui déclencheront l’envoi de formulaire. Vous pouvez simplement désactiver le bouton après le premier clic.

  2. Côté serveur – Je calcule un hachage sur les parameters soumis et enregistre ce hachage dans la session ou la firebase database. Ainsi, une fois la soumission dupliquée reçue, nous pouvons détecter la duplication puis la réponse appropriée au client. Cependant, vous pouvez générer un hachage côté client.

Dans la plupart des cas, ces mesures peuvent aider à empêcher la resoumission.

J’aime vraiment la réponse de @ Angelin. Mais si vous avez affaire à un code hérité où cela n’est pas pratique, cette technique pourrait vous convenir.

En haut du fichier

 // Protect against resubmits if (empty($_POST)) { $_POST['last_pos_sub'] = time(); } else { if (isset($_POST['last_pos_sub'])){ if ($_POST['last_pos_sub'] == $_SESSION['curr_pos_sub']) { redirect back to the file so POST data is not preserved } $_SESSION['curr_pos_sub'] = $_POST['last_pos_sub']; } } 

Ensuite, à la fin du formulaire, last_pos_sub comme suit:

 > 

Essayez sortings:

 function prevent_multi_submit($excl = "validator") { $ssortingng = ""; foreach ($_POST as $key => $val) { // this test is to exclude a single variable, fe a captcha value if ($key != $excl) { $ssortingng .= $key . $val; } } if (isset($_SESSION['last'])) { if ($_SESSION['last'] === md5($ssortingng)) { return false; } else { $_SESSION['last'] = md5($ssortingng); return true; } } else { $_SESSION['last'] = md5($ssortingng); return true; } } 

Comment utiliser / example:

 if (isset($_POST)) { if ($_POST['field'] != "") { // place here the form validation and other controls if (prevent_multi_submit()) { // use the function before you call the database or etc mysql_query("INSERT INTO table..."); // or send a mail like... mail($mailto, $sub, $body); // etc } else { echo "The form is already processed"; } } else { // your error about invalid fields } } 

Police: https://www.tutdepot.com/prevent-multiple-form-submission/