ブログ

BLOG

aタグに付いているrel=”noopener”って何?

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

お問い合わせ・ご相談CONTACT

オクワスでは、Webを通して魅力を最大限に伝えるお手伝いをしております。ホームページ制作やWebからの集客などでのお困りごと、Web開発で人手が足りないなどございましたら一度お気軽にご連絡ください。

お問い合わせフォームまたは𝕏のDMからご相談お受けしております。

お問い合わせフォームへDMからご連絡ください
© 2015 - 2024 Okuda Kouki