経緯
aタグにtarget="_blank"をつけると危険だよと言われたので、忘れないうちにメモメモ。
危険な理由
「リンクを開いた先のページでのJavaScriptによって、開いた元のページを操作できてしまう」
大抵のブラウザでは、 target=blank_によって"別タブで開かれたページ"が手前に表示され、 "元のページ"は裏に残る。
"別タブで開かれたページ"にて、
window.opener.location="./hogehoge.html"
が実行されると、裏で"元のページ"が画面遷移される。
オリジンが違ったとしても、リンクをたどってきたユーザを任意のサイトに誘導することが可能。
※ window.openerは、"別タブで開かれたページ"を開いた"元のページ"への参照を返すらしい。。。
window.opener
フィッシング詐欺攻撃の例
リンクのへの rel=noopener 付与による Tabnabbing 対策
ESLint(eslint-plugin-react)でもエラーになるみたい
reactでaタグの中にtarget='_blank'を書いたらESLintに怒られた話
対策
「target="_blank"に対してrel="noopener noreferrer"を付与」
noopenerとは
"元のページ"のtarget="_blank"に対してrel="noopener"と付与することで、
"別タブで開かれたページ"にて、window.openerで参照できなくなり、"元のページ"のlocationの変更などを抑止することが可能である。
これにより、"別タブで開かれたページ"では、以下のようなJavaScriptのエラーが表示される。
Uncaught TypeError: Cannot set property 'location' of null
現在、未対応のブラウザもある
https://caniuse.com/#feat=rel-noopener
noreferrerとは
現在、noopener未対応のブラウザもあるので、
その代替として noreferrerを指定することで同じ挙動が実現できる。
https://caniuse.com/#feat=rel-noreferrer
Babelで自動付与
毎回記述するのも面倒だし忘れそうなので、自動付与するのもあり。
BabelPluginによりリンクへrel=noopenerを自動的に付与する
Google Analyticsへの影響
現状では、クロスドメイン対応していても問題なし。_gaパラメータも問題なく付与されている。
参考
かなり参考になりました。