aタグで別タブを開く【target=”_blank”】は【rel=”noopener”】と一緒に！

Webサイトやブログでリンクを張るにはaタグを使いますが、別タブで新しいページを開く時には注意が必要です。

aタグのtarget属性である「target=”_blank”」で別タブを開くならセキュリティ対策として必ず「rel=”noopener”」と一緒に使いましょう。

これはHTMLを使って自分でWebサイトを作る方だけでなく、ブログなどWordPressで無意識にリンクを貼っている方にも関係する問題です。

※現在ではWordPressや各種ブラウザ側で自動的に「rel=”noopener”」を付与していると思いますが。

この記事ではaタグで別タブを開く際に使う「target=”_blank”」の問題点と対策を紹介していきます。

現在target blankにはrel noopenerが自動的に付与？

冒頭で書いた様に、WordPressやブラウザのバージョンによっては自動的にHTMLのaタグに「rel=”noopener”」が付与されます。

ただブラウザ側での自動付与だけでなく、自分でコードを書く時はこの問題は知っておいた方が良いですよね。

ブラウザのtarget blankの対応状況は？

以下の様にChrome、Firefox、Safariなど主なブラウザでは「target=”_blank”」でのリンクに関しては、自動的にaタグへ「rel=”noopener”」を付与する形式へ仕様変更されました。

ですが、アクセスログ解析などリファラを送ることが必要な場合を除いて基本的にはどちらも予め設定しておくのが、やはり最も安全なので別タブで開くtarget=_blankを採用する際は注意していきましょう。

こちらの「rel=”noreferrer”」に関しても同様で、Chrome、Firefox、Safariなど主なブラウザでは自動的にaタグへ「rel=”noreferrer”」が付与されます。

アクセスログ解析などでリファラが必要な場合もあるとは思います。ただ、理由が無い限りは基本的にどちらも設定しておくのが良いと思います。

targetで指定出来るページの開き方は4つ

HTMLでリンクを張る為のaタグですが、タブの開き方を決める4つのtarget属性値にはどんなものがあるのか解説します。

閲覧コンテキストとは

他の閲覧コンテキストを埋め込んでいる閲覧コンテキストとはフレームの事。<iframe>でページを作っていなければ出番はなさそうです。

小難しく書きましたが簡単に言えば、

1. 今見ているのと同じタブやウィンドウで開くのか
2. 別タブや別ウィンドウで開くのか

それだけです。具体的には以下の通り。

① 同じタブで開く target=”_self”

<a href="リンク先のURL" target="_self">同じタブで開く</a>
または、
<a href=リンク先のURL">同じタブで開く</a>

target=”_self”はaタグでリンクを張る際の初期設定なので、2つ目のように省略しても動きは同じです。

② 別タブで開く target=”_blank”

<a href="リンク先のURL" target="_blank">別タブで開く</a>

セキュリティとパフォーマンスの観点から対策をすべきとされています。

では何が問題で、対策はどうすればよいのかを具体的に解説します。

セキュリティにおけるtarget=”_blank” の脆弱性

実はtarget=”_blank”を指定して新しいタブを開くと、リンク先の新しいページから、開く前のリンク元ページにアクセス出来てしまいます。

開かれたページ内から以下のようにwindow.openerを操作出来るからです。

window.opener.location = 'https://phishing.example.com';

開いた新しいページが外部の悪意のあるサイトであった場合、リンク元のあなたのページをフィッシングサイトなどにすり替える事が出来ます。

これをreverse tabnabbing（リバースタブナビング）と言うそうです。

例えばAmazonへ張ったリンク先がフィッシングサイトへのリンクにすり替えられ、知らずにクリックした人がリダイレクトでフィッシングページへ。その際、個人情報を入力してしまう事で情報が取られるわけです。

その対策としてaタグのrel属性にnoopenerやnoreferrerという値を設定する方法があります。

<a href="https://fueru.info/" target="_blank" rel="noopener noreferrer">

target=”_blank” はrel=”noopener noreferre”を一緒に使う！

target=”_blank”で開いたリンク先のページでは window.opener を使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location = newURL によって親ページの URL を変更したりできます。

rel=”noopener”

rel=”noopener”属性は、リンク先のWebページからリンク元のWeb ページへアクセス出来ない様にします。これにより、悪意あるリンク先のサイトからリンク元のサイトを制御したり、書き換えたりするのを防ぎます。

rel=”noreferrer”

rel=”noreferrer”属性は、リンク元のリファラー情報をリンク先へ渡さないようにすることが出来ます。これにより、悪意あるリンク先のサイトはサイト訪問者がどのサイトを参照したかわかりません。

パフォーマンスに関して

Googleのエンジアによると、

「”target=”_blank”を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。』

こういった事からもtarget=”_blank”にはrel=”noopener noreferre”を一緒に使った方が良さそうです。

まとめ

target=”_blank”の問題点は意外と知らない人も多い気がします。

ブラウザが対応してくれている事も有りますが、WordPressなどCMSを使っている人は意識した事すらないかも知れませんね。

target=”_blank”で別タブを開くなら、セキュリティとパフォーマンスの理由から、対策としてrel=”noopener noreferrer“を付け加えると覚えておけば安心です。

関連記事aタグの使い方とルール – アンカー要素：HTML5リファレンス

2022.12.04