ブラウザ毎に違うポップアップの見た目を比較する実験

3 min read読了の目安(約2800字

なぜやろうと思ったのか

脆弱性診断員は報告のために画面キャプチャを採集します。そしてWebで代表的な脆弱性はやっぱりクロスサイト・スクリプティングです。この脆弱性は任意のJavaScriptが実行できるものですが、クロスサイト・スクリプティングの実証で良く使われるのはalert()関数です。正確な理由や経緯はわからないですが、やはり見た目がわかり易いから、でしょうか。
つまり診断員は、クロスサイト・スクリプティングを実証してalert()関数が実行されたときの、あのポップアップウィンドウが出た状態をよくキャプチャすることになります。
しかしこのポップアップは、ブラウザによってけっこうデザインが違います。それを言うならツールバーやスクロールバーだってデザインは違うのですが、ポップアップはとても目立つところです。これが少し気になったのでまとめてみました。

調査では各ブラウザで以下の関数を実行し、その画面キャプチャをとりました。

alert(window.navigator.userAgent)

サーバを建てていないのでdocument.domainの表示では見た目が地味にしかなりません。それに今回はブラウザの違いを比べるのでユーザーエージェントの表示としました。

比較結果

  1. Internet Explorer 11 (Windows10)

    まずはIE11です。WindowsのGUIでポップアップが出現していますが、Windows10のデフォルトではタイトルバーが真っ白で、いかにもWindowsらしい特徴が無くなってしまった気がします。黄色い警告アイコンが付いているのは独特ですね。

  2. Edge (EdgeHTML) 44

    続いてEdge(EdgeHTML)です。これだけabout:blankでうまくJavaScriptを実行できず、うっすら背景に情報がありますが気にしないでください。ポップアップ全体が灰色になり、サイズも少し大きく、主張が強い印象です。

  3. Edge (Chromium) (Chromium 87)

    Edge(Chromium)です。当然ながらこの次に出てくるChromeと似ています。[OK]ボタンに色があります。

  4. Chrome 86

    最もシェアが多いと言われるChromeです。しかしポップアップは上の方にちょこんと控えめに出ています。やはり[OK]ボタンに色がありますね。

  5. Firefox 76

    最後にFirefoxです。背景をグレーにしてしまうのがFireFoxのポップアップです。ポップアップそのものも半分から下が薄いグレーになっており、IEと地味に共通しています。

他に気になったところも含めて表にしてみました。

ポップアップのタイトル ×ボタン 配色 その他
IE11 Webページからのメッセージ あり 上白、下灰色 強い 警告アイコン
EdgeHTML サイトからのメッセージ あり 全部灰色 なし
EdgeChromium このページの内容 なし 全部白 強い OKボタンが青い
Chrome このページの内容 なし 全部白 弱い OKボタンが青い
Firefox (タイトルなし) なし 上白、下灰色 なし 背景グレーアウト

実はポップアップのタイトルもバラバラで完全にフリーダムです。むしろ一緒だとパクリとか言われたりするんでしょうか。そして意外だったのが[×]ボタンの有無です。IE11に有るのは当然でしょうけども、ChromeやFirefoxには実装されていないのですね。押しても消えるだけでOKと同じ挙動ですし、ユーザーにOKかキャンセルかを選ばせるならconfirm()関数があるので不要と言えば不要ですが。

世の中の選択

世の中に出回っている資料、つまり私より賢い人たちがどうしてるかを少しだけ調べました。

  • IPA AppGoatを利用した集合教育補助資料 -クロスサイトスクリプティング編- (2019)
    https://www.ipa.go.jp/files/000062612.pdf
    Firefox, IE
    まさかの混在です。やっぱり気にしなくて良いことかもしれません。

  • 体系的に学ぶ 安全なWebアプリケーションの作り方 第2版(いわゆる徳丸本)(2018)
    Firefox
    学習に障害が無いよう「XSSフィルタの無いブラウザを採用した」(同本中)そうです。ちゃんとした理由があるのですね。しかしこの本が執筆された時期と違い、現在はChrome,Edgeもフィルタを廃止しています。第3版、ないし後継となる本が登場すれば、また分かりませんね。ちなみに2011年に出た第1版ではIEでした。

結局なにが分かりやすいのか。

個人的には昔ながらの青いのが分かりやすいと思います。

こんなの
しかしWindows10はデフォルトのテーマが白いようですので青い枠になりません。Chromeのシェアが多い事も無視できません。よって上記の「個人的な思い」はどちらかというと古臭い感覚になってしまうかもしれません。
(脆弱性診断の報告書と睨み合うのはきっとWebの開発者なので、ブラウザの違いくらい百も承知かもしれませんが)