きちんと理解してなかったので備忘録。 target="_blank"なリンクには、rel="noopener"を付けるべきと一般的に言われている

<a href="https://example.com" target="_blank" rel="noopener">...</a>

なぜ rel=“noopener” を付ける必要があるのか

理由は主に 2 つ

1 つは、target="_blank"を使って別のページに遷移させた場合、リンク元のページとリンク先のページは同じプロセスで動作しているので、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下してしまうおそれがあるため

そしてもう 1 つが重要で、リンク先のページでは window.opener を使用してリンク元のオブジェクトにアクセスしたり、window.opener.location = 新しいURL をすることでリンク元の URL を変更したりできてしまう。 これは例えば、リンク先のサイトからリンク元にそっくりのサイトを作っておいてリンク元の URL をそっくりなサイトに誘導して個人情報を盗み取る、ようなことも出来てしまう。

rel=“noopener”を指定するとどうなるのか

これを指定することで、リンク先でwindow.openerが参照されなくなる。つまりリンク先ではリンク元の操作が出来なくなるので、万が一悪意あるサイトに遷移させてしまっていたとしても、よりセキュアということになる。

まとめ

最初は何も問題なかったブログ記事とか信頼おけそうなメディアもいつどこで悪意あるサイトになるかは分からないので、rel="noopener"を常に付けておくのが良いという事でした。