なぜ危ないのか
ソースマップ（`.map`ファイル）は、ブラウザの開発者ツールでトランスパイル・バンドル後のコードから元のソースコードを表示するためのファイルです。本番環境にソースマップが残ると、開発者ツールを持つ誰もが元のTypeScriptやJSXのソースコードを閲覧できます。APIキーのハードコード、アルゴリズムの実装詳細、コメントに記載した設計情報なども丸ごと見えます。
特に競合他社への露出は深刻です。独自のビジネスロジックがソースコードから読み取れる状態は、知的財産の流出に相当します。ソースマップの存在はPenTestやバグバウンティプログラムで発見される典型的な脆弱性の一つであり、CVSSスコアとしては中程度に評価されますが、ビジネスインパクトは組織によっては非常に大きくなります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
ソースで見る場所
ソースマップへの参照はJavaScriptファイルの末尾に`//# sourceMappingURL=main.js.map`という形式で記載されます。HTMLにインラインで埋め込まれたJavaScriptにも同じコメントが末尾に付くことがあります。`grep -rn 'sourceMappingURL' dist/`でビルド成果物ディレクトリを検索し、該当行を全て確認してください。
CSSファイルにも同様のソースマップ参照が含まれます。Sass/SCSSをコンパイルしたCSSは末尾に`/*# sourceMappingURL=style.css.map */`が追加されることがあります。HTMLと一緒に配布するCSSファイルも忘れずに確認対象に含めてください。`.map`という拡張子を持つファイル自体が存在していないかもチェックします。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
安全に共有する設定
ソースマップ参照を除去したことを確認したHTMLを共有する際は、`.map`ファイル自体を配布物に含めないことを徹底してください。zipで圧縮して渡す場合、`ls -la`でzip内のファイル一覧を確認し、`.map`拡張子のファイルが含まれていないことを確認します。ギガサイト便でHTMLをアップロードする際も、`.map`ファイルを一緒にアップロードしないようにしてください。
本番環境とレビュー環境でビルド設定を分けている場合、レビュー用ビルドのwebpack.config.jsやvite.config.tsで`devtool: false`や`sourcemap: false`を明示的に設定してください。CIパイプラインのステージングビルドでこの設定が有効になっているかを確認し、ビルドログで`.map`ファイルが生成されていないことを確認します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止ルール
ビルドツールの設定ファイルに「本番・ステージングビルドではソースマップを生成しない」ことを明示的に記載し、設定のコメントに理由を残してください。後からメンテナンスする人が「なぜdevtool:falseなのか」を理解できるようにすることで、誤って設定を変更するリスクが下がります。
デプロイ前のチェックリストにソースマップ確認を追加し、CI/CDパイプラインに`find dist -name '*.map' | wc -l`が0を返すことを確認するステップを組み込んでください。人間の確認に頼らず機械的に検出することで、ビルド設定の変更で意図せずソースマップが有効になってしまったケースも自動でブロックできます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
ソースマップを本番に残さず、社内の開発者がデバッグする際はどうすればよいですか？
Sentryなどのエラートラッキングサービスにソースマップをアップロードし、本番環境には配置しない方法が一般的です。エラーのスタックトレースはSentry上で元のソースコードにマッピングして表示され、一般ユーザーからは見えない状態にできます。
CloudflareやNginxでソースマップのアクセスをブロックする方法はありますか？
Nginx設定で`location ~ \.map$ { deny all; }`を追加することで`.map`ファイルへのアクセスを403で拒否できます。Cloudflareでは不正アクセスブロックルールに`.map`拡張子を追加できます。ただしファイルが存在している限りセキュリティ上のリスクは残るため、ファイル自体をサーバーに配置しないことが最善です。
AIが生成したHTMLにはソースマップへの参照が含まれますか？
AIが純粋にHTMLを記述した場合はソースマップ参照は含まれません。ただしAIが生成したコードをViteやwebpackでビルドした成果物を共有する場合は、ビルドツールがソースマップ参照を付加します。AIの直接出力HTMLよりも、ビルドパイプラインを経たファイルを確認することが重要です。