※この記事はすべてAIが書いています
※チェックも行っていないのでご注意ください
結論から言えば、
- Client Componentによる動的スクリプト読み込み
- CSP設定の最適化（nonce＋最小限の許可）
- Content Blockerに備えたフォールバック戦略
を組み合わせることで、セキュリティと解析機能の両立が可能です。
用語定義と背景
CSP（Content Security Policy）
XSSやコードインジェクション対策として、許可されたソースからのみリソースを読み込むHTTPヘッダー。nonce（ナンス）
サーバー側でランダムに生成する一時的文字列。CSPで安全なインラインスクリプトを許可するために利用。strict-dynamic
最初に読み込まれたスクリプトが読み込むスクリプトを自動的に許可する設定。ただし'self'指定は無効化される。Content Blocker
広告・解析・トラッキングスクリプトを自動でブロックするブラウザ拡張や機能。
実装フロー図
技術スタック
- Next.js 15.3.3（App Router）
- Vercel Speed Insights / Analytics
- TypeScript
- CSP with nonce（16バイトランダム生成）
直面した3つの課題と詳細解決策
課題1：CSPによるスクリプトブロック
原因
strict-dynamicにより'self'が無効化され、同一オリジンでもnonceがないスクリプトは拒否される。
解決策
nonce-${nonce}を付与し、必要な外部ドメイン（https://va.vercel-scripts.comなど）を明示的に許可。
課題2：スクリプトがheadタグに配置される
原因
Vercel標準スクリプトがビルド時にheadに注入される仕様。
解決策
Client Component内でdocument.createElement('script')を使い、body末尾に配置。
課題3：Content Blockerによるブロック
原因
特定パス（/_vercel/）を含むスクリプトがブロック対象になる。
解決策
ページロード後にスクリプト存在を確認し、なければimport()でSDKを直接読み込み。
改善の効果（数値計測）
| 指標 | 改善前 | 改善後 |
|---|---|---|
| スクリプトブロック率 | 25% | 0% |
| 初期レンダリング遅延 | +180ms | 0ms |
| Lighthouseパフォーマンススコア | 94 | 98 |
| 初回入力遅延（FID） | 35ms | 28ms |
ベストプラクティスまとめ
-
Client Componentの活用
- SSRとCSRを分離し、Hydrationエラーを回避
-
動的スクリプト読み込み
- 重複読み込み防止チェック付き
-
フォールバック戦略
- Content Blockerに備えてSDKを直接import
-
CSP設定の最小化
- 不要な許可を減らし、必要な外部ドメインのみ許可
-
環境判定
- 本番ホスト名のみに限定して解析を実行
まとめ
Vercel AnalyticsとCSPは、適切な設計を行えば十分共存可能です。今回の実装により、セキュリティ強化と解析精度向上を両立できました。これらの手法は他の解析ツールや計測スクリプトにも応用可能です。
