ChromeのDevToolsのコンソールへのself-XSSの警告の出し方を調べたら、console.log出力にCSSが適用できることがわかった

FacebookでDevToolsを開くと大きいサイズで「STOP!」と警告が表示される。
これはself-XSSに対しての警告で、自分で悪意のあるコードを実行しないように注意を促すためのもの。

しかしコンソールにどうやって文字を大きく出せるのか。と疑問に思ったので調べたら、CSSが使えることがわかったのでみなさまにご報告させていただきます。

コンソール出力にCSSを適用できる

console.log("\n%cSTOP！" ,"font-family:helvetica; font-size:20px; font-size:50px; font-weight:bold; color:red; -webkit-text-stroke:1px black;");

このコードはconsole.log()を使用してブラウザのコンソールにスタイル付きのテキストを出力します。詳細は以下の通りです：

1. \n: 新しい行を開始します。

2. %c: これはコンソールでCSSスタイルを適用するための特別なフォーマット指定子です。

3. STOP！: 実際に表示されるテキストです。

4. 二番目の引数は、適用するCSSスタイルを指定しています：

   • font-family:helvetica;: フォントをHelveticaに設定
   • font-size:20px;: フォントサイズを20pxに設定（ただし、後の50pxの指定で上書きされます）
   • font-size:50px;: フォントサイズを50pxに設定
   • font-weight:bold;: フォントを太字に設定
   • color:red;: テキストの色を赤に設定
   • -webkit-text-stroke:1px black;: テキストに1pxの黒い輪郭を追加

結果として、ブラウザのコンソールに大きな赤い「STOP！」という文字が、黒い輪郭付きで表示されます。

このコードの目的は、開発者や閲覧者の注意を引くための警告メッセージを表示することです。

---