Response: redirected プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年10月以降、すべてのブラウザーで利用可能です。

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

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

値

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

例

リダイレクトの検出

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

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

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" に設定する必要があります、例えば次のようにします。

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