【対策】「noopener noreferrer」の自動付与の問題点は？

文中の説明画像をクリックすると拡大します。

Pocket

新しいウィンドウで開くリンクタグに付与される「rel=”noopener”」って何？
「rel="noopener"」はInternet Explorer(IE)では動作しない
「rel="noopener"」の自動設定はWordPress4.7.4から対応
「rel="noreferrer"」を設定するとリファラー情報をサーバーに送信しない
リファラー情報の有無はアフィリエイトに影響があるのか？
まとめ

新しいウィンドウで開くリンクタグに付与される「rel=”noopener”」って何？

WordPressの投稿や固定ページでリンクを設定する際に、「リンクを新しいタブ」にチェックを入れて設定すると、アンカータグに「rel="noopener"」という属性が設定されます。

これは通常のリンクではなく、「target="_blank"（新しいタブで開く）」リンクの時にのみ設定される属性です

「rel="noopener"」とは一体何でしょうか。

「rel="noopener"」の役割は、新規タブで開いた新しいページ（子画面）に記述されているJavaScriptのプログラムから、リンク元のページ（親画面）のURLを操作できなくするための記述です。

例えば、自分のWebサイトをWordPressで構築しているとします。

その自サイト内のある投稿ページから、外部サイトへのリンクを「新しいタブ」で開くように設定します。リンク先は外部サイトなので、自分で制作したWebサイトではありません。

もしリンク先の外部サイトのページを開いた時に、そのページに特殊なJavaScriptが記載されていると、リンク元になった自サイトの投稿ページを開いていたタブのページが、別のページへ操作されてしまうのです。

具体的に言うと、新しいタブで開いたページのソースコードの中に以下のようなJavaScriptが記載されていると、リンク元になった自サイトのページが別のURLのページへと遷移します。

【JavaScript】

<script>
window.opener.location = "http://www.example.com"
</script>

新しいタブで開いたページのソースコードに上記のJavaScriptが記述されていると、リンク元になった親画面のページが「http://www.example.com」に勝手に遷移されてしまいます。

もしこの時、新規タブで開いたページが悪意のあるページだとすると、親画面のページがフィッシングサイトなどのページに遷移させられるかもしれません。

このような事にならないために、WordPressでは新しいタブで開く外部リンクを設定するときに、自動的にアンカータグに「rel="noopener"」が設定されるようになっています。

「rel="noopener"」が記述されていると、新規タブで開いたページに上記のJavaScriptが記述されていても、親画面のページが別のページに遷移させられることを防げます。

「rel="noopener"」はInternet Explorer(IE)では動作しない

セキュリティ対策として重要な「rel="noopener"」ですが、2019年1月時点でInternet Explorer11~~とEdgeのマイクロソフトが公開している最新のブラウザ~~では、正常に機能しません。

<追記>
Edgeは、2020/1/15にリリースされたバージョン（79）より対応しています。

Internet Explorer11を使っている場合は、新規タブで開いたページに「window.opener.location = "http://www.example.com"
」が記述されていると、「rel="noopener"」を指定していても、親画面が「http://www.example.com」に遷移してしまいます。

その他のブラウザでの「rel="noopener"」の対応状況は、以下のサイトをご覧ください。

【参考】Can I use noopener