画面遷移にかかわる制御

HTTPメソッドの使い分け

Context

HTTPメソッドを一般的通念で正しく使い、余計な制約をうまないようにしたい。

Force

個人情報が載る可能性のあるフォームは、URL履歴にそれが入らないようPOSTで遷移させねばならない。
コンシューマ向けWebサイトでは、検索エンジンのクローラに正しくクロールしてもらうのが至上命題である。したがって検索導線は必ずGETで遷移させなければならない。
POSTのときはCSRFトークンチェックを自動でやるフレームワークが増えていて、いくらバックオフィスのアプリケーションといえども検索導線にPOSTを使うのはまかりならない。

Solution

検索導線はGETを使い、入力アクションはPOSTを使う。

不用意な遷移の防止

Context

ブラウザの誤操作によって入力中のデータが消えてしまうのを防ぎたい。

Solutions

ページ遷移する前に警告ダイアログを出す。

onbeforeunloadを使って警告を出す。

window.onbeforeunload = function(e) {
  return '入力内容が消えてしまうがよろしいですか?';
}

全ページにいれるのは操作性が落ちてしまうので、入力ページだけに設定する。
[Antipattern] ブラウザのバックボタンや右クリックを禁止するのは、リテラシーの高い人の操作性を犠牲にしてしまうのでご法度。

PRG

Context

完了画面などでリロードするとトークンエラーになってしまうので、ユーザが戸惑うことがある。なんとかしたい。

Force

スマートフォンにアプリ間を移動すると意図しないリロードがかかることが多い。
ブラウザリロードによるトークンエラーが発生しないようにしなければならない。

Solution

POSTの処理のあとに完了メッセージを出すときに、リダイレクトさせる。

リダイレクトには303 See otherを使う。
メッセージを動的に出し分けたい場合は、フラッシュスコープを使う。

Anti forgery

Context

意図しないリクエスト再送信による2重注文を防ぎたい。
悪意のある更新リクエストをさせる攻撃を防ぎたい。

Solution

サーバセッションとリクエストパラメータ(ヘッダ)のトークンの値を比較し、トークンが不一致の場合には400 Bad Requestとする。

HTTPメソッドの使い分けが適切にできていれば、POSTの遷移は一律トークンチェックをする。(RailsやRingはフレームワークレベルでサポートしている。)
一度処理済みの内容の再送信であれば、ユーザにはエラーを返さず正常に処理できた旨のみ伝えるのがよい。
- 実現例: https://gist.github.com/kawasima/27d1e8e38d646e44d93f

モーダルウィンドウ

Context

郵便番号から住所を選択したり、検索条件を選択したりするのにメインウィンドウとは別のウィンドウで作業させたい。

Force

ウィンドウを新しく開くとJavascriptのコントロールは、劇的に難しくなる。
スマフォではそもそも新規ウィンドウという概念がない。せいぜいタブ。

Solution

モーダルウィンドウを使って、同じページ内に仮想ウィンドウを表示する。

ウィンドウの内容はAjaxにより取得し、Javascriptでレンダリングする。

ブラウザメニュー隠し [Antipattern]

Context

ユーザに決まった画面遷移をさせたいので、ブラウザのナビゲーションバーやアドレスバーを隠したい。
アドレスバーは命、

Solution

アドレスバーは絶対に隠さないようにしよう。
- フィッシング被害を防ぐのに重要です。

画面を広く使いたいのであれば、Kioskモードを使いましょう

addEventListener("click", function() {
  var doc = document.documentElement,
      requestFullScreen = doc.requestFullScreen
                       || doc.webkitRequestFullscreen
                       || doc.mozRequestFullScreen
  requestFullScreen.call(doc);
});