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

2018/05/17

この記事は2018年05月18日に更新されました。

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

Kouki Okuda (ocws)サービス作りたいフリーランス / フロントエンドエンジニア / 👦お仕事募集中👦⇒⇒⇒ WordPress / EC / React / Vue / Laravel / SEO / MEO / Webマガジン運営 http://hanzou-magazine.net
https://ocws.jp

\ よかったらフォローお願いします! /