このレッスンでやること
前回はパフォーマンスの最適化を行いました。今回はセキュリティチェックをClaude Codeとスキルを使って行います。「セキュリティチェックして」と依頼するだけでもある程度やってくれますが、せっかくなので専用スキルを使うとより質の高いチェックができます。
find-skillsでスキルを探す
前回入れた find-skills を使って、セキュリティ用のスキルを探します。
/find-skills セキュリティチェックしたいので、それ用のスキルを探してください。
Vercelエンジニアの方が作ったものがあればもちろんそれを使いたい。推奨のスキルが複数提示されるので、それらをインストールしましょう。Claude Codeには組み込みの security-review もあるので、それも併用すると多角的にチェックできます。
インストール時の注意点
3つ同時にインストールしようとするとエラーになることがあります。その場合は1つずつコマンドを叩いていきましょう。うまくインストールされない場合は、グローバルではなくプロジェクト配下の .claude/skills ディレクトリに作成されているかを確認してください。
セキュリティチェックの実行
3つのスキルを入れたら、Claude Codeに以下のように依頼します。
新しいスキル3つを使ってセキュリティチェックをお願いします。複数のエージェントが並列で動き、しばらくするとレポートがまとまります。
検出されたクリティカルな例
1. .env.localに本番シークレットが平文で保存されている
本番で使うAPIトークンやBetter AuthのSecret、APIキーが .env.local にそのまま保存されていると、AIエージェントやバックアップで即流出するリスク があります。.gitignore でGitには上がらないようにしていても、漏れてもよいということにはなりません。
今回Claude Codeに .env.local を読み込ませているので、Anthropic側で何らかのセキュリティ事象が起きればAPIキーが漏洩する可能性もゼロではありません。気になる方は キーのローテーション（再発行） をしておきましょう。なお、Stripeのテスト環境キーはそのままでも問題なく、Vercelへのデプロイ時に本番キーを設定すればOKです。
2. 動画URLを署名なし・期限なしで返している
bunny.netのCDN URLを 無署名・無期限 で返しているため、プレミアムユーザーが一度URLを取得すれば誰でもシェアできてしまう状態でした。bunny.netの Token Authentication を有効化して、期限付きの署名トークンで配信するようにしましょう。
その他
セキュリティヘッダーなどさまざまな脆弱性が検出されるはずです。脆弱性は探せば探すほど出てくるので、まずは Critical / High を全て潰しておけば、とりあえずリリースして問題ありません。
セキュリティを学ぶためのテクニック
今回入れたスキルの中身は、優秀な方々が作ったベストプラクティス集です。その中身をコピーして、Claudeのチャットに「セキュリティについてわかりやすく教えて」と貼り付けると、空き時間に勉強できます。図を使って説明させると学びが深まります。
例えば以下のような基礎用語が出てきます。
- シークレットキーの管理
- ブルートフォースアタックとレートリミット
- CSRF（Cross-Site Request Forgery）
「Cross-Site Request Forgeryとはどういうことか」をしっかり学び、「なぜなぜ」と深掠りして一番根元を押さえると、いろんな応用が効きます。
次のステップ
検出されたクリティカルな項目は裏で修正していきます。続いてはGitHubリポジトリの作成とAPIキーなどの環境変数の管理方法についてサクッと解説していきます。