親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

target="_blank"にはrel=noopenerを付けないと超怖い

target="_blank"

外部ページへ遷移する際に使われるtarget="_blank"。
あまり知られていないのですが、そのまま使うと実はセキュリティ的なリスクをはらんでいるのです。
その脆弱性対策として、リンクに「rel="noopener"」を付けましょう。

<a href="https://jidou.jp" target="_blank" rel="noopener">リンクのテキスト</a>

rel="noopener"を付けないとどうなる?

rel="noopener"を付けないと、遷移先のページで「window.opener.location=〜」を実行されてしまう危険性をはらむのです。
これを実行されてしまうと、遷移元のページが予期せぬページに飛ばされてしまうんですよね〜。
どこかのページを紹介したいだけなのに、変なページに飛ばされてしまうと、ユーザからすると遷移元のページに対して不信感を持たれてしまいますよね。

どんな場面で悪用されてしまうのか

男性の方ならよく利用するアダルトサイトを想像してみましょう。
見たい動画に飛んだ後に、遷移元のページが別なアダルトサイトや投資のページに変わってしまうことは誰しも経験したことはありませんか?
自分のサイトやブログがこのようにされてしまうと嫌ですよね。

まとめ

もちろん自作サイトや、信頼できるサイトをaタグに設定するのであればrel="noopener"を付与しなくても問題ないでしょう。
ただセキュリティ対策をするに越したことはないので、target="_blank"を使用する時にはrel=noopenerを付ける癖をつけると良いです。