XM Cloud Pagesとエクスペリエンス エディター上で、パブリック アセットとして保存されているSVGアイコンの読み込みに失敗する場合があります。
事象が発生した場合、以下のようなメッセージが表示されます。
Unsafe attempt to load URL <URL> from frame with URL <URL>. Domains, protocols and ports must match.
（訳：URL <URL>のフレームからURL <URL>のロードを試行するのは安全ではありません。ドメイン、プロトコルおよびポートは一致している必要があります。）
または
Security Error: Content at <URL> may not load data from <URL>
（訳：セキュリティ エラー：<URL>のコンテンツは<URL>からのデータをロードすることができません）
この事象は、セキュリティ上の理由によりブラウザによって強制される同一生成元ポリシー（Same-Origin Policy、SOP）が原因で発生します。読み込まれた要素（例えばSVGアイコンなど）は、デフォルトの制約として外部リクエストに対するオリジン間リソース共有（Cross-Origin Resource Sharing、CORS）をサポートしていません。SitecoreがSitecore Pagesまたはエクスペリエンス エディター上のコンテンツ ページをレンダリングする際、Content Managementインスタンスを介したインタラクションが発生します。その結果、「Referer」と「Request URL」が異なることとなり、外部リクエストとして扱われるようになります。
その結果、ブラウザは厳密な同一生成元ポリシー ルールを強制します。
解決策として、外部SVGファイルは同じドメイン、プロトコル、ポート上にホストすることを推奨いたします。そのため、<svg>と<path>エレメント、もしくはJSS/Next.js <Image> コンポーネントを使用することを検討してください。