Naoki Otsu

target="_blank"にrel="noopener"を付ける理由

2019-08-18

きちんと理解してなかったので備忘録。
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"を常に付けておくのが良いという事でした。