※ 2020年4月26日公開記事に一部追記を加え、2021年1月14日に更新しました。

＜2021年1月14日更新＞

※本記事の公開後に、 WordPressの仕様変更がありました。

WordPressのバージョンを5.1以降にアップデートすると、別タブで開く 「target=”_blank”」属性があるaタグに対して、自動で「rel=”noopener noreferrer”」が付加されるという仕様に変更されました。

文章だけでなく、以下のように写真に対して「新しいタブで開く」を選択した場合にも、自動で「noreferrer noopener 」が 追加されるようになっています。

それによりWordPress5.1以降では、特に記事内の対策を行わなくても大丈夫になりました。

加えて、 Google Chromeの時期アップデート（Google Chrome 88）では、 「target=_blank」リンクは、自動的に「rel=noopener」が付いているものとして扱われるようになるそうです。

また、 SafariやFirefoxは既に、ブラウザー側で「rel=noopener」を自動的に付け加えるセキュリティ対策が施されています。

＜以下本文の内容は 2020年4月26日時点の情報です＞

HTMLの記述をする中で、リンクを新しいタブで開く必要がある場合は、単にtarget="_blank" を使用していらっしゃる方も多いのではないでしょうか。

しかし、target="_blank" にはいくつかの問題点が存在することはご存じでしょうか。今回はその問題点と対策をご紹介します。

目次

---

1. リンクの指定方法
   ①aタグとtarget 属性
   ②同じタブで開く
   ③新規タブで開く
2. target="_blank"の問題点
   ①セキュリティについての問題点（概要）
   ②セキュリティについての問題点（具体例）
   ③パフォーマンスについての問題点
3. target="_blank"の問題への対処法
   ①noopenerの指定
   ②noreffererの指定
4. まとめ

①aタグとtarget 属性

まず、本題に入る前に、HTMLでリンクを貼る時のコードを整理したいと思います。

一般的にリンクを貼る際には以下のようにaタグを使って記述をします。

1. <a href="ここにリンク先のURLを入れる"></a>

さらに、リンク元の表示先をtarget 属性を使用して設定することができ、その種類は大きく下記の２種類に分かれます。

1.同じタブで開く　target="_self"

では、それぞれ整理しながら確認していきましょう。

②同じタブで開く

まずコードの例を２つ下記に示します。

1. <a href="ここにリンク先のURLを入れる target="_self">同じタブで開く</a>
2. <a href=ここにリンク先のURLを入れる">同じタブで開く</a>

③新規タブで開く

さて、ここで今回の記事テーマの" target="_blank"が登場します。
下記のようなコードで新規タブを開くことができます。

1. <a href="ここにリンク先のURLを入れる" target="_blank">新規タブで開く</a>

" target="_blank" を使用すること自体は、新規タブを開くという目的について言えば問題なく動作すると言えるでしょう。

では一体何が問題なのでしょうか。

①セキュリティについての問題点（概要）

target="_blank" のセキュリティ上の脆弱性（セキュリティ上のリスク）について、グーグルのデベロッパー用のサイトで詳しく説明されています。

参考:Tools for Web Developers

上記ページには、window.openerを使用することで、親ウィンドウのオブジェクトにアクセスを行ったり、window.opener.location = newURL によって親ページのURLを書き換えることができる問題があると記載されています。

target="_blank"のリンクは別タブ（別ウィンドウ）で開かれるため、リンク元のページとリンク先のページの両方が一つのブラウザ内に存在していることになります。

②セキュリティについての問題点（具体例）

上記のセキュリティの脆弱性について、少し例を挙げてご説明します。

仮にあなたが参考になる良い記事を見つけて、自分のサイト内のページに target="_blank" でリンクを貼ったとします。

しかし、もしその参考記事が悪意のある第作者によって作られたページだった場合、開かれた新規タブ側で、リンク元のあなたのページのURLを操作できてしまいます。

もし、リンク元のあなたのページが、大手ショッピングサイトなどを装ったフィッシングサイトのURLに書き換えられてしまったらどうでしょうか。

③パフォーマンスについての問題点

同じくパフォーマンスについての問題点もデベロッパー用のサイトに記載があります。

それによると、target="_blank" を使って別のページにリンクを貼っている場合、リンク元のページとリンク先のページは全く同じプロセスを通して実行され、リンク先のページで高い負荷を与えるJavaScriptが実行されていると、リンク元のページにも悪影響を及ぼしパフォーマンスが低下する問題が指摘されています。

 

①noopenerの指定

②noreffererの指定

ブラウザによっては、noopenerがサポートされていないため、noopenerと合わせてnoreffererを指定するのが好ましいと言えるでしょう。

noreffererを指定することで、リンク先にリンク元のリンク情報が送られないようになるため、 noopenerと同じくリンク先からの参照ができなくなります。

上記をまとめると下記のようにコードを書くことがtarget="_blank"の問題の対策になります。

さて、今回はtarget="_blank" の問題点とその対策についてご紹介しました。

まとめると、target="_blank"には、セキュリティとパフォーマンスの2つの点で問題があり、それに対して、noopener noreferrerを加えるという一工夫を行うだけで、しっかりと対策ができるということになります。

今回の記事がtarget="_blank"問題対策の参考になれば幸いです。

ライター：井上

愛知 県内から 名古屋 を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F
TEL ： 052-890-7007（2021-12/16～変更）

TEL： 052-890-7007
※ ホームページ制作や活用サポートのお問い合わせはコチラから