目的
- HTMLのaタグでrel=noopenerだけを使用するのは良くない理由を自分なりに調べてまとめてみた
そもそも<a href="" target="_blank"></a>って？
- aタグで
target="_blank"を指定するとリンク先をブラウザの別タブで開く事ができる。 -
target="_blank"だけだとセキュリティ面出の脆弱性とパフォーマンスに悪影響が有るらしい。
脆弱性
- リンク先のページにwindow.openerというJavaScriptのオブジェクトが存在していたときに
<a href="" target="_blank"></a>が書いてあるリンク元ウインドウの情報が取得されてしまう。またリンク先タブからリンク元タブを制御する事もできてしまう。 - リンク元タブがリンク先タブによってフィッシングサイトにすり替えられたりしてしまう。
パフォーマンスの低下
- 難しい言葉で説明すると一つのスレッドに両方のタブの処理が入るので処理が重くなる可能性がある。
- 簡単に説明すると本来一つのタブ表示に使用している作業スペースでリンク元とリンク先２つのタブの処理を実行しているようなイメージ。リンク先のページに重い処理が合ったときリンク元のページも重くなる。
- スレッドについてわかりやすかったページhttps://wa3.i-3-i.info/word12453.html
解決策
- aタグに
rel=”noopener”を追加して<a href="" target="_blank" rel=”noopener”></a>とする。 -
rel=”noopener”を追加することでリンク元タブとリンク先タブを別スレッドで処理してくれる。 - 別スレッドで処理することでJavaScriptのwindow.openerでリンク元の情報を取得できなくなる。
- 別スレッドで処理することでリンク先ページに影響されること無くリンク元ページの処理を行うことができる。
- セキュリティ面で更に強固にしたいならaタグに
rel=”noopener noreferrer”と記載する。 -
rel=”noreferrer”はリンク先にリンク元のリンクを渡さないようにする。非通知電話をかけているようなイメージらしい。
結論
- aタグでリンク先を新しいタブで開かせたいときは
<a href="" target="_blank" rel=”noopener noreferrer”></a>と記載しよう