discordapp.comのconsole.logが気になった

discordが気になっていて公式サイトを見ていたのですが、 何気なくディベロッパーツールを開くと、以下のメッセージが表示されていました。

XSSの警告を出してくれるとはとても親切ですよね。

実は文字装飾を施したconsole.logを見るのは初めてでした。 console.logはせいぜいテストやデバッグの時に使うくらいなので、読めれば十分ですしね。

このメッセージはCSSで表現していると予想はできるものの、 どのように実装しているのか気になったので、サイト上のソースから追ってみることにしました。

まずは該当の箇所を確認

コンソールでconsole.logを出力している部分にブレークポイントを設定してみます。

3e169bfb1921f49647a2.js:106

もうすでに1行目のテキストが入ってますね。 ということは2行目も同じ処理の可能性がありますのでステップインしてみます。 すると、それっぽい記述がありました。

n.consoleWarning = function(e) {
    console.log("%c" + e.SELF_XSS_HEADER, "color: #7289DA; -webkit-text-stroke: 2px black; font-size: 72px; font-weight: bold;"),
    console.log("%c" + e.SELF_XSS_LINE_1, "font-size: 16px;"),
    console.log("%c" + e.SELF_XSS_LINE_2, "font-size: 18px; font-weight: bold; color: red;"),
    console.log("%c" + e.SELF_XSS_LINE_3, "font-size: 16px;"),
    console.log("%c" + e.SELF_XSS_LINE_4.format({
        url: "" + location.protocol + window.GLOBAL_ENV.MARKETING_ENDPOINT + "/jobs"
    }), "font-size: 16px;")
}

つまり以下のように指定することで、console.logにもCSSが指定できるみたいです。

console.log("%c 文字列", "CSS")

仕様を確認すると、そのように書かれています。

https://developer.mozilla.org/ja/docs/Web/API/console#Styling_console_output

定数も気になって

e.SELF_XSS_HEADERに"ちょっと待った！"が入っていることが確認出来ましたが、 他にも隠しメッセージがあるかもしれないと思い、SELF_XSS_HEADERを探しました。

このメッセージはローカライズ用のとても大きなオブジェクトにあるXSSDefensesというキーに入っていました。

期待した隠しメッセージは特に無さそうでしたが、 エラーメッセージ等はフレンドリーなメッセージで面白いので興味がある方は見てみてはいかがでしょうか。

404エラーページはお洒落でとても好きです。 オズの魔法使いを出してくるところがニクいです。 小さい頃に映画版をよく見たなぁ。