【学習ノート】Web開発におけるページ更新後のフォームの重複提出防止、フォームToken設定例

Webページの開発を行う際には、フォーム提出データを使用してサーバからフィードバックされることが多いが、フォーム提出後にフィードバックされたデータも取得され、しばらくすると何らかの理由で現在のページをリフレッシュする必要があるが、フォームをもう一度提出したくない、つまり、ページをリフレッシュする際にフォームを一度も提出しない、ユーザーが自分でコミットボタンをクリックしてからフォームをコミットするしかない場合、GETでもPOSTでもフォーム情報をキャッシュする方法では、フォームtokenを追加してこのニーズを実現することができます.
1.フロントエンドは以下のように実現する

"/Search" method="GET" id="search-form" οnsubmit="return generateToken()">
    type="text" id="keyword" name="keyword"/>
    type="hidden" name="token" id="token" value=""/>
    type="submit"/>

以上のようにhiddenドメインを追加してtokenパラメータを格納し、コミットフォームをクリックするとgenerateTokenメソッドによって動的にランダムなtokenが同時にサーバにコミットされます.次にgenerateTokenメソッドの実装を見てみましょう.

function generateToken(){
    var date=new Date();
    var seed=""+date.getTime()+date.getYear()+date.getMonth()+date.getDate();
    var token="";
    var temp;
    for(var i=0,n=seed.length;iparseInt(seed.substring(i,i+1));
        token+=String.fromCharCode(65 + temp);
    }
    $(".nav #token").val(token);
    if($(".nav #token").val()==token){
        return true;
    }
    return false;
}

jsは現在の時間+年+月+日を基数種子とし,それぞれ対応するアルファベットに変換するが,もちろん直接数字を用いてtokenを生成した後,hiddenドメインに値を付与するとともに,一度hiddenドメインの値が生成したtokenと一致するかどうかを判断する(余計に見えるが,実際には値の付与に失敗することを防止する).
2.バックグラウンドサーバ実装(Java)

@RequestMapping("/Search")
    public ModelAndView searchView(String keyword,Page page,String token,HttpSession session){
        ModelAndView model=new ModelAndView("Search");
        if(token==null){
            return model;
        }
        String lastToken=(String) session.getAttribute("searchFormToken");
        if(lastToken==null||!lastToken.equals(token)){
            searchByKeyword(keyword,page,session);
            session.setAttribute("searchFormToken", token);
        }
        return model;
    }

    @SuppressWarnings("unchecked")
    @RequestMapping("/Search/Keyword")
    @ResponseBody
    public Map searchByKeyword(String keyword,Page page,HttpSession session){
        //       ，       
        if(keyword==null){
            keyword="";
        }
        /**
         *                  ，        
         */
        page.setCurrent(page.getCurrent()==0?1:page.getCurrent());
        page.setMax(page.getMax()==0?15:page.getMax());
        session.setAttribute("searchKeyword", keyword);
        Map result=videoService.listSimpleInfoByKeyword(keyword, page);
        session.setAttribute("searchResult", result);
        session.setAttribute("searchPage", page);
        System.out.println(session.getAttribute("searchKeyword"));
        return result;
    }

フォームをコミットすると、サーバは検索ページに戻り、現在のセッションに格納されているsearch tokenがフォームにコミットされたtokenと一致しているかどうかを判断し、一致している場合は、このフォームが処理されたことを示し、このフォームを処理しなくなり、一致していない場合は、このフォームを処理してフォームtokenを格納し、その後の重複コミットを防止します.(最近使用されているプロジェクトコードを使用しているので、詳細は悩まず、searchViewメソッドでtokenを処理する手順を気にするだけです).
締めくくり
フォームの提出を防止する技術は多く,フロントエンドの提出禁止やURLの判断などの操作が含まれているが,本稿ではその中のtoken設定方法を簡単に述べただけで,比較的簡単な実現であるほか,現在の多くのフレームワークにも重複フォームの実現を防止するものが含まれている.フォームの重複コミットを防止するメリットはたくさんありますが、重複コミット登録、コミットログインなどは重複コミットを検出する必要があるので、これらの方法を身につけることがWeb開発に必須のテクニックです.△ブロガーは才能が浅く、技術の研究が不精で、顔を出さないでください.ここで皆さんに感謝しました.