target=_blankはなぜ危険？外部リンクを開く際の正しい設定方法
WEBZINNEトピックス編集部公開日：2020年3月23日
外部リンクを新規ウィンドウ・多分で開く際、かつては「target=_blank」が標準でしたが、現在では避けるべきとされています。外部リンクを開く際の正しい設定方法をまとめました。
target="_blank"とは何か
アンカー要素（aタグ）のtarget属性は、href要素で指定したリンクURLをどのように開くかを指定する属性です。
指定できる要素は、
| パラメータ | 動作 |
|---|---|
| _self | 同じタブで開く（デフォルト） |
| _blank | 新しいタブ（ブラウザの設定でウィンドウも可）で開く |
| _parent | 親タブで開く。なければ_selfと同じ |
| _top | タブの中の祖先で "最上位"のタブで開く。なければ_selfと同じ |
となっています。
一覧で見た通り、新しいタブで開く場合は、「_blank」一択となります。
target="_blank"がなぜ危険なのか
target="_blank"が危険と言われている理由は、大きく下記の二つの点です。
- リンク先と同プロセスで動くため、リンク先の内容によって自サイトの動作が重くなる
- Javascriptの「window.opener」プロパティで、リンク先ページが自サイトを操作可能（tabnabbing）
つまり、リンクを貼っている側からすると、単純に外部への導線をつけているだけと思っていても、ブラウザのプロセス上は「自サイトの延長線上」に他のサイトを置いているため、悪意のあるサイトへリンクした場合、自サイトを改竄される可能性があります。
また、現在は悪意のないサイトでも、将来的にリンク先サイトが閉鎖して悪意のユーザーにドメインが買収された場合など、将来的なリスクも含んでいると考えて良いでしょう。
詳しくは、下記のGoogle Developerサイトに解説があります。
サイトで rel="noopener" を使用して外部アンカーを開く | Google Developer
tabnabbingについては、下記のサイトに詳しく解説があります。
タブナビング(Tabnabbing)とは | 日立ソリューションズの情報セキュリティブログ
この記事が、2010年のものですから、10年も前から知られていたセキュリティリスクということですね。
target="_blank"はSEOでマイナスなのか？
先ほど見た通り、「target="_blank"」自体はHTMLの標準仕様なので、SEOにとってマイナスの評価になることはありません。
GoogleやMozillaなどのWeb団体が「target="_blank"」の使用について警鐘を鳴らしているのは、先ほどの「tabnabbing」のリスクを考慮した上での事かと思われますので、「target="_blank"」を使ってはいけないという意味ではありません。
target="_blank"を安全に使う方法
とはいえ、リンクを新しいタブで開く方法が「_blank」一択である以上、使わない訳にも行きません。
ここでは安全に使う方法を見ていきます。
rel="noopener"をつける
「rel="noopener"」は、先ほどの「window.opener」プロパティを使えなくする属性値です。
これは信頼できないリンクを開く際、 Window.opener プロパティでリンク元の文書を変更できないようにするために特に役に立つリンク種別です（詳しくは About rel=noopener を参照してください）。ただし、 Referer HTTP ヘッダーは（noreferrer を使用しない限り）提供します。
この属性をつければ、リンク先のサイトが悪意のあるサイトでも、自サイトを操作することができなくなります。
<a href="akuinoarusaito.com" target="_blank" rel="noopener">リンク</a>
これだけで、ほぼほぼ対策完了です。
rel="noreferrer"をつける
社内でシステムや、外部から存在を知られたくない場合は「rel="noreferrer"」をつけるとHTTP ヘッダーでリファラーとして送信しないようにできるため、外部サイトに自サイトのURLを隠すことができます。
別のページへ移動する際にリンク元ページのアドレスなどの値を、ブラウザーが Referer: HTTP ヘッダーでリファラーとして送信しないようにします。
こちらは、先ほどのnoopenerと一緒に使うことができます。
<a href="akuinoarusaito.com" target="_blank" rel="noopener noreferrer">リンク</a>
rel="noopener"がないリンクを探す方法
ページ上でrel="noopener"がないページを探すのはかなり骨が折れます。
テンプレート上で探すのであれば、一括置換ができますが、WordPressなど記事データ上にアンカータグが直接書かれている場合は、かなりの手間になります。
その場合は、DBでアンカー要素を探して潰すか、バッチ処理をする必要があるでしょう。
--
target="_blank"の危険性と対策を見てきました。
外部リンク先が悪意のあるサイトである可能性はかなり低いですが、そのドメインの持ち主が悪意のあるユーザーに変わることは往往にしてあることです。
その意味でも、多少手間でも「rel="noreferrer"」つける癖をつけましょう。