Mistake #88 : Console Log Leaks

全世界公開日記
「console.log」

「この変数に何が入ってるっけ?」。
その気軽な確認が、あなたの顧客の個人情報をインターネットの海に放流します。
F12キーを押すだけで、誰でもあなたの秘密を除くことができます。

📖 オープンダイアリー診断
  • 本番環境でF12キーを押すと、カラフルなログが流れてくる
  • 「test」「hoge」「kita」などの謎のメッセージが表示される
  • ログの中に、メールアドレスや電話番号が見え隠れしている
  • 「ログを消す」というタスクが、リリース直前の手順に含まれている(手動)
⚠️ 警告:あなたのサイトは「透明な家」です。
外から見えないつもりでも、実は生活の様子が丸見えになっています。

01. 開発者の独り言は、ハッカーのヒント

📓📢
> user: { password: "secret123" }

`console.log` は、開発者のための強力なツールですが、本番環境においては「情報漏洩ホール」です。
内部構造、APIのエンドポイント、エラー内容、そして最悪の場合、ユーザー認証トークンや個人情報。
これらを垂れ流すことは、ハッカーに対して「どうぞ、ここを攻撃してください」と招待状を送るようなものです。

見えないところに
真実がある。
(F12 Console Panel)

02. ビルドプロセスの責任

ログの削除を人間の注意力に頼ってはいけません。
WebpackやViteなどのビルドツールには、本番ビルド時に `console` 系メソッドを自動削除するプラグイン(Terserなど)が存在します。
「設定一つ」で防げる事故を、精神論で防ごうとしないでください。

03. ログの適切な管理

本番環境でログが必要な場合は、SentryやDatadogなどのログ収集基盤を使いましょう。
ブラウザのコンソールではなく、安全なサーバーサイド(または認証されたダッシュボード)にログを送る。
これがプロフェッショナルの作法です。

執筆:セキュリティ監査人

ホワイトハッカー。
「攻撃者は常に一番弱いところを狙う。そして一番弱いのは、開発者の不用意なログだ」と警告する。