入力フォームを作成する際に考慮するポイントが色々とあったのでまとめてみた。
UIについては、取り扱う情報によって、考慮する範囲は変わってくるのと、正解はないと思うので、考え方を参考にしてもらえればと思う。
どういう画面にするか考える
入力フォームに配置する項目に無駄のものはないか
- 入力項目の数は最小限に絞る
氏名、年齢、性別など本当に全てが必要なのかを考慮し、できる限りミニマムに絞る - 個人情報が必要かどうか
- 問い合わせなど、匿名でも良いものであれば個人情報は極力無くしておくと、個人情報流出のリスクを除外できる。
- 個人情報を扱う場合はセキュリティ面での考慮も出てくるので、実装コストにも跳ねてくることを考慮しておくこと。
フォームのUIはユーザが操作しやすいものになっているか
- 入力フィールドはLabelの横か下か
- 入力は通常、上から下に垂直に実施するのが自然なのでラベルの下が良い。
- ラベルと入力フィールドが横並びだとみづらい。（ラベル名が長かったりするとさらにみづらくなる)
- 参考記事 https://popinsight.jp/blog/?p=4113
- ラジオボタン or プルダウン
- 項目が少ないなら、ラジオボタンで。（選択肢が少ないのであれば全て見せてしまった方がいちいちプルダウンを押させる必要がない)
- 項目数が多ければ、プルダウンで
- 参考記事 https://f-tra.com/ja/blog/column/2960
入力項目ごとの考慮
- 姓名の入力
- 姓と名で2つのフィールドに分ける
- メールの文面など何かで姓と名の間にスペースを入れたいときを想定して初めから別で保持していた方が良い。
- 分けない場合ユーザによっては、姓しか入力してくれなかったりする人も出てきてしまい、データとして扱いにくくなってしまうため
- 姓と名で2つのフィールドに分ける
- 生年月日の入力
- プルダウン or 数字で入力
- 個人的にはプルダウン派
数字での入力はシンプルだが、スマホも考慮するとタップで操作できるUIが良い。PC版のみ数字でスマホはプルダウンとするのも有りだと思う。
- 個人的にはプルダウン派
- 選択値の範囲は100年
- 初期値は利用するユーザ層に合わせると良いかも
- 参考記事 https://parashuto.com/rriver/development/implement-responsive-date-picker
- プルダウン or 数字で入力
確認画面は必要か
- フォームの用途次第で要否を判断する
- 簡易的な問い合わせや、入力項目が少ないものは確認画面は必要ないと判断しても良い
- 講座の申し込みや、購入など金額が発生するものなどは確認画面があった方が良い
入力項目のバリデーションはフロント側かサーバサイド側か
- 基本は、フロントとサーバサイドの両方で行う
- フロントで行うことはユーザビリティの向上になる
- サーバサイドでのバリデーションは必須(実施しないとDB登録でエラーしたり、ゴミデータが増える)
セキュリティ面
XSS(クロスサイトスクリプティング)対策
XSSとは
HTMLインジェクションとサイトをまたがった悪意のあるスクリプト(javascript)が実行されてしまうものをクロスサイトスクリプティングという
実際に見てみないとわかりづらいので、以下のサイトなどで具体例を見るとわかりやすい
https://www.websec-room.com/2013/03/14/567
対策
htmlはサニタイズする
https://qiita.com/rana_kualu/items/11cd41de5f0364ba2ee8
今どきのフレームワークだと大抵デフォルトサニタイズが有効になっている。
何らかの事情でサニタイズをオフにする場合は、第三者がスクリプトを埋め込む形になっていないか確認すること。
例えば、DBにhtml形式でデータを保持させておいて、それをフォームに表示させたい場合などに、サニタイズをオフにする場合がある。
そのような場合、サニタイズをオフした項目について、画面上からユーザーが入力できる項目になっていないことを確認する。
CSRF対策
CSRFとは
XSSと似ているが、攻撃を任意のサイトの処理を使うものということが、XSSとの違い。
例えば、twitterにログインしているユーザが、悪意のあるサイトAを開いてそこの罠リンク(twitterでツイートするもの)を押して意図しないツイートがされてしまうようなもの(ログイン情報を格納しているcookieが悪用される例)
対策
CRSFトークンをhtmlに埋め込み、自身のサイト以外からpostなどをできなくしよう。
XSSとCSRFの違いは以下を参考にしました。
https://qiita.com/wanko5296/items/142b5b82485b0196a2da