こんにちは、早速ですが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”も一緒に付けておきましょう!!!