忘れがち！aタグのターゲットブランクはそのままでは危ないよ！HTMLセキュリティ対策 | 福岡のホームページ制作はマリオ君にお任せ

本日はついつい忘れがちなリンクを張るときに使用するaタグの別タブで開くことができる

target=”_blank”

のセキュリティ対策についてご説明していきたいと思います。

そのまま使うとセキュリティ・パフォーマンスともに良くないのでどうして良くないのかと、その対策方法を書いていきたいと思います。

target=”_blank”をまずはご説明

ホームぺージを構成するHTMLでリンクを張るときに使用するタグがaタグになります。

target=”_blank”はaタグにプラスして使用できるもので、aタグに合わせて記述すると別タブで開くことができます。

例として
トップページから会社概要(company.html)にリンクを張る場合は

<a href="company.html">会社概要はこちら</a>

などでリンクをします。

上記の場合は会社概要はこちらの文字をクリックするとcompany.htmlのページに移動します。こちらは
target=”_blank”を指定していないので、そのままページが切り変わります。

上記にtarget=”_blank”をaタグに追加すると、別タブで開くことができます。

<a href="company.html" target="_blank">会社概要はこちら</a>

一般的にtarget=”_blank”は外部サイトに移動する場合など使用することが多いので下記のような使用例が多いかと思います。

<a href="https://www.yahoo.co.jp/" target="_blank">ヤフーはこちら</a>

別タブ？で開くの意味が文字だけだとわかりずらいと思いますので下記に例を作りました。

①と②を制作しておりともにリンク先はヤフーです。
①は通常のリンクでボタンを制作しているのでクリックすると当ブログからヤフーにページが切り替わります。
②はtarget=”_blank”を追記していますので別タブ（当ブログのサイトは別ぺージで残しながら新たにヤフーのページを表示）で表示されます。

クリックしてお試しください。

クリックして試してみると別タブの意味がわかりやすかったと思います。

ブランクを使って別タブで開くメリット

別タブのメリットは別サイトに一度移動した訪問者（ホームページを見ている方）が自社サイト（移動する前のサイト）に戻りやすいことがあげられます。

別タブで開いた場合だと、移動先でページを複数見た後にやっぱりさっきのサイトに戻ろうとした際に、簡単にタブを切り替えてもどることができます。

しかし、ブランクを設定していないと戻ろうとしてもなかなか戻ることができず、離脱されてしまう可能性が大きくなります。

上記の様に、別サイトにリンクを張る際はtarget=”_blank”を利用することで自社サイトに簡単に戻ることができるようにできることが大きなメリットとなります。

他には、パソコンで見ている場合は動画や音楽が別タブで開いた場合途切れないのもメリットです。

target=”_blank”そのまま使うと危ない理由

上記で使う場面とメリットをご紹介させていただきましたが次にはセキュリティのリスクをご紹介させていただきます。

target=”_blank”はそのまま使用するとセキュリティリスクがあります。

その理由は私もあまり詳しくはわかりませんが、セキュリティ面とパフォーマンス面で問題があるようです。

セキュリティ面の問題

target=”_blank”を使用して別タブで開いたサイトに悪意をもったjavascriptが記載されている場合はリンク元となる自社サイトが改ざんされる可能性があるようです。

サイト改ざんとはただ事ではないですね。

これはとても高いリスクで当然避けたいですね。

パフォーマンス面の問題

target=”_blank”を使用して別タブで開いたサイトと自社サイト（リンク元）のページは同じプロセスで動くため、別タブで開いたリンク先のページで負荷の高いjavascriptが使用されると自社サイト（リンク元）にも同じように負荷がかかりパフォーマンスが低下する恐れがあるようです。

対策・解決方法

対策・解決方法は簡単です。

aタグに下記を追加することにより、上記で説明させていただいたセキュリティ面・パフォーマンス面の問題を解決することができます。

	<a href="https://www.yahoo.co.jp/" target="_blank" rel="noopener noreferrer">ヤフーはこちら</a>

relを使用してnoopenerとnoreferrerを記述するだけで簡単に上記リスクをなくすことができ安全にtarget=”_blank”を利用することができます。

上記を記述することでリンク先と別プロセスとして動作してくれるようで上記のリスクを防ぐことができます。

target=”_blank”を使う場合はrel=”noopener noreferrer”もセット記述する

HTML系セキュリティ対策番外編

少し番外編となりますが、HTMLに記述する系でもう一つ注意が必要なのはメールアドレスの直記述も気を付けた方がいいです。

サイトに直接メールアドレスを書き込んでしまうと、自動でアドレスを収集するシステムのようなものがありメールアドレスの情報を抜き取られ迷惑メールが届くリスクがあります。

対策としては＠を✭などに置き換えて、

「メールを送る際は✭を＠に変えてお送りください」

などの工夫が必要となります。

またメールを立ち上げるリンク

mailto:を利用する場合もメールアドレスをエンティティ変換するなどして特殊文字にするとリスクを軽減することができます。

エンティティに変換する方法は変換できるサイトがあるので簡単に変換することができます。

エンティティ変換サイトはこちら

まとめ

いかがでしたでしょうか？

ホームぺージ系でセキュリティ対策や脆弱性などのキーワードは一般的にワードプレスなどのCMSで聞くことが多く、ワードプレス自体の更新やプラグインの更新をちゃんとやりましょうやログイン画面の変更やセキュリティ系のプラグインをいれるなど様々な対策方法があります。

ワードプレスでセキュリティ対策するのは当たり前みたいになっていますが、上記のtarget=”_blank”などのHTMLに記述する系のセキュリティの脆弱性はかなり珍しく、かつ簡単すぎて逆に忘れがちかなと思います。

私も、よく書くのを忘れてしまいます。
ワードプレスの投稿などは自動でrel=”noopener noreferrer”をつけてくれるので何も心配することはないですが、ワードプレスの固定ぺージの場合や静的なHTMLの場合は自分自身で書かないといけないので注意が必要です。

サイトの改ざんは他人事のようで本当に身近でおきるものなので、上記の様にHTMLの記述方法にも注意が必要ですね。

身近なサイト改ざんに関する記事は下記にて詳しく書いておりますので気になる方は併せてお読みください。

関連こっちもみてね

サイト改ざんされた時の対応！初めてのハッキング被害

それではまた。