【HTML】aタグのtarget属性解説【target=”_blank”の脆弱性】

パソ君

・aタグでリンク設定はできたけど、別タブで開くにはどうしたらよいの？

こんな疑問にお答えします。

aタグのリンクをクリックした時に、別タブで開いたり、新しいウインドウなどで開く仕様にしたい場合がありますよね。

やり方としては簡単。target属性を使うだけ。

ジト

すぐにできるよ！

ということで、この記事では「HTMLのaタグのtarget属性」について解説していきます！

HTML aタグのtarget属性について

aタグのtarget属性を使うことで、タブの開き方を変えることができます。

<a href="https://www.google.com/" target="~">ここにリンクが入ります</a>

上記のように、target=”~”を記述すればOK。

これだけでクリックした時の、タブ開きの仕様を変えることが可能。

target属性には色々種類があります。

順に解説していきます。

aタグのtarget属性：target=”_self”

「target=”_self”」とは、別タブで開かずに遷移可能。
つまり何も指定してない状態と同じ動作です。

<a href="https://www.google.com/" target="_self">ここにリンクが入ります</a>

例↓

aタグのtarget属性：target=”_parent”

「target=”_parent”」とは、ウインドウがフレームに分割されていたら、分割を1段だけ解除し、親フレームに表示する。

<a href="https://www.google.com/" target="_parent">ここにリンクが入ります</a>

aタグのtarget属性：target=”_top” 

「target=”_top”」とは、リンクを新しいタブorウインドウで開く設定が可能。

<a href="https://www.google.com/"target="_top">ここにリンクが入ります</a>

aタグのtarget属性：target=”_new”

「target=”_new”」とは、リンクを新しいタブorウインドウで開く設定が可能。

<a href="http://www.google.co.jp/" target="_new">Googleのサイト</a>

例（※WordPressの仕様上、rel=”noopener”がつくため実際と動作が違う）
↓

aタグのtarget属性：target=”_blank”

「target=”_blank”」とは、リンクを新しいタブorウインドウで開く設定が可能。

<a href="https://www.google.com/" target="_blank">ここにリンクが入ります</a>

例↓

HTML aタグ「target=”_new”」と「target=”_blank”」の違い

「target=”_new”」と「target=”_blank”」使って、リンクをクリックした人なら思うはず。

パソ君

え？これ動作何が違うの？？
同じじゃない？

２つとも、別タブで開いて表示させる仕様になっています。

が、実はちょっと違うんですよね、

結論：2回目の動作が違う。

「target=”_new”」の2回目以降は、先ほど開いたタブが上書きされます。

（※この記事の例リンクではWordPressの仕様上、動作ができてません）

HTML aタグ「target=”_blank”」の脆弱性

target属性のなかでも「target=”_blank”」は、案件でよく使用します。

外部サイトへのリンクだったり、別タブで開きたい場合があるため。そのためtarget属性のなかでは、一番覚えておくべき。

でも実は「target=”_blank”」はセキュリティ的に脆弱性があります。

なぜなら元のページから操作することができてしまうため。

「window.opener」というのを使用し、元リンクのコンテンツを操作して書き換えたりできてしまうそう。

ジト

怖いよね

そのため「target=”_blank”」を使う際は、対策が必要。

対策がこちら↓

順に解説していきます。

脆弱性対策：「rel=”noopener”」を使う

<a href="URL" target="_blank" rel=”noopener”>外部リンクへ</a>

上記のように「rel=”noopener”」を使えば、window.openerを使用してリンク元を操作することを防ぐことができます。

脆弱性対策：「rel=”noreferrer”」を使う

<a href="URL" target="_blank" rel=”noreferrer”>外部リンクへ</a>

上記のように「rel=”noreferrer”」を使えば、リファラを送らない設定ができるため、先ほど同様リンク元からの操作を防ぐことができます。

ただリファラを送らない設定をすると、Googleアナリティクスやアフィリエイトなどで影響が出るとのこと。。

リファラとは、あるWebページのリンクをクリックして別のページに移動したときの、リンク元のページのこと。Webサーバのアクセスログに記録される項目の一つ。

脆弱性対策：「rel=”noopener”」と「rel=”noreferrer”」を使う

ブラウザによっては先述した「rel=”noopener”」がサポートされていない場合があります。

そのため安全性を考えると、両方合わせて使用するのがおすすめかと。

コードとしてはこちら↓

<a href="URL" target="_blank" rel=”noopener noreferrer”>外部リンクへ</a>

HTML aタグ「target=”_blank”」の脆弱性は対応済み？？

実は現時点で「target=”_blank”」の脆弱性は、結構対応済みであったりします。

Edge、Firefox、Safari、Google Chromeの対応

自動で付与される形になりました！
そのため現時点では特に気にせず「target=”_blank”」を使用してもよいかと。。

WordPressの対応

WordPressも自動で付与される形になっています。

【HTML】aタグのtarget属性解説【target=”_blank”の脆弱性】：まとめ

ジト

target属性のなかでも
「_blank」はよく使うので覚えておこう！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙