Javascriptを使ったRefererの書き換え方法

タイトルの通り。

ちょいとお仕事絡みでWeb解析ツール使ってて、デバッグのためRefererの書き換えをしたい!と思ったのだけど、意外にググっても情報が出てこない。。。良い感じのプラグインも無いし。

※以下のChromeプラグイン「Referer Control」があるにはあったけど、すげー使いづらい。。。
https://chrome.google.com/webstore/detail/referer-control/hnkcfpcejkafcihlgbojoidoihckciin?hl=ja

で、自分で調べたので、備忘録的にブログに載せておく。

まず、最初に思いついたのが、ChromeとかのDeveloper ToolのConsoleで以下のように書き換える方法。

document.referrer=”http://hoge.com/”;

実際にやってみたけど、Javascriptエラーにはならないがちゃんと上書きされずに元に戻ってしまう。
ブラウザの仕様かしら?元々referer情報はHTTP通信時に付与される情報だし、通信が終わった後でConsoleで変更しても意味無いと言えば無いので、document.referrerへの代入では変更できない仕様なのかもしれない。この辺り、あまり深堀りはしてないけど、調べてみるとちゃんとした理由はあるんだろう。。

で、代わりに使えるメソッド無いのかしら?と思ったら、やっぱりあった。

見つけたのは2つ。
どちらも試してみたけど変更はできた。

1つは、Objectオブジェクトのprototypeにある__definedGetter__()メソッドを使う方法。

<script>document.__defineGetter__(‘referrer’,function(){return “http://www.google.co.jp/?q=test123”;});</script>

ただし、以下のMozillaページみるとわかる通り、ECMAScriptで定義されていないため非推奨。
Object.prototype.__defineGetter__()

なので、もう1つのやり方を使った方が良い。
それがこちら。

<script>Object.defineProperty(document,”referrer”,{value:”http://www.google.co.jp/?q=test456″});</script>

詳細はこちら。
__definedGetter__()のヘルプにもこっちを使ってね、と書いてある。
Object.defineProperty()

あとは、このscriptタグを、解析ツールのタグの手前に挿入してあげれば良い。
例えばGTMのタグであれば、以下のように。

<script>Object.defineProperty(document,”referrer”,{value:”http://www.google.co.jp/?q=test456″});</script>
<!– Google Tag Manager –>
<noscript><iframe src=”//www.googletagmanager.com/ns.html?id=GTM-XXXX” height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>

普通の作業しててReferer書き換えることってあまり無いけど、アクセス解析ツール仕込む際は、基本的にチャネル情報はRefererをベースに設計されているので、Referer変えられないとテストが出来なかったりする。

なので、この方法を頭に入れておくと有益。

この投稿が、同じ悩み抱えてる人の助けになれば幸いです。

今のところ「Javascriptを使ったRefererの書き換え方法」にコメントは無し

コメントを残す