Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
暮らしに役立つITコラム ChromeやSafariの自動入力機能が、なぜ「悪いデザイン」なのか

見た目の上で、隠されているフィールドに対しても自動入力してしまうという問題が話題になっている(2017年1月)

のだけれど、この問題の歴史はとても古い。自分も調査したり問題を報告したりしているので、振り返ってみる。

2012年の話

2012年4月のShibuya.XSS #1 https://atnd.org/events/25689 で、Hamachiya2が発表した

この問題に関連して「手の込んだクリックジャッキング」を使って情報を盗み出すデモを作った。

一定のマウス操作を反復して行うようなゲームに組み込むことで、意図せずにカード番号を自動入力してしまう、というものだ。

そのときに閲覧権限をもらったのがこれ。時間が経っているので、すでに開示されている。

autofill機能に関連して参照されているセキュリティ上の問題がこれだ。いずれも2010年に報告されている。

つまり、autofill機能には、ユーザーに完全に気付かれないように、情報を盗み出すことが出来る、明確なセキュリティホールが存在していて、一定の修正が行われた。

その内容は、

  • 何が入力されようとしているのかを、最前面に表示する
  • 自動入力を実行する前は、DOM上から参照できないようにする

というものだ。

なぜ問題が残っているか?

「見た目」の問題

  • ユーザーは、ブラウザのネイティブUIが表示している補完候補の表示よりも、むしろwebサイト上の表示に注目している。
  • どんな情報が入力されようとしているのか、どんな情報が入力されたのかは、webサイト上で可視化されているフォームを元にして判断するだろう。

「操作の負荷」の問題

  • 自分が報告したように、バレても良いのであれば、手の込んだクリックジャッキングで住所やカード番号を自動入力させることが出来る
  • Safariではキーボードショートカットを使って「騙して」自動入力させることが可能だろう、また、キーボード操作の場合は何を自動入力したのか分からない https://twitter.com/bulkneets/status/819393753706209280

この問題を「セキュリティホール」だとか「脆弱性」だとか言うと、ブラウザベンダーは「脆弱性ではない」と言うでしょう。 一定の対策が取られていて、何が自動入力されるのかは最前面で表示しているのだし、ユーザーには選択肢があり、機能を無効化することが出来る。

だがしかし「悪いデザイン」には違いない、と自分は考えている。

ちなみにFirefoxは複数フォームへの同時入力をまだ実装していない。

もたらされる結果に対して、操作が簡単すぎるという問題

さてタイトルにある通り、なぜ自分が現状のautofill実装を「悪いデザイン」と考えているのか、それは、もたらされる結果に対して操作が簡単すぎるからだ。 クリック三回でカード番号が盗み取られたり、サイトの指示通りにキーボードを同時に押したら住所が入力された、というのは、盗み取られる情報の重要さや取り返しの付かなさに対して、操作が簡単すぎると自分は考える。

信用できるサイトのみを利用しているのであれば、SafariもChromeも間違っていない。autofillは単に入力するだけの機能で、間違った項目をformに自動補完しても、submitボタンを押さなければ良い。 しかし、悪意のあるサイトを想定した場合は、実際にはJavaScriptで入力内容をリアルタイムで読み取ることが可能である。

この機能に関わっている開発者は、皆、一定のリスクが有ることは承知しているはずだ、しかし今日まで直ってはいない。めったに起こらないことや、悪意のあるサイトのために、通常の利用ケースまで不便になっては困るという考えが対立している。 利便性とのバランスとか、センスだとか、最終的にはそういった話になって、正解がなくなってしまう。不安があるなら使わなければ良い、利用者側に無効化するという選択肢があるため「悪いデザイン」のまま放置されてしまう。

操作に負荷を与えるという考え方

じゃあどうやって改善すればよいかというと、操作を難しくする(マウスの移動距離を大きくする)、時間が経過しないと決定ボタンを押せなくする、といった方法があるだろう。

例えば、Firefoxの拡張機能をインストールする際のdelayが実装された経緯は参考になる。

これもものすごく古いバグだ。デモでは、やはりゲームに偽装して、クリックを連打させることで、悪意のある拡張機能をインストールさせようとしている。

「使いやすく」するのは難しいが「使いにくく」するのは非常に簡単だ。様々なアプローチがある。確認ダイアログにしても、Enterを押させるだけのものから、Yを押す、Agreeとタイプする、captchaを解かせる、といったように、操作を難しくすることは簡単にできる。 UI設計をする上で、次のようなフローチャートを作って、機能に応じて負荷を調整することを考えよう。

  • 利用頻度が高いかどうか? YES or NO
  • 破壊的なアクションかどうか(取り返しの付く操作かどうか、元に戻せるかどうか?) YES or NO

取り返しの付く、利用頻度が高い操作なら、とにかく簡単に繰り返し行えるようにしておくのが良いだろう。ワンクリックで行えるようにしたり、キーボードショートカットがあるのも良いことだ。

そうではないもの「あまり繰り返し使わない」「重要な操作」が簡単に行えるのは悪いデザインだ。ブラウザのautofillを例に上げて説明したけれど、スマホアプリであっても、誤タップで取り返しのつかない操作を行ってしまうという話は良くある。危険が伴うこと注意が必要なこと、ちゃんと理解した上で行ってほしいこと、取り返しの付かないことは、適度に難しくなっている必要がある。そういった操作はややこしくて難しくなっているのが正解で、使いにくくするのを恐れてはいけない。

まとめ

アイアムノットセキュリティおじさん https://twitter.com/bulkneets/status/226087103535124480

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment