target=”_blank” のセキュリティリスクへの対策法

target=”_blank” には脆弱性があるので、利用する場合には rel=”noreferrer” を指定しましょうという解説です。
下記の例を見てみましょう。

通常リンクは a タグを指定し遷移先を href で指定します。
そのリンクの飛び先を意図的に別タブで開かせたい場合に target=”_blank” を指定しますが、このままの指定ではセキュリティ上のリスクが含まれてしまいます。

属性の値は noopener noreferrer の2つを追加します。
noopenerIE11での互換性が無いため、両方を設定することが望ましいです。
noreferrer はWindows10以降のIE11に対応しています。ただしIE11はサポートが切れるブラウザですから noopener だけでも良いと私は判断しています。)

"noopener" | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile w...
"noreferrer" | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile w...

それぞれの設定値はどのように動作するのかは下記を参照してください。

リンク種別: noopener

リンク種別: noopener
noopener キーワードを <a><area><form> の各要素の rel 属性に指定すると、ターゲットリソースへ移動する際、開いた元の文書へのアクセスを新しい閲覧コンテキストに許可しないことをブラウザーに指示します。開かれたウィンドウの Window.opener プロパティプロパティは設定されません (null を返します)。
これは、信頼されていないリンクを開くときに特に有効で、 Window.opener プロパティを介して発信元の文書を改ざんできないようにするためです (詳細は rel=noopener についてを参照してください)。ただし、 HTTP の Referer ヘッダーは (noreferrer を同時に使用しない限り) 提供されます。
なお、 noopener を使用した場合、ターゲット名に _top_self_parent 以外の空でない名前を使用すると、新しいウィンドウやタブを開くかどうかの判断において、すべて _blank と同様に扱われます。

https://developer.mozilla.org/ja/docs/Web/HTML/Link_types/noopener

リンク種別: noreferrer

リンク種別: noreferrer
noreferrer
 キーワードを <a><area><form> の各要素の rel 属性に指定すると、ターゲットリソースへ移動する際、 Referer ヘッダーを省略してリファラー情報が漏洩しないようにブラウザーに指示します。それに加えて、 noopener キーワードを設定しているかのように動作します。

https://developer.mozilla.org/ja/docs/Web/HTML/Link_types/noreferrer

5年前に書いた本記事ですが未だに問題になるケースがあるのと、何故このような設定が必要なのかを解説した経緯があったためリプレイスしてみました。

まずは target=”_blank” を指定する時には noopener を指定すれば良いと思ってもらえば良いのですが、興味がある方は下記も参考にしてみてもらえれば幸いです。

Target="_blank" - the most underestimated vulnerability ever
Target="_blank" - the most underestimated vulnerability ever - Wednesday, 04 May 2016 - Alex's blog'

コメント

タイトルとURLをコピーしました