【javascript】リダイレクト処理をする際の注意という記事について

もし、検索エンジンから入ったページでリダイレクト処理がかかってて特定のページに飛ばすとリファラーが自サイトになるのとurlのパラメーターが抜け落ちるみたいなことが書かれている記事があったので備忘録

備忘録

リダイレクト周りの調べ物をしていて理解しきれなかった記事があったので時間を置いて調べた時の備忘録です

▼対象記事

やはり、お前らのJavaScriptでのリダイレクト実装は間違っている

テスト

デモページ1にアクセスしてリンクをクリック
↓
デモページ2でリダイレクト
↓
URLにリダイレクト前のデモ1のURLをパラメーターに追加
↓
どこから流入してきたかわかる、やったね！

どういう動作になってるのか気になったので動作についてコメントアウトしたソースコード↓
対象記事のコード

<script>
// リダイレクト先にパラメーターを引き継ぐ
var redirect_url = "https://twotone.me/web/3733/" + location.search;
// 直前のURLがあるかどうか(urlを直接叩いての流入なのか判別)
if (document.referrer) {
	// リダイレクト先に渡す用のパラメーターを作成
	var referrer = "referrer=" + encodeURIComponent(document.referrer);
	// リダイレクト先にリファラー情報をパラメーターとして渡す
	// (クエリ文字があれば&で繋いでなければ?でクエリ文字として追加)
	redirect_url = redirect_url + (location.search ? '&' : '?') + referrer;
	console.log(referrer);
}
// リダイレクト
location.href = redirect_url;
</script>

document.referrerは直前のURLを参照する

location.searchはクエリ文字(?から始まる文字列)を参照する

データのやり取りするときはencodeURIComponent()を使ったほうがいいみたい

【encodeURIComponent()を使う前】
?referrer=https://twotone.me/test/3734/

【encodeURIComponent()を使った後】
?referrer=https%3A%2F%2Ftwotone.me%2Ftest%2F3734%2F

文字列をエンコードするみたい
他にencodeURIやURLSearchParamsってのもある
使いどころがいまいちわからんけど
日本語対策？

PHPとJavaScriptとLSLのURLエンコードについて動作をまとめてみた