rel="noopener noreferrer"の意味とアフィリエイト広告への影響

WordPressを利用している際にリンクaタグで外部サイトを設定する際に、HTMLで見るとtarget="_blank"に加えてrel="noopener noreferrer"という記述が追加されているのを見たことがある方も多いのではないでしょうか？

実際に意味を分かって使用されている方は少ないかもしれません。

そこで今回は、外部リンクを作成する際に記述するrel="noopenner noreferrer"の意味・役割についてを解説していきます。

WordPressで外部リンクを作成たら、aタグの中に「rel="noopener noreferrer"」とついているんですが、なんなんでしょうか？

こちらはセキュリティの設定です。つけるとセキュリティは上がりますが、アフィリエイターの方だとnoreferrerをつけると参照元ページが取得できなくなるので気をつけましょう。

rel=”noopener noreferrer”とは？

WordPressでは4.7.4から「新しいタブで開く」にチェックを入れると自動的にrel=”noopener noreferrer”が付加されるという仕様に変更されています。

結論から言うと、この2つはセキュリティを向上させる役割があります。

WordPressを利用しなくても、aタグを使って外部リンクをtarget="_blank""を使って新しいタブで開くの設定する際に、rel属性に"noopener"や"noreferrer"を指定することがよくあります。

rel属性に"noopener"と"noreferrer"の両方を指定したい場合は、以下のようにそれぞれの間に半角スペースを空けて記述します。

以下ではそれぞれの役割について、より詳しく解説していきます。
 

rel="noopener"の役割：セキュリティ改善効果

まずrel="noopener"の役割としては大きく、セキュリティの改善効果が挙げられます。

target="_blank"を指定して新しいリンクを開いた場合、リンク先(開かれた新しいタブ)からwindow.openerというオブジェクトを用いてリンク元(元タブ)の操作ができてしまいます。

つまり、リンク先に指定したサイトが悪意あるサイトであったり、ハッキングされているサイト(実質悪意あるサイトの振る舞いをするサイト)だった場合に、リンク先から自分の見ていたリンク元ページが操作されるリスクがあると言うことです。

これを利用してフィッシング詐欺に利用する手法のことをTabnabbing attackと言いますが、rel="noopener"を設定することでこれを防ぐことができます。

Tabnabbing attackについて詳しく知りたい方はこちらの記事がわかりやすかったので、参考にされると良いと思います。(参考)https://blog.jxck.io/entries/2016-06-12/noopener.html

rel="noreferrer"の役割

つぎにrel="noreferrer"の役割ですが、こちらは"noopener"の機能に加えて「参照元のリンク情報を渡さないようにする」という役割があります。

※その他、noopenerに対応していないブラウザ対策として使用する場合もあります。

参照先に対して参照元のリンクを渡さないようにする

rel="noreferrer"を設定することで、リンク先に対して参照元のリンク情報を渡さないようにすることができます。

これはアフィリエイトとしてリンクを利用している場合などに関係してきます。

たとえば、「https://webst8.com/blog/wordpress-start/」というページから「a8.net」のアフィリエイトリンク経由で「yyyyy.com」というページに移動した際に、通常はa8管理画面からどのページから成果発生したかがわかるのですが、それがわからなくなるということです。

◆WordPress4.7.4アップデート内容
該当のWordPressのバージョンにおいてA8.netの広告タグを貼り付けた際に、広告タグ内に自動で「rel="noopener noreferrer"」が挿入されるようになりました。

・これによる、トラッキングへの影響はありません。　売上はこれまで通り発生いたしますのでご安心ください。
・コンバージョンリファラレポートの「リファラ」情報がA8.netにて取得できなくなりました。

　急に「リファラ」情報が取得できなくなった、という事象が発生した場合、　WordPress4.7.4へのアップデートに伴う上記タグの自動付与の影響が考えられます。
WordPress4.7.4アップデートに伴う影響について | a8スタッフブログ

ですので、基本的にアフィリエイター視点で考えると"noreferrer"は記載しない方がより多くの情報を把握できると言えます。

noreferrerを付与しない方法は「wordpress noreferer 削除」などで検索すると色々出てきますのでご確認ください。
（ご利用のテーマによっては最初から削除する設定になっている場合もあります。）

ちなみに、新しいタブで開く(target="_blank")の設定をしていない場合は本内容は関係ないので無視して大丈夫です。

noopener noreferrerは両方とも設定すべき？

なお、先ほどnoreferrerは「"noopener"に対応していないブラウザ対策として使用する」と言いましたが、現在ではほとんどのモダンブラウザでnoopenerが対応しています。

引用元: Can I use?(https://caniuse.com/?search=noopener)

その為、現在ではrel="noreferrer"を設定しなくてもほとんど問題ありません。

ただし、すでにサポートの終了したIE(Internet Explorer)にも対応させたいといった場合などはnoreferrerも設定してあげた方が良いです。

引用元: Can I use?(https://caniuse.com/?search=noreferrer)

(補足): ブラウザによっては「rel=”noopener”」が規定値になっている

また補足ですが、最近の主要ブラウザ(Google Chrome、Safari、Firefoxなど)では「target="_blank"」が指定されているaタグやareaタグに対して、規定値として「rel=”noopener”」が適用されるようになっています。

To conform to a change in the HTML standard, anchor tags with target="_blank" will now imply rel="noopener" by default, this helps prevent tab-napping attacks.

引用元: New in Chrome 88(https://developer.chrome.com/blog/new-in-chrome-88/)

 

Updated the link behavior for "target=_blank" to include rel="noopener" implicitly.

引用元: Safari 12.1 Release Notes(https://developer.apple.com/documentation/safari-release-notes/safari-12_1-release-notes)

 

To prevent the DOM property window.opener from being abused by untrusted third-party sites, Firefox 79 now automatically sets rel=noopener for all links that contain target=_blank.

引用元: Firefox 79: The safe return of shared memory, new tooling, and platform updates(https://hacks.mozilla.org/2020/07/firefox-79/)

ですがまだまだ古いバージョンのブラウザを使用していたり、他のブラウザを使用しているユーザーも多いので、個人的には新しいタブで開く(target="_blank")を設定する場合は、rel="noopener"は付けておいても良いと思います。
 

まとめ

まとめです。今回はrel="noopener noreferrer"の意味・役割やアフィリエイト広告への影響についてをご紹介しました。

rel="noopener noreferrer"はおまじないとして使用している方も多いと思いますが、それぞれの意味や役割をしっかりと知った上で使用するとよいでしょう。

なお、アフィリエイトとは何かを知りたい方は「【アフィリエイトとは】メリット・デメリットと仕組みを解説」をご参考いただけますと幸いです。

WordPressについては「【WordPressの始め方総まとめ】ワードプレスブログの作り方」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。