グローバル間フェッチの使用

この記事では、フェッチ（および潜在的に同種のリソース取得の振る舞いを示す他の API）で発生するエッジケースについて説明します。 相対 URL を含む オリジン間フェッチ（cross-origin fetch）が <iframe> から開始される場合、相対 URL は iframe のロケーションではなく現在のグローバルなロケーションに対して解決していました。

エッジケース

多くのサイトは、このエッジケースに立ち向かうことはありません。 それを見るには次のようにします。

  • 同一オリジン（same-origin）の iframe が必要です。
  • その同一オリジンの iframe には、異なるベース URL を持つロケーションが必要です。
  • フェッチ関数をグローバル間（cross-global）で使用する必要があります。 例えば、frame.contentWindow.fetch()。
  • フェッチするために渡す URL は相対である必要があります。

問題

以前は、例えば次のように、現在のグローバルに対して相対 URL を解決していました。

let absolute = new URL(relative, window.location.href)

これ自体は問題ではありません。 この種の振る舞いを示すさまざまな API が仕様で定義されている振る舞いと矛盾してそれを実行しているだけであり、それがさらに問題を引き起こす可能性があります。

解決策

Firefox 60 以降では、Mozilla は、使用している fetch() 関数を所有するグローバルに対して相対 URL を解決します（バグ 1432272 を参照）。 したがって、上記の場合、次のように、iframe のロケーションに対して解決します。

let absolute = new URL(relative, frame.contentWindow.location.href)

今後の潜在的な問題を軽減するために、この振る舞いの変更に合わせた新しい仕様を取得することについて、多くの議論が進行中です。

関連トピック