HTML
JavaScript
HTML5
セキュリティ

target="_blank"には気をつけよう


経緯

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パラメータも問題なく付与されている。


参考

リンクを作る時の target="_blank" の危険性

かなり参考になりました。