こんにちは、早速ですがrel="noopener"について書きたいと思います。

rel="noopener"って知ってますか？

rel="noopener"とはいわゆる一種のセキュリティ対策のようなものなんですね。
WordPressされている方ならわかるかもしれないですが、rel="noopener"がたまに付いたりますよね。これってたまたま付いているわけではなくってtarget="_blank"が付いたときに自動で付くようになっているんです。

なんで自動でrel="noopener"付くの？

そもそもtarget="_blank"はセキュリティ上の脆弱性もあるらしく（驚き）、この脆弱性をカバーするためにrel="noopener"を付けるという風になっているそうです。
Google Developersの見解サイトで rel="noopener" を使用して外部アンカーを開く

その脆弱性とは？

window.opener.locationというのがネックなそうで、例えば
遷移先のページでwindow.opener.location = newURLというコードを書くと、遷移先のページに移動した瞬間に、親ページ（遷移前のページ）のURLがnewURLのページに自動でリダイレクトしちゃうということみたいです。こわい。

なので、「opener」は「NO!!!」ってことで「noopener」。( ´∀｀)

わかりやすいデモを見つけたので張っておきます。
リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io
このフィッシングがこわいね。絶対気づかなくない？笑

まとめ

ということでセキュリティの観点からしてもtarget="_blank"をつけるならときはrel="noopener"も一緒に付けておきましょう！！！

タグ