こんにちは、フロントエンドエンジニアのまさにょんです。
今回は、aタグのtarget属性の使い方とセキュリティ上の注意点について解説していきます。
目次
aタグのtarget属性の使い方
aタグのtarget属性であるtarget="_self"とtarget="_blank"について解説します。
target=”_self”: 同じタブで開く
target="_self" はaタグによるLinkを同じタブで開く設定 (Defaultの設定)です。
<a href="https://masanyon.com/" target="_self">『No Change No Life I/O』</a>target="_self" はaタグのDefault設定なので、省略しても問題ありません。
<a href="https://masanyon.com/">『No Change No Life I/O』</a>target=”_blank”: 新規タブで開く
target="_blank"はaタグによるLinkを新規タブで開く設定です。
<a href="https://masanyon.com/" target="_blank">『No Change No Life I/O』</a>target=”_blank”の問題点: セキュリティ上の脆弱性（セキュリティ上のリスク）
target="_blank" を使用する際は、セキュリティ上の脆弱性（セキュリティ上のリスク）に注意する必要があります。
target="_blank"のリンクは別タブ（別Window）で開かれるため、
リンク元のページとリンク先のページの両方が1つのブラウザ内に存在していることになります。
また、リンク先はリンク元の情報を参照できたりしてしまいます。
そのため、もしリンク先のページに、攻撃するためのJavaScriptが記載されていたら、
リンク元であるページを改ざんできてしまう可能性が考えられるのです。
実際にブラウザのObject機能であるwindow.openerを使用することで、親Windowのオブジェクトにアクセスを行ったり、
window.opener.location = newURL によって親ページのURLを書き換えることができてしまいます。
target=”_blank”のセキュリティ問題の解決方法
先述のようなtarget="_blank"のセキュリティ問題の解決方法は、2つの属性をaタグに追加することでできます。
noopenerの指定
noopener を指定することで、リンク先からwindow.openerを使ってリンク元が参照できなくなります。
これにより、Window.opener による改ざんができないようになります。
詳細は、MDNから引用します。
リンク種別: noopener
noopenerキーワードを<a>,<area>,<form>の各要素のrel属性に指定すると、ターゲットリソースへ移動する際、開いた元の文書へのアクセスを新しい閲覧コンテキストに許可しないことをブラウザーに指示します。
開かれたウィンドウの
Window.openerプロパティは設定されません (nullを返します)。これは、信頼されていないリンクを開くときに特に有効で、
Window.openerプロパティを介して発信元の文書を改ざんできないようにするためです(詳細は rel=noopener についてを参照してください)。
ただし、 HTTP の
Refererヘッダーは (noreferrerを同時に使用しない限り) 提供されます。なお、
noopenerを使用した場合、ターゲット名に_top,_self,_parent以外の空でない名前を使用すると、新しいウィンドウやタブを開くかどうかの判断において、すべて
_blankと同様に扱われます。メモ:
target="_blank"を<a>要素に設定すると、暗黙的に
relの動作がrel="noopener"を設定した場合と同様、
window.openerを設定しないようになりました。対応状況についてはブラウザーの互換性を参照してください。
引用元: MDN: リンク種別: noopener
noreferrerの指定
ブラウザによっては、noopenerがサポートされていないため、
noopener と norefferer、両方をrel属性に指定するといいです。
noreffererを指定することで、リンク先にリンク元のリンク情報が送られないようになるため、
noopenerと同じくリンク先からの参照ができなくなります。
結論:「target=”_blank” を使用する際は rel=”noopener noreferrer”を追加する」
aタグのtarget属性でtarget="_blank" (Linkを別タブで開く設定)を使用する際は、
セキュリティ上の安全性を確保するために、rel="noopener noreferrer" を追加した方がいいです。
つまり、次のような aタグになります。
<!-- target="_blank" を使用する際は、セキュリティにも考慮して、 rel="noopener noreferrer" をSetする！ -->
<a href="https://masanyon.com/" target="_blank" rel="noopener noreferrer">『No Change No Life I/O』</a>おすすめ書籍(HTML&CSS編)
Twitterやってます！Follow Me！
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！
参考・引用
最近の投稿
【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法
JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方)
PythonでCSVをJSONに変換する方法
PythonでCSV・Dataframeを指定の行数まで切り取る方法
JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法
VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法
