Top > Ruby on Railsあれこれ > ボタンの2度押し対策

内容

事前準備

プラグインの準備

色々なプラグインの「5.ダブルサブミット(2重登録)防止」をインストールして下さい(既にされていれば、再インストール必要はありません)。

概要

登録ボタンのダブルクリックや、ページリロードなどで、情報が2重に登録されてしまうことを防ぐサンプルです。

初めは、Railsに標準装備されているCSRF(Cross-Site Request Forgery)防止機能で出来るかなと思っていたのですが、駄目なんですね。CSRF防止機能で生成されるトークンキーは1セッション:1キーなので、ブラウザが起動している限りトークンが変わらないんです。よって、登録ボタンのダブルクリックや、ページリロードによる2重登録は防げません。

入力画面(index.html.erb)
tutorial_dbs_1.jpg

結果画面(result.html.erb)
tutorial_dbs_2.jpg
↓(ここで、リロードしてみましょう)
以下のような、不正なトークンの場合の画面になります
tutorial_dbs_3.jpg

サンプルのポイント

・double_submit_protectionを使用します。

サンプルの使い方

サンプルはあらかじめ用意していないので、以降の項目を参照にして、自分で作成しなければいけません。作成後に、ブラウザからhttp://127.0.0.1:3000/tokenにアクセスしましょう(ポート番号"3000"は適宜、環境に応じて読み替えて下さい)。

ファイル構成

本項で作成するファイル

ファイル名種類
index.html.erbビュー
result.html.erbビュー
token_controller.rbコントローラー

ビュー(初期画面)

初期画面を作成しましょう。 "ror-tutorial\app\views\token\index.html.erb"ファイルを以下の内容で作成します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
<html>
<head>
<title>Tutorial: Token</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <%= stylesheet_link_tag 'ror' %>
</head>
<body>
<h2>Tutorial: Token</h2>
 
<%= @message %>
<% form_tag :action => 'submit' do %>
  <%= submit_tag "サブミット" %>
  
  <%# 1)ダブルサブミット防止用トークンを出力します%>
  <%= double_submit_token %>
<% end %>
</body>
</html>

1)ダブルサブミット防止用トークンを出力します
"<%= double_submit_token %>"が以下のようなHTMLになります。

  0
<input id="submit_token" name="submit_token" type="hidden" value="6aeffb7b29f4122d87d84e4f9f2b5486" />

ビュー(結果画面)

結果画面を作成しましょう。 "ror-tutorial\app\views\token\result.html.erb"ファイルを以下の内容で作成します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
<html>
<head>
<title>Tutorial: Token</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <%= stylesheet_link_tag 'ror' %>
</head>
<body>
<h2>Tutorial: Token</h2>
<%= @message %>
</body>
</html>

コントローラー

"ror-tutorial\app\controllers\token_controller.rb"ファイルを以下の内容で作成します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
class TokenController < ApplicationController
 
  #入力画面表示
  def index
    render :action => 'index.html.erb'
  end
  
  #結果画面表示
  def submit
    #不正なトークンかチェックする
    if double_submit?
      render(:text => '不正なトークンです〜')
      return
    end
    @message = "正常なトークンでしたぁ〜"
    render :action => 'result.html.erb'
  end
  
end

添付ファイル: filetutorial_dbs_3.jpg 365件 [詳細] filetutorial_dbs_2.jpg 385件 [詳細] filetutorial_dbs_1.jpg 385件 [詳細]

リロード   新規 編集 凍結解除 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2012-08-08 (水) 23:25:40 (3085d)