課題 5: CSP / cross-origin iframe / Hydration ミスマッチ
3 つの独立した制約をまとめた課題。CSP と Hydration は Edge 型が有利。 cross-origin iframe は Edge・DOM オーバーレイ型ともに構造的制約。
5-1: strict CSP（Content Security Policy）
🔴 DOM オーバーレイ型（競合）strict CSP でスクリプトブロック
Content-Security-Policy ヘッダ（strict 設定）:
Content-Security-Policy:
script-src 'self';
require-trusted-types-for 'script';
❌ overlay.js（外部スクリプト）: 確認中...
✅ Edge補正（HTML書き換え）: スクリプト不要 — CSP制約なし
strict CSP（script-src 'self'）環境では、CDN から配信される overlay.js（accessiBe / UserWay 等）がブラウザに拒否される。 結果、補正ゼロのページがエンドユーザーに提供される。
✅ Edge補正済み（Siteforce）追加スクリプト不要 — CSP 制約なし
✅ Edge は HTTP レスポンスを書き換えるだけ
<script> タグを追加しないため、
CSP ヘッダの
CSP ヘッダの
script-src ディレクティブに影響されない。<!-- Siteforce が返す HTML（スクリプト追加なし）-->
<button
style="color:#000"
data-siteforce="corrected"
>
...
</button>
<!-- overlay.js のような外部 <script> は不要 -->
Siteforce は HTML 自体を書き換えるアーキテクチャのため、 strict CSP 環境でも補正が有効に機能する。
5-2: cross-origin iframe
🚫 構造的制約Edge・overlay型ともに補正不可
<iframe src="https://example.com" />
// Edge が試みる補正:
const iframeDoc = iframe.contentDocument;
// → SecurityError: Blocked a frame with origin
// "http://localhost:3006" from accessing
// a cross-origin frame.
// UserWay 公式も iframe 内コンテンツへの
// アクセス不可を認めている [CU-R22-001]
same-origin policy により、cross-origin iframe の内部ドキュメントには Edge も overlay スクリプトもアクセスできない。 Siteforce は「補正不可」として警告ダッシュボードに表示する。
5-3: React Hydration ミスマッチ
⚠️ DOM オーバーレイ型（競合）Hydration 警告を誘発する場合がある
Hydration 警告検出: 0 件
// DOM オーバーレイ型の動作:
// 1. Next.js が SSR HTML を返す
// 2. React が Hydration を実行
// 3. overlay.js が DOM を書き換え
// 4. React が次の再レンダリングで差分を検出
// → "Warning: Prop 'aria-label' did not
// match." などの Hydration 警告
// ボタンを押して警告を再現できる
「DOM オーバーレイ補正を適用」ボタンで競合製品の動作を再現。 overlay が DOM を書き換えた後、React は SSR 時の props と不一致を検出する。
✅ Edge補正済み（Siteforce）補正済み HTML が「正解」— Hydration 安全
✅ Hydration 警告なし
// Siteforce の動作:
// 1. Edge が SSR HTML を補正して返す
// (aria-label, alt 等を付与済み)
// 2. React が Hydration を実行
// → SSR HTML と React props が一致
// → Hydration 警告なし
// 3. overlay による後付け DOM 変更は不要
// 設計次第で Hydration 警告を完全に回避できる
Edge 補正は SSR HTML 自体を書き換えるため、 React が Hydration する時点で HTML と props が一致している。 後付けの DOM 変更がないため、Hydration ミスマッチが発生しにくい。
結論: CSP（✅）と Hydration（✅）は Edge 型の構造的優位。 cross-origin iframe（🚫）は同一オリジンポリシーにより Edge・overlay型ともに補正不可。 UserWay は公式に iframe 非対応を認めている [CU-R22-001]。