🎃

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

2020/12/14に公開

JavaScript

なぜやろうと思ったのか

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

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

alert(window.navigator.userAgent)

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

比較結果

Internet Explorer 11 (Windows10)

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

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

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

最もシェアが多いと言われるChromeです。しかしポップアップは上の方にちょこんと控えめに出ています。やはり[OK]ボタンに色がありますね。
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の開発者なので、ブラウザの違いくらい百も承知かもしれませんが）