Prevence vicenasobneho odeslani formulare

Blujacker

Ahoj,

snazim se osetrit, aby uzivatel nemohl odeslat vicekrat ten samy formular. Na strane clienta to kontroluji pres JS, ale chtelo by to mit funkcni reseni i pro server-side kontrolu. Snazil jsem se najit nejake hotove reseni, par dotazu na foru na toto tema bylo ale zadne vyresene

Co me napadlo je pridat si skryty element s nahodnym tokenem, ktery si ulozim do session a po submitnuti formulare zkontrolovat, ze takovy token v session mam.

Pokud ano, jedna se o prvni submitnuti. Zrusim platnost tokenu v session
Pokud tam neni, jedna se o vicenasobne odeslani formulare, takze jenom zobrazim nejakou chybovou hlasku.

Slo by tento mechanismus nejak pridat do vsech formularu automaticky? addProtection() funguje na podobnem principu, ale nevim jak bych mohl podobnou funkcionalitu duplikovat.

Dekuji za kazde popostrceni (at uz k existujicimu doplnku nebo nakopnuti jak to zautomatizovat).

newPOPE

Taktiez sme to parkrat riesili a vzdy sme zostali (resp. stacilo to vypnut na strane klienta).

Ono totizto neviem ci ti bude s tym tokenom fungovat nakolko:

kliknem na submit browser zacne posielat request
kolecko sa kruti a browser stale posiela nieco
kliknem druhykrat na submit no form je stale ten isty cize aj token.

Skor by som riesil co browser urobi tym ze kliknem na submit druhykrat ci ten request zahodi alebo …?

Blujacker

Token by se akceptoval pouze jednou, po prvnim prijeti by se mu pridal flag used a kdyby byl pouzit znovu, tak by vyskocila nejaka chyba.

Na strane klienta to zatim resim takto:

$(function () {
    $("form:not([data-loading-state=disabled])").submit(function() {
        setTimeout($.proxy(function () {
            var inputs = $(this).find(":input");
            inputs.attr("data-form-disabled", 1);
            inputs.prop("disabled", true);
            inputs.addClass("disabled");
            $(this).find("button, input[type=submit]").each(function (i, el){
                func  = $(el).is('input') ? 'val' : 'html';
                $(el).attr("data-loading-text", $(el)[func]());
                $(el)[func]("Loading...");
            });
        }, this), 0);
    });
});

Tohle udela to, ze pri submitnuti formulare (ktery nema data atribut data-loading-state=disabled) se vsechny inputy a buttony nastavi na disabled (a buttonum se nastavi text Loading...). Aby to fungovalo i s netteForms.js, ktere provadi live validaci, tak jsem na konec metody Nette.validateForm pridal

if (success === false){
    setTimeout($.proxy(function () {
        var inputs = $(sender).find(":input[data-form-disabled=1]");
        inputs.prop("disabled", false);
        inputs.removeClass("disabled");
        $(sender).find("button[data-form-disabled=1], input[type=submit][data-form-disabled=1]").each(function (i, el){
            func  = $(el).is('input') ? 'val' : 'html';
            $(el)[func]($(el).attr("data-loading-text"));
            $(el).removeAttr("data-loading-text");
        });
        inputs.removeAttr("data-form-disabled");
    }, this), 0);
}

V Chrome a FF to funguje skvele, akorat v Safari je problem, ze se tlacitkum nenastavi text Loading... a inputy nevypadaji jako disabled (ackoli spravne jsou).

Myslite tedy, ze validace na strane klienta je dostacujici a jako jeden z pozadavku pro aplikaci je mit zapnuty JS?

Dekuji!

newPOPE

JS validácia na zaciatok postacuje. Ked s tym zacnete mat problem tak to riesite potom :).