HTML | target=”_blank”でリンクを別タブで開く方法と脆弱性対策

HTML リンク,HTML

HTML | target="_blank"でリンクを別タブで開く方法と脆弱性対策

target属性を使ってHTMLのリンク(aタグ)をクリックした場合にブラウザに別タブで開くようにする方法を紹介しています。

リンクを別タブで開くようにする

リンクを別タブで開くようにするにはリンクタグに target="_blank" を追記します。

例えば、このブログのトップページへのリンクを別タブで開きたい場合、以下のように記述します。

<a href="https://1-notes.com/" target="_blank">ONE NOTES</a>

上記のHTMLをブラウザで表示すると以下のように表示され、クリックすると別タブでリンクが開く事を確認できます。

ONE NOTES

target="_blank" は主に外部サイトへのリンクで良く使われます。
また、ユーザビリティを理由にサイト内の内部リンクであまり多様するべきものではないと考えます。

target="_blank"の脆弱性対策

target="_blank"にはセキュリティ面で脆弱性が存在します。

脆弱性とは、target="_blank" で開かれたリンク先にはリンク元サイトの情報が付随し、表示しているリンク元サイトの内容を書き換える事が可能になってしまうという事です。

この対策としては、target="_blank" を使わないか、リンクタグに rel="noopener" を追加する事です。

<a href="https://1-notes.com/" target="_blank" rel="noopener">ONE NOTES</a>

target="_blank"はどうしても必要な場面が存在しますが、そうでない限りはあまり使うものでもないのかなと思います。

HTML リンク,HTML

Posted by Yousuke.U