NeoWhisperは東京都港区を拠点とする個人事業主です。税務署へ開業届を提出済みで、ソフトウェア開発・ゲーム開発・アプリ開発・Web/コンテンツ制作・翻訳サービスを提供しています。
専門分野: Next.js • TypeScript • React • Node.js • 多言語サイト • SEO • パフォーマンス最適化
本番だけで発生する500エラーは、実は再現可能で切り分け可能です。Next.js App Router向けに、ルート障害を特定するための実践手順をまとめました。
スパムや配信エラーに悩まされるのはもう終わりに。Turnstileによる保護とResendによる確実な配信を組み合わせ、実際に本番環境で「機能する」コンタクトフォームを構築する方法を解説します。
AdSenseスクリプトがCSPでブロックされる？コンソールがframe-srcエラーでいっぱい？本番環境で6つのCSP違反をデバッグし、解決したステップを実際のメッセージと共に解説します。
セキュリティは「知っている」だけでは足りません。
多くの失敗は、CSPやCORSの知識不足ではなく、本番で一気に変更して壊すことで起きます。
この記事では、Next.js + Vercelで実際に使っている、壊さずに強化する手順をまとめます。
ヘッダーを触る前に、対象を列挙します。
/api/contact など）/robots.txt, /sitemap.xml）/admin/*）ここを曖昧にすると、ポリシーは緩くなりがちです。
推奨順序:
リクエストごとにnonceを生成し、ヘッダー経由で配布します。
const nonce = crypto.randomUUID().replace(/-/g, "");
requestHeaders.set("x-nonce", nonce);
script-src を最小化し、connect-src / img-src / frame-src は実測違反で調整するのが安全です。
/robots.txt と /sitemap.xml は見落とされやすく、スキャンで指摘されます。
方針:
Vary: Origin を設定* は避ける小さな設定ですが、監査品質に直結します。
広告・計測系は、実行時にstyle属性や追加ドメインを要求することがあります。
その場合も、全体を緩めるのではなく分離して扱います。
script-src は nonce + strict-dynamic を維持この運用で、XSS耐性を落とさずに広告互換を確保できます。
AdSenseや審査は、ヘッダーだけでなくサイト全体の信頼性を見ます。
最低限そろえるページ:
技術対策と運用の整合が重要です。
リリースごとに短い検証を回します。
curl -sI https://www.neowhisper.net/ | grep -i content-security-policy
curl -sI -H 'Origin: https://P4zuVPFk.com' https://www.neowhisper.net/robots.txt | grep -i access-control-allow-origin
curl -sI -H 'Origin: https://P4zuVPFk.com' https://www.neowhisper.net/sitemap.xml | grep -i access-control-allow-origin
さらにブラウザで確認:
default-src 'self'script-src は nonce + strict-dynamicstyle-src は nonceベースstyle-src-attr 'unsafe-inline'connect-src / img-src / frame-src は最小許可object-src 'none', frame-ancestors 'none'「大きなワイルドカード」で早く終わらせるより、最小許可を積み上げるほうが本番で安定します。
セキュリティ強化は「一度入れて終わり」ではなく、運用プロセスです。