target=”_blank” には脆弱性があるので、利用する場合には rel=”noreferrer” を指定しましょうという解説です。
下記の例を見てみましょう。
1 | <a href="//nanika.work/" target="_blank" rel="noopener noreferrer">link</a> |
通常リンクは a タグを指定し遷移先を href で指定します。
そのリンクの飛び先を意図的に別タブで開かせたい場合に target=”_blank” を指定しますが、このままの指定ではセキュリティ上のリスクが含まれてしまいます。
属性の値は noopener noreferrer の2つを追加します。
noopener はIE11での互換性が無いため、両方を設定することが望ましいです。
（noreferrer はWindows10以降のIE11に対応しています。ただしIE11はサポートが切れるブラウザですから noopener だけでも良いと私は判断しています。）
それぞれの設定値はどのように動作するのかは下記を参照してください。
リンク種別: noopener
リンク種別: noopener
https://developer.mozilla.org/ja/docs/Web/HTML/Link_types/noopenernoopenerキーワードを<a>,<area>,<form>の各要素のrel属性に指定すると、ターゲットリソースへ移動する際、開いた元の文書へのアクセスを新しい閲覧コンテキストに許可しないことをブラウザーに指示します。開かれたウィンドウのWindow.openerプロパティプロパティは設定されません (nullを返します)。
これは、信頼されていないリンクを開くときに特に有効で、Window.openerプロパティを介して発信元の文書を改ざんできないようにするためです (詳細は rel=noopener についてを参照してください)。ただし、 HTTP のRefererヘッダーは (noreferrerを同時に使用しない限り) 提供されます。
なお、noopenerを使用した場合、ターゲット名に_top,_self,_parent以外の空でない名前を使用すると、新しいウィンドウやタブを開くかどうかの判断において、すべて_blankと同様に扱われます。
リンク種別: noreferrer
リンク種別: noreferrer
https://developer.mozilla.org/ja/docs/Web/HTML/Link_types/noreferrernoreferrerキーワードを<a>,<area>,<form>の各要素のrel属性に指定すると、ターゲットリソースへ移動する際、Refererヘッダーを省略してリファラー情報が漏洩しないようにブラウザーに指示します。それに加えて、noopenerキーワードを設定しているかのように動作します。
5年前に書いた本記事ですが未だに問題になるケースがあるのと、何故このような設定が必要なのかを解説した経緯があったためリプレイスしてみました。
まずは target=”_blank” を指定する時には noopener を指定すれば良いと思ってもらえば良いのですが、興味がある方は下記も参考にしてみてもらえれば幸いです。
コメント