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

内容

▲ ▼

事前準備

▲ ▼

プラグインの準備

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

▲ ▼

概要

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

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

入力画面（index.html.erb）

↓
結果画面（result.html.erb）

↓（ここで、リロードしてみましょう）
以下のような、不正なトークンの場合の画面になります

▲ ▼

サンプルのポイント

・double_submit_protectionを使用します。

github DianthuDia / 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"ファイルを以下の内容で作成します。

<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 "サブミット" %>
  
  <%# １）ダブルサブミット防止用トークンを出力します%>
  <%= double_submit_token %>
<% end %>
</body>
</html>

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

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

▲ ▼

ビュー（結果画面）

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

<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"ファイルを以下の内容で作成します。

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