CSP · nonce · strict-dynamic · リモート Mac 2026
2026 リモート Mac フロント実装の要点：
Content-Security-Policy の nonce・strict-dynamic と Safari エラー対照／公開前三歩
2026.04.08
Web フロント／セキュリティ
約 8 分
Web フロントが nonce／hash で 'unsafe-inline' を外したあと、Safari だけ落ちるときの対照と手順です。表・strict-dynamic・リモート検証・公開前三歩まで。関連：デプロイと Safari 検証、Playwright WebKit。
SSR／タグマネージャ／iframe · リモート Mac
01 CSP の基礎と Safari の違い
script-src から 'unsafe-inline' を外すとインラインは nonce か hash が必須です。WebKit はイベント・ワーカーで Chromium と差が出ます。style-src も同様に第三者ウィジェットの style 注入を先に洗い出します。
- 動的挿入は nonce 継承か hash へ。
frame-src過剰で決済 iframe が消える。- 古い nonce の HTML が CDN に残ると断続ブロック。
02 nonce／hash 設定対照表
毎回 HTML を組むなら nonce、固定インラインなら hash。
| 観点 | nonce | hash |
|---|---|---|
| パターン | 'nonce-…' とタグ一致 |
'sha256-…' 改行に弱い |
| 用途 | SSR・strict-dynamic 根 |
小さな固定スニペット |
| リスク | stale HTML | minify で無効化 |
| Safari | チャンクローダへ nonce | 再 hash 忘れ |
ヘッダ例（擬似コード）
const n = res.locals.cspNonce;
res.setHeader('Content-Security-Policy', [
"default-src 'self'",
`script-src 'nonce-${n}' 'strict-dynamic' https:`,
`style-src 'self' 'nonce-${n}'`,
"object-src 'none'", "base-uri 'none'", "frame-ancestors 'none'"
].join('; '));
03 strict-dynamic の導入手順
'strict-dynamic' は nonce 信頼スクリプトから子を読むモデル。ホスト列だけでは足りない経路があります。
- 先頭同期
<script>に nonce。 - 遅延読みは信頼チェーン内へ。第三者素タグは別設計。
script-srcURL 列を縮小しconnect-srcを実態へ。Report-Onlyで本番同等 nonce を先試験。- Service Worker 等がポリシー外でないか。
04 リモート Safari／WebKit 検証フロー
リモート Mac の Safari でステージングを HTTPS 開き、プライベート＋コンソールで blocked:csp を拾います。同一ホストで Playwright webkit のスモークを回しつつ、決済と OAuth は手動でも一度確認します。
| コンソールの兆候 | 疑う directive | 修正の方向 |
|---|---|---|
| 実行拒否（nonce 等） | script-src |
ヘッダとタグ一致・キャッシュ |
| 読込違反 | connect-src／frame-src |
API・iframe 許可 |
| style 拒否 | style-src |
外部化・hash・style nonce |
05 よくあるブロック FAQ
Q. Chrome だけ通る？ A. WebKit 差があるため実機必須。
Q. strict-dynamic でホスト追加だけ？ A. 動的経路は nonce チェーンが本体。
Q. nonce 固定？ A. レスポンスごと乱数が前提。
06 公開前三歩の受入れチェックリスト
- 一：ステージング CSP を本番と同一（report-uri も）。
- 二：ログイン・決済・ダッシュ・エラーで
blocked:cspゼロ。 - 三：OS／Safari 版とスクショをチケットへ。依存更新後に再確認。
引用メモ：ヘッダ一致・画面カバレッジ・証跡の三点セット。マージ前にリモート実機で再現したコンソール行をそのまま貼るとレビューが速いです。