aタグで「target=”_blank”」を記述した際に一緒に設定しておきたい「noopener」と「noreferrer」

aタグで別タブで開くリンクを実装した時、「target=“_blank”」と記述しますが、実はこの記述では不十分とされています。

では、どのように記述すればよいのでしょうか？

実際のコードとともに紹介いたします。

rel属性で設定を追加

<a href=”【リンク先のURL】” target=“_blank” rel=”noreferrer noopener”>
    外部リンクです。
</a>

rel属性でnoreferrerとnoopenerを指定します。たったこれだけ。

誤字に注意しましょう。

なぜ「noopener」や「noreferrer」を記述する必要があるのか

基本的にnoopenerとnoreferrerは脆弱性の対策と言われています。

target=”_blank”は元のページをwindow.openerオブジェクトとして持つので、リンク先のページから「window.opener.location = “【危険なサイトのURL】”」といった形で元ページから操作できてしまいます。

noopenerを利用することでこういった脆弱性の対策ができます。

そして、noreferrerはnoopenerとほぼ同じ意味ですが、openerとreferrerでは対応するブラウザが若干異なるようです。

記述が面倒ならサーバーサイドで関数を作っておこう。

noopenerやnoreferrerという単語を書くのが面倒、もしくはつけ忘れ、誤字がありそうな場合は関数化してしまいましょう。

WordPressの場合、以下のような記述になります。

// 関数を作るとき
function target_blank() {
  return 'target="_blank" rel="noopener noreferrer"';
}

<!-- 関数を呼び出すとき -->
<a href="https://example.com" <?php echo target_blank(); ?> >
  外部リンクです
</a>

まとめ – ユーザーにとって優しいサイトを作ろう –

今回はtarget=”_blank”の紹介をしましたが、まだまだ細かく注意しなければならない部分がたくさんあります。

脆弱性やアンチパターンをなるべく潰してユーザーに優しいサイトを作っていきましょう。