My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

リファラ (REFERRER) 制御方法を確認しました

f:id:sntkk3:20170912170403j:plain

リファラ (REFERRER) 制御方法を確認しました

こちらについてご説明する前に、「リファラって何?」という方のために、以下ご説明いたします。

リファラ (REFERRER) とは?

どこから現在のページに来ているか、ユーザーのアクセス元を示す情報のことです。
リファラ情報取得のため、リンク先ページでも取得用の設定が必要です(後述にて別途説明)


【参考サイト】

e-words.jp


そのため、サイト運営者にとっては、
「自サイトに訪れているユーザーはどんな人たちか?」
需要、傾向を知るのに役立つ情報となります。

しかし、その一方で、リンク元サイトとしては、
「セキュリティ上の理由などにより、リファラを制御(リンク先で非表示に)したい」
という場合も生じてきます。

今回の私もそういった理由により、リファラ制御の実現方法を調べてみました。

後述にてその種類、確認結果をシェアさせていただきますが、まずはその前にリファラの取得方法について

参照先(リンク先)ページにてリファラ情報を取得する方法としては、以下となります。

リファラ取得方法

参照先ページでのリファラ取得方法について、

ページ headタグ内に以下スクリプトを記述することで、リファラ情報を取得・表示することができます。

<SCRIPT LANGUAGE="JavaScript">
<!--
  document.write('URL:' + document.referrer);
//-->
</SCRIPT>


では、次に、リファラ制御に有効と言われていた各種方法と、実際の確認結果をご報告いたします。

リファラ制御方法の種類・確認結果

各種方法

1. a要素にtarget="_blank"を設定 (参照元WordPressの時のみ有効)
記述例:

<a href="http:test/index.html" target="_blank">



2. a要素にrel=noreferrerを設定
記述例:

<a href="http:test/index.html" rel=noreferrer>



3. a要素にreferrerpolicy="no-referrer"を設定
記述例:

<a href="http:test/index.html" referrerpolicy="no-referrer">




4. 中間ページからのリダイレクト(HTMLでリダイレクト)


5. 中間ページからのリダイレクト(JavaScriptでリダイレクト)


6. 短縮URLでリンク先を指定


7. meta name="referrer" content="no-referrer"をheadタグ内に記述
記述例:

<meta name="referrer" content="no-referrer">



確認結果

[前提] 確認時のブラウザにはChromeを使用

a. 通常のHTMLページの場合

No 方法 リンク リファラ表示結果
1 target_blank 次のページにジャンプ 表示される
2 no refferer 次のページにジャンプ 表示されない
3 referrerpolicy 次のページにジャンプ 表示されない
4 HTMLでリダイレクト 次のページにジャンプ 中間ページURLが表示される
5 JavaScriptでリダイレクト 次のページにジャンプ 中間ページURLが表示される
6 短縮URL 次のページにジャンプ 表示される
7 meta name="referrer"※ 次のページからご確認ください 表示されない

※以下をheadタグ内に記述する方法です。

<meta name="referrer" content="no-referrer">

b. WordPressページの場合

No 方法 リファラ表示結果
1 target_blank ※2 表示されない
2 no refferer 表示されない
3 referrerpolicy 表示されない
4 HTMLでリダイレクト 中間ページURLが表示される
5 JavaScriptでリダイレクト 中間ページURLが表示される
6 短縮URL 表示される

※2 WordPressの場合、セキュリティ上の機能により、
外部リンクに「target=”_blank”(リンクを新しいタブで開く)」を設定すると、そのリンクには「rel=”noopener noreferrer”」属性が自動的に付加されるという性質があるようです。そのため、参照元WordPress内記事の場合、外部リンクを新しいタブで開く設定をするだけで、リファラ情報を制御することができます。


【参考記事】
nelog.jp


WordPressページからのリファラ制御確認用デモはこちらです。



以上、各種リファラ制御方法と確認結果のご報告でした。
上記によりすべての制御方法を網羅しているわけではありませんが、ご参考いただけたら幸いです。


【参考サイト】
qiita.com