Response: redirected プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

redirected は Response インターフェイスの読み取り専用プロパティで、このレスポンスがリダイレクトされたリクエストの結果であるかどうかを示します。

メモ: redirected に頼ってリダイレクトをフィルタリングしていると、偽造されたリダイレクトによって、コンテンツが期待通りに動作しなくなることが簡単に起こります。 その代わり、 fetch() を呼び出すときにフィルタリングを行うべきです。 これを行う例を示したリダイレクトの禁止を参照してください。

値

論理値で、レスポンスがリクエストがリダイレクトされたことを示す場合は true となります。

例

リダイレクトの検出

レスポンスがリダイレクトされたものであるかどうかを調べるには、 Response オブジェクトのこのフラグをチェックするだけです。 下記のコードでは、取得処理中にリダイレクトが発生した場合、要素にテキストメッセージが挿入されます。 ただし、下記のリダイレクトの禁止で記述しているように、予想外のリダイレクトが発生した場合に完全に拒否するほど安全ではないことに注意してください。

url プロパティは、リダイレクト後の最終的な URL を返します。

js
fetch("awesome-picture.jpg")
  .then((response) => {
    const elem = document.getElementById("warning-message-box");
    elem.textContent = response.redirected ? "予期しないリダイレクト" : "";
    // リダイレクト後の最終 URL
    console.log(response.url);
    return response.blob();
  })
  .then((imageBlob) => {
    const imgObjectURL = URL.createObjectURL(imageBlob);
    document.getElementById("img-element-id").src = imgObjectURL;
  });

リダイレクトの禁止

redirected を使用して手動でリダイレクトをフィルタリングすると、リダイレクトの偽造が可能になるため、代わりに fetch() を呼び出す際に init 引数でリダイレクトモードを "error" に設定する必要があります、例えば次のようにします。

js
fetch("awesome-picture.jpg", { redirect: "error" })
  .then((response) => response.blob())
  .then((imageBlob) => {
    const imgObjectURL = URL.createObjectURL(imageBlob);
    document.getElementById("img-element-id").src = imgObjectURL;
  });

仕様書

Specification
Fetch Standard
# ref-for-dom-response-redirected①

ブラウザーの互換性

BCD tables only load in the browser

関連情報