最近やらかしそうになったんでメモ。
詳細はこちら
https://github.com/onjmin/unj/issues/9
ワイの webアプリ(うんj)は .env でいろいろ設定しとるんやけど、これな、
悪意あるプルリクで vite.config.ts に process.env を仕込まれたら、ビルドログから中身全部漏れる って話や。
前提
「フロントに流出したら困るようなenvを埋め込むな」って指摘はもっともや
ただ、今回のケースは静的サイトを二重三重に難読化した上でフロントに流出したら困るようなenvを埋め込んだケースな
「そんなケースねーよハゲ」って感想ならブラウザバックしてクレメンス
特に問題なんは、以下のホスティングサービスの仕様:
- Netlify
- Cloudflare Pages
- Fleek
どれもデフォルトで「プルリクごとにプレビュー環境作る」設定になってる。
で、そこのビルドログが普通に見れるようになっとるんや。つまり env 丸見えになる。
被害の例
- PR に console.log(process.env) 仕込まれる
- 自動でプレビュー環境がビルドされる
- ログに全部出る
- オワタ\(^o^)/
対策
とにかく 「プルリクからプレビュー環境を自動生成させない」設定に変える ことや。
サービス名 | やるべき設定 |
---|---|
Netlify | プルリクの自動プレビュー無効化 |
Cloudflare Pages | 同上 |
Fleek | 同上 |
GitHub を public にしとるなら特に危ないで。
デフォルトのままやと普通に漏れるんで絶対確認しといたほうがええ。
Cloudflare Pagesの補足
一応「ダッシュボードから値が見えないenv type」ってのもあるけど、正直それだけじゃ不十分。
viteはビルド時に平文展開するんで、PR経由でコードに仕込まれたら防ぎようがない。
まとめ
- env を使う webアプリやとこういう漏れ方もある
- publicリポにする場合は特にプレビューの挙動に注意
- プレビュー止めるだけでかなり安全になる