マーケティング現場では依然として手書きの静的 HTML が高速表示・監査対応・CDN 障害時の耐性のバランスで選ばれます。2026年の必須ガードレールは、第三者の <script> と <link rel="stylesheet"> すべてに Subresource Integrity（SRI） を載せること、整合チェックに参加させる取得パスでは crossorigin="anonymous" を明示すること、そして HTML が実際に読み込むものと一致する Content-Security-Policy を返すことです。スタイルの部品化には CSS @scope で静的マーケ HTML を隔離する 記事のパターンも併用し、見た目の退行をサプライチェーン事故と取り違えないようにしてください。
本文では失敗モードと数値目安、ロールアウト順を整理します。SHA-384 ダイジェスト、上流パッチ時にハッシュを更新するリリース每に約 15 分のバッファ、コンプライアンス_freeze 前にクラウド Mac mini で1 日あたり約 16.9 ドルの実機リハーサル、という運用イメージで読んでください。
静的サイトでも SRI が要る理由
サーバー側で動的コードを実行しなくても、CDN エッジや中間キャッシュが配る JavaScript が改ざんされれば、チェックアウトフォームからの漏えいが現実になります。SRI はバイト列が固定ダイジェストと一致しない実行を拒否し、静かなサプライチェーン侵害をコンソールエラーへ変換して監視可能にします。SRI 無しの静的 HTML は、CI ランナーから訪問者までの経路にあるすべての仲介を信じることになります。
金融・医療・公共など規制領域では、実行した OpenSSL コマンドと得られたハッシュを変更チケットに添付し、監査人が独立に再検証できるようにすることが求められます。エビデンスは「設定ファイルのスクショ」ではなく再現可能なコマンドログが中心です。
静的パイプラインではマーケ担当が CMS から HTML を直接触るため、ベンダースクリプトの URL を差し替えた瞬間にハッシュが古くなるリスクが高いです。レビューでは「URL と integrity のペア」を必須チェック項目にし、プレビュー環境のレスポンスヘッダも本番と揃えてください。
アルゴリズム選定と OpenSSL によるダイジェスト
ベンダー向けスクリプトには sha384 を推奨します。衝突耐性とダイジェスト長のバランスが良く、現行の MDN やブラウザ実装の例とも整合します。計算対象は CDN が実際に配るバイト列そのものです。ミニファイ後、オリジンの Brotli 事前圧縮、パイプラインが差し込むバナーコメントの有無まで含め、1 バイトでも違えばハード失敗になります。オブジェクトストレージへアップロードするアーティファクト生成と同じステップでダイジェストを生成してください。
openssl dgst -sha384 -binary ./dist/vendor.js | openssl base64 -AGit にチェックインする YAML マニフェストに URL とダイジェストの両方を保存し、HTML が参照する URL にマニフェスト項目が無い・古い場合は CI を赤にします。ナイトリーで third-party URL を再ダウンロードして比較すると、ベンダーのサイレント再パッチを早期に検知できます。
複数環境（ステージング／カナリア／本番）で同じファイル名でもレスポンスヘッダが違うと、暗号学的には同一でもブラウザの解釈が分岐することがあります。環境横断で取得バイトを固定するか、環境ごとに別マニフェストを持つかをドキュメント化してください。
crossorigin と CORS モード
別オリジンから読む古典的スクリプトでは、integrity と crossorigin="anonymous" を揃えて CORS モードの取得にし、ブラウザが整合検証に必要な情報へアクセスできるようにします。crossorigin を省略すると応答が不透明扱いになり、エンジンごとに検証がスキップされたり挙動が分岐したりします。どの CDN パスが寛容な Access-Control-Allow-Origin を返すかを表にし、マーケが新しいバンドルをアップロードしたら属性セットも同時更新することをデプロイゲートにしてください。
プリロードや modulepreload のようなヒントも同じ原則が適用されます。ヒントと実スクリプトで属性が食い違うと、本番だけで失敗するクラス of バグが出ます。
CDN のキャッシュキーとパージ順序
バンドルをローテーションするときは HTML と JavaScript のパージ順を設計します。古い HTML が消えたパスを指すと 404 障害、古い JS が残って新しい HTML と組み合わさると整合性エラーが増えます。コンテンツハッシュ付きファイル名を採用すればイミュータブルキャッシュと相性が良い一方、ブックマークされたランディングのために安定 URL を残すなら、そのブートストラップに SRI を載せ続ける必要があります。
エッジ設定でクエリストリングをキャッシュキーに含めるか否かを変えると、意図せず別オブジェクトを取得してハッシュ不一致が起きます。インフラ変更はフロントのマニフェスト更新と同じ変更票に載せてください。
CSP：ハッシュ、nonce、strict-dynamic
静的サイトはしばしば script-src 'sha256-…' で小さなブートストラップを許可し、HTML をビルドで生成する段階でレスポンス毎の nonce- に移行します。長寿命 nonce と無制限の 'unsafe-inline' を混ぜないでください。やむを得ずレガシーインラインを残すならパスを分離して監視密度を上げます。strict-dynamic は連鎖ローダに効きますが、最初に信頼するスクリプトがルートです。レビュアー向けに信頼の根を図示してください。
Content-Security-Policy-Report-Only で試し、違反レポートのノイズと実害を切り分けます。インラインイベントハンドラや古いタグマネージャが残っていると、レポートだけが雪崩を打つことがあります。
Safari／WebKit の注意点
Safari のネットワークスタックはリクエスト結合が積極的です。整合失敗を調べるときはトラッキング防止の既定値や ITP とストレージ API の相互作用もセットで見ます。Web Inspector のエラー表示は Chromium とタイミングが違うので、QA では画面収録でデザイナー承認まで含めます。macOS Safari と iOS Safari は別マトリクスとして最低週次で触ってください。
| 手法 | 向いているケース | 運用コスト |
|---|---|---|
| SRI + 安定 URL | レガシーランディング | ベンダーパッチのたびに手動でハッシュ更新 |
| ハッシュ付きファイル名 | 新規静的パイプライン | イミュータブルキャッシュ規則が必須 |
| CSP nonce | 静的シェル + 実験用インライン | レスポンス毎のヘッダ注入 |
比較表：手法と運用コスト
上表は意思決定の出発点です。法務が人間可読な資産パスを要求するなら安定 URL + SRI、パージ API 課金を抑えたいならフィンガープリント名、インライン起動が頻繁に変わるなら nonce、という軸で読み替えます。
エンジニアリング判断のマトリクス
安定 URL の SRI は監査でパスを説明しやすい一方、運用は手作業が残ります。フィンガープリント名はパージ回数を減らせますが CDN のキャッシュルールが厳格である必要があります。nonce は実験速度は上がりますがエッジワーカーでの値再利用ミスが致命的です。
ドリフトを防ぐ CI
各第三者 URL を取得しダイジェストを再計算して HTML 属性と突き合わせるジョブを追加します。ナイトリーで走らせ、侵害やサイレント更新を営業時間前に検知します。失敗時は自動で Sev-2 チケットを切り、ベンダー変更か攻撃かを切り分けます。
Pull Request ではマニフェスト差分を必須レビュー対象にし、マーケ向けドキュメントにも「ハッシュ更新手順」を短く載せます。
フォント・モジュール・ワーカー
CDN 経由の @font-face でもフォーマットが安定していれば SRI の価値があります。ES モジュールは import() が CSP の制約を継承するため、許可リストと importmap の対応をドキュメント化します。Dedicated Worker は別コンテキストのポリシーを持ち得るため、メインスレッドのヘッダ一発前提にしないでください。
Service Worker を併用する静的サイトでは、キャッシュに載った古いスクリプトと新しい HTML の組み合わせで整合が崩れることがあります。スキーム全体でバージョン規約を決めます。
report-uri と report-to、Report-Only
導入初期は Content-Security-Policy-Report-Only とログベンダーが解ける report-to から始めます。ロールアウト週はページビューのおおよそ 0.5〜2% がレポートを吐くこともあり、サンプリングでコストと信号のバランスを取ります。
レポート洪水はしばしば本番のみ有効な第三者タグが原因です。ステージングで先に件数を見てから enforcing に切り替えます。
ロールバック戦略
既知良好な HTML アーティファクトとダイジェストを Git タグで保持します。ベンダーのサイレント再パッチなら 30 分以内の前方修正でハッシュを再計算、自社パイプラインの退行なら HTML のコミットを先に戻し、その後 CDN をパージします。整合失敗が急増したらステータスページを更新してください。ユーザーには空白バンドルが見え、グレースフルではありません。
セキュリティレビューで伝える要点
SRI は爆発半径を狭めますが CSP・フレーム保護・サーバ側検証の代替ではありません。スコープされた CSS は機微ウィジェットへのスタイル漏れを抑え、スクリプト整合と補完的です。レビューにはダイジェスト不一致時に読み込みがブロックされる Safari の短い録画を添えます。
成功／失敗それぞれのセッションから HAR を取得し、ヘッダ差分を監査人が追えるようにします。整合失敗は改ざんより Access-Control-Allow-Origin 欠落と相関することが多いです。証跡は一般的な SOC2 の窓に合わせて少なくとも 90 日保管します。
Apple Silicon Mac mini のレンタルはネイティブ WebKit、フォント描画、エンタープライズ顧客に近いキーチェーン既定を再現します。おおよそ1 日 16.9 ドルで本番相当の Content-Security-Policy をプレビューに載せ、海外へ実機を送らず証跡を集められます。伸縮するレンタル期間は VNC と SSH デプロイの併用、ディスクスナップショット、実験的な script-src 強化の即時ロールバックにも向きます。
最後に Cookie 同意バナーを同じ CSP で rehearsal してください。第三者 CMP のインライン起動が新方針に抵触し、金曜デプロイや提出期限直前に初めて赤くなる典型パターンです。大型キャンペーン・規制提出・四半期決算・メンテナンスフリーズ・幹部キーノートの前に、必ず早めにステージします。
SRI・CSP・Safari をまとめて検証
クラウド Mac mini で CDN スクリプトの整合、ヘッダ方針、WebKit のサインオフをコンプライアンスフリーズ前に固めましょう。