リダイレクトを実現するには3つの手段がある。
HTTPリダイレクト
HTTPレスポンスに300番台のステータスコードを含め、Locationヘッダーにリダイレクト先のURLを指定する方法。ブラウザは300番台のレスポンスを受け取ると、直ちに新しいURLにアクセスする。リダイレクトレスポンスについてはブラウザの履歴に残らず、(おそらく)HTMLのパース・レンダリングも行われない。
ステータスコードによって、メソッドやリクエストボディを元のリクエストから引き継ぐかを指定できる。WebページでFormの内容をPOSTメソッドで送信した後に完了画面を表示する際は、リダイレクトで完了画面のページに飛ばすのが良いとされているが、これは完了画面ページにGETメソッドでアクセスさせ、ブラウザの履歴にGETメソッドを残すことで、ページをリロードした際にForm内容の二重送信を防ぐためである。PRG(Post-Redirect-Get)パターンとか呼ばれる。
基本的にこのHTTPリダイレクトを用いるべきだが、サーバー側の設定が必要なため、フロントのみしか触れない開発者は別の手段をとる必要がある。
HTMLリダイレクト
HTMLのmeta要素を利用した方法。head内に例えば次のコードを入れる。
<head>
<meta http-equiv="refresh" content="0; URL=http://www.xxx.com/" />
</head>
秒数に0を設定すれば瞬時にリダイレクトされるが、HTML内にリダイレクトコードを埋め込む以上、HTMLのパースが必要であり、ブラウザの履歴にも残る。なのでブラウザバックをしても瞬時に元のページに飛ばされてしまい、戻れなくなる。
また、HTMLのmetaタグを利用するため当然ながらHTML文書にしか使えず、画像やJsonのレスポンスはこの方法ではリダイレクトできない。
JavaScriptリダイレクト
JavaScriptのwindow.locationプロパティにURLを設定すると新しくページが読み込まれることを利用し、実質的にリダイレクトを実現する。例えば次のようなコードを入れる。
<script> window.location = "http://www.xxx.com/"; </script>
HTMLリダイレクトと同じくHTMLのパースが行われ、ブラウザの履歴にも残る。よくアダルトサイトとかでブラウザバックしても戻れずに延々と元のページに飛ばされるのは、おそらくこれ。
JavaScriptを用いるため、当然JavaScriptが動かない環境では動作しない。今日日JavaScriptをブロックするようなブラウザは無いと思うが、Webスクレイピングのためにヘッドレスブラウザを使っている場合は問題になる。
参考サイト: developer.mozilla.org
