Empêcher une nouvelle soumission de formulaire

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 nouvelle soumission du formulaire" apparaît.

Cela peut-il être évité?

Il y a 2 approches que les gens utilisaient ici:

Méthode 1: utiliser AJAX + Redirect

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

Méthode 2: Publier + Rediriger vers soi

C'est une technique courante sur les forums. Form on Page1 publie les données sur Page2, Page2 traite les données et fait ce qui doit être fait, puis il effectue une redirection HTTP sur lui-même. De cette façon, la dernière «action» dont le navigateur se souvient est un simple GET sur la page 2, de sorte que le formulaire n'est pas soumis à nouveau sur F5.

Vous devez utiliser PRG - modèle Post / Redirect / Get et vous venez d'implémenter le P de PRG. Vous devez rediriger . (De nos jours, vous n'avez pas du tout besoin de redirection. Voyez 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 redirection - HTTP 1.0 avec HTTP 302 ou HTTP 1.1 avec HTTP 303

Une réponse HTTP avec un code d'état de 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 requête, sinon identique, à la nouvelle URL spécifiée dans le champ de localisation.

Le code d'état de la redirection vise à 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 requête HTTP POST initiale.

Double Submit Problem

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 l'alerte de confirmation POST

Deux solutions de contournement clés suggérées étaient le modèle PRG et une soumission AJAX suivie d'une relocalisation de script.

Notez que si votre méthode autorise une méthode de soumission GET et non POST, cela résoudrait à la fois le problème et correspondrait mieux aux conventions. Ces solutions sont fournies dans l'hypothèse où vous voulez / avez besoin de POST 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 ceux que vous émettez et de suivre ceux qui ont été soumis sur le serveur. Le piège est que si l'utilisateur sauvegarde sur la page où se trouvait le formulaire et entre de nouvelles données, le même formulaire ne fonctionnera pas.

Il y a deux parties à la réponse:

1. Assurez-vous que les publications en double ne gâchent pas vos données côté serveur. Pour ce faire, intégrez un identifiant unique dans la publication afin de pouvoir rejeter les demandes ultérieures côté serveur. Ce modèle est appelé récepteur idempotent en termes de messagerie.

2. Assurez-vous que l'utilisateur n'est pas gêné par la possibilité de soumissions en double par les deux

   • redirection vers un GET après le POST (modèle POST redirect GET)
   • désactivation du 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 quand même publier. Vous avez toujours besoin 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 pouvez également avoir la deuxième page, après avoir enregistré la soumission, redirigée vers une troisième page sans données.

Eh bien, j'ai trouvé que personne n'avait mentionné cette astuce.

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

Par défaut, le code du formulaire est comme ceci:

<form method="post" action="test.php">

maintenant, changez-le en <form method="post" action="test.php?nonsense=1">

Vous verrez la magie.

Je suppose que c'est parce que les navigateurs ne déclenchent pas le popup d'alerte de confirmation s'il obtient une méthode GET (chaîne de requête) dans l'url.

Vous pouvez le faire en utilisant jquery

<script>
   $(document).ready(function(){
   window.history.replaceState('','',window.location.href)
   });
</script>

C'est le moyen le plus élégant d'empêcher à nouveau les données après leur soumission en raison de leur publication.

J'espère que cela t'aides.

Le modèle PRG peut uniquement empêcher la nouvelle soumission provoquée par l'actualisation de la page. Ce n'est pas une mesure sûre à 100%.

Habituellement, je prendrai les mesures ci-dessous pour empêcher une nouvelle soumission:

1. Côté client - Utilisez javascript pour éviter les clics en double sur un bouton qui déclenchera l'envoi du formulaire. Vous pouvez simplement désactiver le bouton après le premier clic.

2. Côté serveur - Je vais calculer un hachage sur les paramètres soumis et enregistrer ce hachage dans la session ou la base de données, de sorte que lorsque la soumission dupliquée a été reçue, nous pouvons détecter la duplication, puis une réponse appropriée au client. Cependant, vous pouvez réussir à générer un hachage côté client.

Dans la plupart des cas, ces mesures peuvent aider à empêcher une nouvelle soumission.

J'aime vraiment la réponse de @ Angelin. Mais si vous avez affaire à du code hérité où ce n'est pas pratique, cette technique peut fonctionner pour vous.

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'];
     }
}

Puis à la fin du formulaire, inscrivez-vous last_pos_subcomme suit:

<input type="hidden" name="last_pos_sub" value=<?php echo $_POST['last_pos_sub']; ?>>

Essayez tris:

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

Comment utiliser / exemple:

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/

utilisez js pour empêcher l'ajout de données:

if ( window.history.replaceState ) {
    window.history.replaceState( null, null, window.location.href );
}