課題5: cross-origin iframe + strict CSP + Hydration

strict CSP (default-src 'self'; script-src 'self'; frame-src https://example.com) 下での Siteforce CDN/Edge + si.js の対応可否を、CSP・iframe・Hydration の 3 点で切り分ける。

A. strict CSP: 外部スクリプトは落ち、同一オリジン注入は生存

別オリジンの <script src="https://cdn.example.org/overlay.js"> を動的 append する。CSP script-src 'self' で遮断され、securitypolicyviolation で捕捉する。

同一オリジンの /self-fix.js は許可され、CTA ボタンのコントラストを補正する。Edge の同一オリジン bootstrap 注入は strict CSP 下でも生存する。

外部スクリプト読込を試行中...
self-fix.js 未実行

B. cross-origin iframe 内は補正不可

<iframe src="https://example.com"> を埋め込み、親ページ JS から iframe.contentWindow.document を読もうとする。同一オリジンポリシーで SecurityError になる。Edge/si.js とも iframe 内側は補正不可。

iframe 読取を試行中...

iframe ホスト側にも Siteforce 導入を提案するクロスセルの余地がある。

C. Hydration mismatch 最小再現

サーバ HTML 相当の <span id="h"> を静的に置き、読込後の JS がクライアント期待値と比較する。実フレームワークの hydration warning の最小相当。

server 側: サーバ側テキスト

hydration 判定中...

Edge が補正済み HTML を「正解」として配れば、mismatch は減る。

結論