【HTML】aタグで別タブを出させる方法と危険性を解説

aタグでリンクを埋め込みたい時、同じタブじゃなくて別のタブにしたい時ありませんか？

こちらaタグの中にある記述をするだけで解決出来ます。

それが、target="_blank"です。

<a href="sample" target="_blank">
サンプル
</a>

こんな感じでtarget="_blank"を加えるだけで指定したURLを別タブで開くことが出来ます。

しかし実はこのtarget="_blank"だけを記述するとセキュリティ的にもSEO的にもマイナスになる可能性が高いです。

<a href="sample" target="_blank"　rel="noopener noreferrer">
サンプル
</a>

このように、target="_blank"を使用する際は、relにnoopenerとnoreferrerの２つを記述する必要があります。

この記事では、noopenerとnoreferrerの２つを記述すべき理由と役割について解説していきます。

ぜひとも最後までご覧ください。

noopenerとnoreferrerの役割

ここからはnoopenerとnoreferrerの役割について解説していきます。

これらを怠ると間接的にSEOにも影響が出る可能性があるのでしっかり対策を行いましょう。

noopenerの役割

noopenerの役割を一言で解説すると以下になります。

こちらの記事でも解説してますが、リンク先のページで元のページにJavascriptを使用して悪意のあるコードを埋め込むことが出来ます。

例えば元いたページを偽のログイン画面に変更してパスワード情報を取得するなどのコードを埋め込む事が出来ます。

この時windowメソッドを使用して悪意のあるコードを埋め込むのですが、noopenerを指定すれば、元いたwindow オブジェクトにアクセスできなくなります。

こちらを行えばセキュリティ対策もばっちりでSEOにも悪影響を及ぼしません。

noopenerはtarget="_blank"を使用する際、主要なブラウザでは自動的に挙動するようになっています。
つけなくても問題はないのですが、IEなどの古いブラウザでは対応仕切れていない可能性があります。
念の為noopenerは記述した方がベターです。

noreferrerの役割

noreferrerの役割を一言で解説すると以下になります。

noreferrerを指定しないと、aタグに指定したリンク先に元いたサイトのセッション情報が渡される可能性があります。

これもまたパスワードを盗まれたりする危険性があるのでセキュリティ的にもSEO的にも問題です。

noreferrerを記述すればリンク先にセッション情報を渡すことなくを防ぎます。

まとめ

ここまでaタグで別タブを出させる方法と危険性について解説してきました。

target="_blank"を使用する際は、relにnoopenerとnoreferrerの２つを記述すればセキュリティ対策はばっちりです。

思わぬところでSEOにマイナスが出てしまったらせっかく作ったサイトが台無しです。

これからaタグで別タブを開く設定にする際はこれらに注意してください。