<h1 id="%E3%81%AA%E3%81%9C%E3%82%84%E3%82%8D%E3%81%86%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B">
<a class="header-anchor-link" href="#%E3%81%AA%E3%81%9C%E3%82%84%E3%82%8D%E3%81%86%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B" aria-hidden="true"></a> なぜやろうと思ったのか</h1>
<p>脆弱性診断員は報告のために画面キャプチャを採集します。そしてWebで代表的な脆弱性はやっぱりクロスサイト・スクリプティングです。この脆弱性は任意のJavaScriptが実行できるものですが、クロスサイト・スクリプティングの実証で良く使われるのはalert()関数です。正確な理由や経緯はわからないですが、やはり見た目がわかり易いから、でしょうか。<br>
つまり診断員は、クロスサイト・スクリプティングを実証してalert()関数が実行されたときの、あのポップアップウィンドウが出た状態をよくキャプチャすることになります。<br>
しかしこのポップアップは、ブラウザによってけっこうデザインが違います。それを言うならツールバーやスクロールバーだってデザインは違うのですが、ポップアップはとても目立つところです。これが少し気になったのでまとめてみました。</p>
<p>調査では各ブラウザで以下の関数を実行し、その画面キャプチャをとりました。</p>
<div class="code-block-container"><pre class="language-js"><code class="language-js"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">navigator</span><span class="token punctuation">.</span><span class="token property-access">userAgent</span><span class="token punctuation">)</span>
</code></pre></div><p>サーバを建てていないのでdocument.domainの表示では見た目が地味にしかなりません。それに今回はブラウザの違いを比べるのでユーザーエージェントの表示としました。</p>
<h1 id="%E6%AF%94%E8%BC%83%E7%B5%90%E6%9E%9C">
<a class="header-anchor-link" href="#%E6%AF%94%E8%BC%83%E7%B5%90%E6%9E%9C" aria-hidden="true"></a> 比較結果</h1>
<ol>
<li>
<p>Internet Explorer 11 (Windows10)<br>
<img src="https://storage.googleapis.com/zenn-user-upload/bedyfp7bccvdm9x30na4ezktj4bi" alt loading="lazy" class="md-img"><br>
まずはIE11です。WindowsのGUIでポップアップが出現していますが、Windows10のデフォルトではタイトルバーが真っ白で、いかにもWindowsらしい特徴が無くなってしまった気がします。黄色い警告アイコンが付いているのは独特ですね。</p>
</li>
<li>
<p>Edge (EdgeHTML) 44<br>
<img src="https://storage.googleapis.com/zenn-user-upload/hzb39akshflc78tz8v2gb2v377jv" alt loading="lazy" class="md-img"><br>
続いてEdge(EdgeHTML)です。これだけabout:blankでうまくJavaScriptを実行できず、うっすら背景に情報がありますが気にしないでください。ポップアップ全体が灰色になり、サイズも少し大きく、主張が強い印象です。</p>
</li>
<li>
<p>Edge (Chromium) (Chromium 87)<br>
<img src="https://storage.googleapis.com/zenn-user-upload/ni7aikkmtpebcio43iln3jpoqp9x" alt loading="lazy" class="md-img"><br>
Edge(Chromium)です。当然ながらこの次に出てくるChromeと似ています。[OK]ボタンに色があります。</p>
</li>
<li>
<p>Chrome 86<br>
<img src="https://storage.googleapis.com/zenn-user-upload/trlbekx7paf940hi6141kytx8qi2" alt loading="lazy" class="md-img"><br>
最もシェアが多いと言われるChromeです。しかしポップアップは上の方にちょこんと控えめに出ています。やはり[OK]ボタンに色がありますね。</p>
</li>
<li>
<p>Firefox 76<br>
<img src="https://storage.googleapis.com/zenn-user-upload/sp40ynq3t1p1qgdv0ech0vurni83" alt loading="lazy" class="md-img"><br>
最後にFirefoxです。背景をグレーにしてしまうのがFireFoxのポップアップです。ポップアップそのものも半分から下が薄いグレーになっており、IEと地味に共通しています。</p>
</li>
</ol>
<p>他に気になったところも含めて表にしてみました。</p>
<table>
<thead>
<tr>
<th></th>
<th>ポップアップのタイトル</th>
<th>×ボタン</th>
<th>配色</th>
<th>陰</th>
<th>その他</th>
</tr>
</thead>
<tbody>
<tr>
<td>IE11</td>
<td>Webページからのメッセージ</td>
<td>あり</td>
<td>上白、下灰色</td>
<td>強い</td>
<td>警告アイコン</td>
</tr>
<tr>
<td>EdgeHTML</td>
<td>サイトからのメッセージ</td>
<td>あり</td>
<td>全部灰色</td>
<td>なし</td>
<td></td>
</tr>
<tr>
<td>EdgeChromium</td>
<td>このページの内容</td>
<td>なし</td>
<td>全部白</td>
<td>強い</td>
<td>OKボタンが青い</td>
</tr>
<tr>
<td>Chrome</td>
<td>このページの内容</td>
<td>なし</td>
<td>全部白</td>
<td>弱い</td>
<td>OKボタンが青い</td>
</tr>
<tr>
<td>Firefox</td>
<td>(タイトルなし)</td>
<td>なし</td>
<td>上白、下灰色</td>
<td>なし</td>
<td>背景グレーアウト</td>
</tr>
</tbody>
</table>
<p>実はポップアップのタイトルもバラバラで完全にフリーダムです。むしろ一緒だとパクリとか言われたりするんでしょうか。そして意外だったのが[×]ボタンの有無です。IE11に有るのは当然でしょうけども、ChromeやFirefoxには実装されていないのですね。押しても消えるだけでOKと同じ挙動ですし、ユーザーにOKかキャンセルかを選ばせるならconfirm()関数があるので不要と言えば不要ですが。</p>
<h1 id="%E4%B8%96%E3%81%AE%E4%B8%AD%E3%81%AE%E9%81%B8%E6%8A%9E">
<a class="header-anchor-link" href="#%E4%B8%96%E3%81%AE%E4%B8%AD%E3%81%AE%E9%81%B8%E6%8A%9E" aria-hidden="true"></a> 世の中の選択</h1>
<p>世の中に出回っている資料、つまり私より賢い人たちがどうしてるかを少しだけ調べました。</p>
<ul>
<li>
<p>IPA AppGoatを利用した集合教育補助資料　-クロスサイトスクリプティング編- (2019)<br>
<a href="https://www.ipa.go.jp/files/000062612.pdf" target="_blank" rel="nofollow noopener noreferrer">https://www.ipa.go.jp/files/000062612.pdf</a><br>
Firefox, IE<br>
まさかの混在です。やっぱり気にしなくて良いことかもしれません。</p>
</li>
<li>
<p>体系的に学ぶ 安全なWebアプリケーションの作り方 第2版（いわゆる徳丸本）(2018)<br>
Firefox<br>
学習に障害が無いよう「XSSフィルタの無いブラウザを採用した」(同本中)そうです。ちゃんとした理由があるのですね。しかしこの本が執筆された時期と違い、現在はChrome,Edgeもフィルタを廃止しています。第3版、ないし後継となる本が登場すれば、また分かりませんね。ちなみに2011年に出た第1版ではIEでした。</p>
</li>
</ul>
<h1 id="%E7%B5%90%E5%B1%80%E3%81%AA%E3%81%AB%E3%81%8C%E5%88%86%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84%E3%81%AE%E3%81%8B%E3%80%82">
<a class="header-anchor-link" href="#%E7%B5%90%E5%B1%80%E3%81%AA%E3%81%AB%E3%81%8C%E5%88%86%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84%E3%81%AE%E3%81%8B%E3%80%82" aria-hidden="true"></a> 結局なにが分かりやすいのか。</h1>
<p>個人的には昔ながらの青いのが分かりやすいと思います。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/z6okh9io9lnd9y39yg2h1zpdjwjv" alt loading="lazy" class="md-img"><br>
<em>こんなの</em><br>
しかしWindows10はデフォルトのテーマが白いようですので青い枠になりません。Chromeのシェアが多い事も無視できません。よって上記の「個人的な思い」はどちらかというと古臭い感覚になってしまうかもしれません。<br>
（脆弱性診断の報告書と睨み合うのはきっとWebの開発者なので、ブラウザの違いくらい百も承知かもしれませんが）</p>


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

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

Discussion