rel=”noopener” ってなんだ？

サイトを作っていて、外部リンクにこんな記述がされているのを見つけました。

<a href="https://example.com" target="_blank" rel="noopener">外部リンク</a>

いやいや、target="_blank" はわかる。新しいタブで開くやつね。
でも、その隣の rel="noopener" って何…？
知らなかったので調べてみました。

target=”_blank” だけだと危ない？

まずおさらいすると、target="_blank" はリンク先を新しいタブやウィンドウで開くための属性です。
調べたら、target="_blank" って便利だけど、それだけだと危ないらしいんですよ。
どうやら、リンク先のページが「親ウィンドウ」を操作できちゃうらしくて。
JavaScript の window.opener っていうのを使うと、元のページを書き換えたり、フィッシングみたいなことができるんだとか。

へぇ〜。そんなことができるんですね…。知らなかった。

rel=”noopener” が守ってくれるっぽい

で、そこで出てくるのがこの rel="noopener"。
これをつけると、リンク先から親ウィンドウへのアクセスが遮断される、らしいです。
つまり、window.opener が無効になるっぽい。

「親をいじれなくするフタ」みたいなもんですかね。

rel=”noreferrer” もあるらしい

似たようなのに rel="noreferrer" ってのもあって、これは noopener の効果に加えて、リンク先にリファラー情報も送らない、ってことらしい。
ただ、そこまで気にしなくても、外部リンクに対してはとりあえず noopener つけとけばいいっぽいです。

まとめ

「外部リンクで新しいタブを開くときは、親を守るために rel=”noopener” もつけとくのが今の常識」
…ってことみたいです。

つまり、こんな感じに書くのが正解っぽい。

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

いや〜、今まで知らずにずっと target="_blank" だけで書いてたけど、こういう理由があったんですね。調べてみると、「ちゃんと意味があるんだな〜」って思いました。

今回は以上です！