Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

経緯

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" の危険性

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

Apprentice_engineer
社内共有用のアカウントです。 大したことは書きません、memo程度です。 下書きに溜まっていたものがいくつかあるので、一気に出せたらなと思ってます。。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした