EDS メディアリソースのクロスオリジン埋め込み時のCORS エラー
この記事では、Adobe Experience Manager Edge Delivery Services（EDS）のメディアエンドポイントからSVGやその他のメディアリソースをクロスオリジンに埋め込む際にCORS エラーが発生する理由と、これらのエラーを解決するためのサポートされているアプローチについて説明します。
説明 description
HTML、JavaScript、CSS、メディアアセットなどのEDS コンポーネントをサードパーティサイトまたはCMSに埋め込むと、CSS マスク画像を介して参照されるSVG アイコンまたは画像に対してCORS （Cross-Origin Resource Sharing）エラーが発生します。 これは、EDS CDNから提供されたメディアリソースにAccess-Control-Allow-Originが含まれていないためです ヘッダーを使用し、HTMLおよびJS リソースは使用します。 その結果、ブラウザーはこれらのメディアアセットに対するクロスオリジン要求をブロックし、次のようなエラーが発生します。「‘Access-Control-Allow-Origin’ ヘッダーがリクエストされたリソースに存在しません。
環境
Adobe Experience Manager（AEM）Edge Delivery Services（EDS）、すべてのバージョン
症状
- クロスオリジンのメディアエンドポイントからSVGまたはその他のメディアアセットを読み込む際に、ブラウザー開発者ツールでCORS エラーが発生する
- EDSのHTMLおよびJS リソースには
Access-Control-Allow-Originヘッダーが含まれていますが、メディアリソースには含まれていません。 - 影響を受けるユースケースには、アセット URLがEDS CDNへの絶対URLとして構築されるサードパーティのCMS ページへのEDS コンポーネントの埋め込みが含まれます。
原因
EDS メディアリソースを提供するFastly画像最適化/メディアバスは、カスタム CORS ヘッダー設定をサポートしていません。 この制限は、サイト設定、cdn.yaml応答変換、およびAdmin APIの範囲外です。 これらのエンドポイントへの直接クロスオリジンのアクセスはサポートされていません。ブラウザーCORSの適用を回避するために、すべてのリソースはCDN プロキシを介して同じオリジンで提供する必要があります。
解決策 resolution
問題を解決するには、次の手順に従います。
- EDS オリジンに面するCDNまたはドメインを特定します（例：リクエストをEDS CDNにプロキシする組織のCDN）。
- すべてのアセット URL （CSS マスク画像に使用されるURLを含む）が直接EDS CDN URLではなくCDN ドメインを参照するように、EDS コンポーネントロジックを更新します。
- CDNがEDS オリジンへのリクエストをプロキシし、メディアリソースに適切なCORS ヘッダー（
Access-Control-Allow-Origin: *など）を設定するように設定されていることを確認します。 - サードパーティのCMSまたはそのCDNを制御しない場合は、独自のCDNをEDS CDNのプロキシとして設定し、そのCDNでCORSを設定し、CDNを介してCMSからメディアリソースにアクセスできるようにすることを検討してください。
- これらの変更を行った後、すべてのメディアリクエストが埋め込みページと同じオリジンから提供され、CORS エラーがブラウザー開発者ツールに表示されなくなったことを確認します。