モーダル画面について考える　[セキュリティ研究室]

日付:
　こんにちは！
　ナビゲータのEVEです。

　私だけかもしれませんが、朝一で、システムをつくるのって、生活にリズムがでてきます。一時、朝一で中小企業診断士の勉をしようと努力してましたが、私には合わないみたいです。目覚めがいい時もあるのですけれど、80%の確率で眠く、頭に入るものではありません。その点、システムをつくる行為、具体的には、プログラミングなのですが、必須に思考しようとするその行為は、頭を覚醒させてくれます。ただ、ブログを書いている現在ちょっと、眠いのですが、無理せず、自分のペースでやっていきたいと思います。
　では、本日は予定通り、子画面を、表示する場合、通常画面の子画面を使用すべきなのか、それともモーダル画面を使用したほうがいいのか検討していきたいと思います。

[古いモーダル画面]

　今週のブログの中で、モーダル画面について触れていますが、実は、私が知っているモーダル画面は既に廃止になっていました。廃止は、順次ブラウザ個別に実施され、完全に終了したのは、Firefoxの2017年のバージョン56になります。その理由は、以下の通りです。

  • Internet Explorerが独自に実装した機能で、他社も非推奨ながら一部対応しましたが、厳密に互換性がなかった。
  • 厳密なWeb標準（W3C）の仕様でなかった
  • フィッシング詐欺などに利用される可能性があるなど、セキュリティに問題があった。
  • スマートフォン、タブレットなど新たな機器への対応ができなかった。

[現代のモーダル画面]

　現在使用されているモーダル画面は、以下のような特徴があります。

  • HTML Living Standardに準拠（WHATWG主導）
  • 複雑なライブラリに頼ることなく、基本的なHTMLとCSSで柔軟なデザインを実現できます。
  • showModal()で親ウィンドウをロック可能（Top Layerに配置）
  • フォーカス管理・ESCキー閉じ処理が自動
  • アクセシビリティ対応が容易（スクリーンリーダー対応）
  • CSSでスタイル調整可能（レスポンシブ対応も可）
  • 一部旧ブラウザでは未対応（ポリフィル必要）
  • PC、スマートフォン、タブレットなど、様々な機器への対応

　HTML Living Standardとは、W3C以外の組織がまとめた仕様ですが、W3Cも追認している規格になります。現在のブラウザ各社は基本的に、HTML Living Standardに準拠しています。しかし、各社ブラウザの開発のバージョン等の都合により、即座に対応するというものでもなく、順次対応といったイメージでその対応時期はまちまちのようです。したがって、開発においては、最新の機能を使用するのではなく、リリース後数年を経て使用するのがいいかもしれません。

[現代のモーダルセキュリの問題]

　では、現在使用されいる、モーダル画面ですが、通常の画面と比較して、どのような点が問題となるでしょうか？

観点 モーダル画面（ / カスタム） 子画面（window.open()）
同一オリジン制約 DOM内に存在するため、親と完全に同一オリジン window.open()で開いた画面は別ウィンドウ扱い。オリジンが異なるとクロスオリジン制約が発生
ユーザー操作の遮断 showModal()で親画面の操作をロック可能。悪用すると強制的な操作誘導のリスク 子画面は非同期・非遮断であり、親画面の操作は可能
フィッシング耐性 モーダルが親画面と同一UI内に表示されるため、偽装が容易（例：ログイン画面風） 子画面は別ウィンドウであり、ブラウザのアドレスバーが表示されるためオリジン確認が可能（ただしポップアップブロックの影響あり）
フォーカス制御 フォーカストラップが不完全だと、TABキーで外部要素に移動可能 子画面は独立しており、フォーカス制御は画面単位で完結する
アクセシビリティ <dialog>は比較的安全だが、カスタムモーダルは実装ミスでスクリーンリーダーが誤動作することがある 子画面は通常のHTMLページとして扱われ、アクセシビリティは独立して管理可能
履歴・状態管理 モーダルはSPA内で状態を持つため、URL履歴に残らない → ユーザーが戻る操作で混乱する可能性 子画面は独立した履歴を持つため、ナビゲーションが明確
ウィンドウクローズ ウィンドウを閉じても、画面自体は非表示になっただけで、残っているため、入力後のデータがモーダル画面上に残る。 ウィンドウを閉じた場合、入力情報は残らない。

[古いモーダル画面]

　以上の検討から、当プロジェクトでは、モーダル画面の使用は見送り、通常画面で子ウィンドウを利用することにしています。それと、生産性という意味で、通常画面の方が高いということもありますが・・・・
　では、来週は、対策と、今後モーダルウィンドウの使用の可能性について考えていきましょう！

　では、また！！！

コメント

コメントを投稿