ホーム

HTTPリダイレクトとjavascriptのリダイレクト処理の違いについて

導入

アプリケーションを開発していると、リダイレクト処理を実装することが多々あります。 今回は誤解しやすいHTTPリダイレクトとjavascriptのリダイレクト処理の違いを解説します。

この記事を読んでわかること

  • HTTPリダイレクトの使い方
  • Javascriptのリダイレクトの使い方

目次

  1. リダイレクトとは
  2. HTTPリダイレクト

    1. 実装例
    2. 動作確認
  3. クライアントスクリプトによるリダイレクト

    1. 実装例
    2. 動作確認
  4. 【参考】metaタグによるリダイレクト

    1. 実装例
    2. 動作確認
  5. まとめ

リダイレクトとは

リダイレクト処理について、Wikipediaの定義は以下の通りです。

ウェブサイトにおけるリダイレクト(英: redirect)とは、ウェブサイトの閲覧において、指定したウェブページから自動的に他のウェブページに転送されること。URLリダイレクト(URL redirection)とも言われる。 通常はウェブページのURLが変わったときに、元のURLから新しいURLへ誘導するときに用いられる。フィッシング詐欺サイトへの誘導などで用いられている場合もある。

あるサイトを開くときに、URLが変わって画面が表示されることがあります。
ユーザから見ればただ画面が表示されただけに見えますが、システム的には別のURLに遷移する処理が行われています。これがリダイレクトです。

アプリケーションを開発する際に良く使う手法ですが、一言でリダイレクトと言っても様々なパターンがあります。

HTTPリダイレクト

HTTPヘッダにあるHTTPステータスコードにてリダイレクトの種類を伝え、Location:ヘッダで移動先を伝える方法です。 サーバサイドのレスポンスでリダイレクトさせる場合はこの手法で実装します。

ステータスコードの種類には301 Moved Permanently(恒久的な移転)や302 Found(発見)などがあります。

今回はnode.jsのexpressフレームワークを使って実装してみます。

実装例

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello World!');
});

// "http://localhost:3000/sample"にアクセスすると、githubのページにリダイレクトします。
app.get('/sample', (req, res) => {
    res.redirect(302, 'https://github.com/engineer-ruirui');
});

app.listen(3000, ()=> {
    console.log('Start server port:3000');
});

node.jsやexpressの説明は省略します。
expressのリダイレクトメソッドを使うと、ステータスコード302でgithubのページにリダイレクトされます。

【参考】expressのredirectメソッドについて

動作確認

アプリケーションを起動して、トップページでGoogle Chromeの開発者ツールを開き、ネットワークタブを開きます。 “Preserve log”にチェックを入れておきます。
※このチェックがないとリダイレクト処理のログが取れません。

ScreenShot 2020-09-06 15.44.16.png

http://localhost:3000/sampleにアクセスすると、githubのページにリダイレクトされるのが確認できます。

ScreenShot 2020-09-06 15.45.12.png

無事githubの画面が表示されました。
ここでネットワークタブを見ると、一番上に”sample”というステータスコード302の通信結果があります。
詳細を確認していきます。

ScreenShot 2020-09-06 16.04.14.png

Response HeadersのLocationにhttps://github.com/engineer-ruiruiが設定されているのが確認できました。
さらに通信結果を見ると、https://github.com/engineer-ruiruiにリクエストして、ステータスコード200が返却されています。

githubページにリダイレクトされ、githubページを表示するためのリクエストが成功し、画面が表示されていることがわかります。
これがHTTPリダイレクト処理です。

ScreenShot 2020-09-06 16.07.39.png

クライアントスクリプトによるリダイレクト

実装例

JavaScriptでリダイレクトを実装するには、locationオブジェクトのhrefプロパティを使用します。

location.href="https://github.com/engineer-ruirui";

以下のようにサンプルを実装します。
「リダイレクト」ボタンを押下するとhttps://github.com/engineer-ruiruiにリダイレクトされます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>サンプル</title>
  </head>
  <body>
    <input type="button" onclick="test()" value="リダイレクト">
    <script type="text/javascript">
        function test(){
          location.href='https://github.com/engineer-ruirui'
        }
    </script>
  </body>
</html>

動作確認

index.htmlを作成し、画面を表示します。 同様にネットワークタブを開いておきます。

ScreenShot 2020-09-06 16.37.21.png

「リダイレクト」ボタンを押下すると、githubページに遷移します。
しかし、ステータスコード302の通信が無いことがわかります。

ScreenShot 2020-09-06 16.41.06.png

これがHTTPリダイレクトとの違いです。
javascriptにおけるリダイレクトの挙動は、直接画面にアクセスした時の挙動と同じになります。

【参考】metaタグによるリダイレクト

実装例

参考までにhtmlでリダイレクトする方法を紹介します。
HTMLのmeta要素の http-equiv属性の値に”refresh”、content属性にhtmlを読み込んでから何秒後に転送させるかを指定することでリダイレクトできます。
このときのHTTPステータスコードは、302ではなく、リダイレクトなしで直接アクセスした場合と同様のコードが返されます。

以下のように記載すると、5秒後にhttps://github.com/engineer-ruiruiにリダイレクトされます。

<meta http-equiv="Refresh" content="5; url=https://github.com/engineer-ruirui">

先ほどのサンプルに1行metaタグを追加して、動作確認していきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="Refresh" content="5; url=https://github.com/engineer-ruirui">
    <title>サンプル</title>
  </head>
  <body>
    <input type="button" onclick="test()" value="リダイレクト">
    <script type="text/javascript">
        function test(){
          location.href='https://github.com/engineer-ruirui'
        }
    </script>
  </body>
</html>

動作確認

画面を表示し、ネットワークタブを開きます。

ScreenShot 2020-09-06 16.58.17.png

5秒後にgithubページにリダイレクトされることを確認します。 しかし、今回もステータスコード302の通信が無いことがわかります。

ScreenShot 2020-09-06 16.58.23.png

まとめ

本日はHTTPリダイレクトとjavascriptのリダイレクト処理の違いを説明しました。
Webに携わっていると避けては通れないリダイレクト処理ですが、これらの違いは誤解しやすいので、気を付けておきましょう。