てけもぐ Tech 忘備録

html <a>タグの target="_blank"のセキュリティ

対象読者

html 使う人

解決すること

a タグでリンクを別タブで開く様にする時にセキュリティホールが出来ないようにする

内容

html で <a> タグって頻繁に使うと思いますけど、今のページをそのまま残して別タブにリンクページを開きたい場合、target="_blank" を付けますよね。これをやるとセキュリティ的に問題があるそうで(mdn web doc)

危険な例:

<a 
  href="/hogehoge" 
  target="_blank"
> 
  hogehoge 
</a>

新しいタブのページに、window.openerで元のページが参照できたってことで、これに window.opener.location = ...とかやられたりすると、元のページを表示してたタブに勝手に危ないサイトを表示されてしまう可能性があるらしい。何故読み取り専用にしておかないのかとか、通信したいならもっと別なやり方あるだろうとか色々思うけれども、昔はそんなこと思いもしなかったんだろなぁ...。

以下が対応した例:

<a 
  href='/hogehoge' 
  target="_blank" 
  rel="noopener noreferrer"
> 
  hogehoge
</a>

上の様に、rel="noopener noreferrer" をつける。noopener は、window.opener へのアクセスを出来なくさせる。noreferrer は、参照元のページを参照させなくする。

上のmdn のドキュメント にも書いてあるけれど、

target="_blank" を rel="noreferrer" や rel="noopener" なしで使用すると、ウェブサイトが window.opener API 搾取攻撃を受けやすくなりますが、新しい版のブラウザーでは target="_blank" を設定すると、rel="noopener" と同じ保護が提供されます。詳しくはブラウザーの互換性を参照してください。

だそうだ。セキュリティの話だから新しいブラウザが対応していても対応は必須ですが。

ちなみに、このブログのCMSである microCMS のリッチテキストエディタのリンクでは、ちゃんと noreferrer も noopener も付いていました。

Tags

#html