target=”_blank”の脆弱性を回避する

HTMLサイトに更新履歴を追加する

私の技術の粋を集結させたHTMLサイトにはtarget=”_blank”が多用されていますが、これだけだとセキュリティ的に問題があるので修正します。

target=”_blank”はリンク先を新しいタブで開くために利用

HTMLを全く知らない人にとってはtarget=”_blank”ってなんだよという話だと思いますが、これはリンク先を新しいタブで開くために利用するものです。

新しいタブで開かなくてはならない法律や条例といったものも無いので極論使わなくても良いのですが、このリンク先は新しいタブで開かせたいなと思ったときに使うと幸せになれるのです。

target=”_blank”だけを利用するとパフォーマンスの低下を引き起こす可能性がありますし、セキュリティ上の脆弱性があります。

target=”_blank”だけを利用してリンク先を開いた場合、リンク先とリンク元が同じプロセスで動作するため、リンク先が重いページだとリンク元のページもパフォーマンスが低下する可能性があります。

また、target=”_blank”だけを利用した場合、リンク先のページからリンク元を操作することが可能になるという脆弱性があり、リンク先に問題があるとフィッシングなどで悪用される可能性があります。

そもそもtarget=”_blank”を利用しなければこれらのことを気にする必要はありません。

target=”_blank”を利用しなくてもユーザーは自分で新しいタブとして開くことが出来ますし、最近はスマホユーザーも多くタブという概念を理解していない人も少なくありません。

そのため、target=”_blank”を利用するなという派閥もありますが、私の場合は自分が新しいタブで開きたいと思うリンクには全てtarget=”_blank”を設定しています。私のサイトは最新のWindows版Chrome以外で閲覧されることを想定していません。

例えば今見ているこのサイトのリンクを新しいタブで開くようにすると

<a href="https://nellab.net/" target="_blank">NEL Laboratory</a>

この様になると思いますが、これにrel=”noopener”を追加し

<a href="https://nellab.net/" target="_blank" rel="noopener">NEL Laboratory</a>

とすることでパフォーマンスの問題もセキュリティの問題も解決されます。簡単ですね！

rel=”noopener”に未対応なブラウザーもごく一部あります。具体的に言うとInternetExplorerなどです。

そういったブラウザーにも対応する場合は

<a href="https://nellab.net/" target="_blank" rel="noopener noreferrer">NEL Laboratory</a>

という様に記述すればOKです。

こうしておけば大抵のブラウザーに対応することが出来ます。

まぁ私のサイトは最新のWindows版Chrome以外で閲覧されることを想定していないのでrel=”noopener”のみですが・・・

なお、WordPressなどを利用している場合は最初からrel=”noopener noreferrer”と記述されていることが多いです。確認してみてください。

文字列をちょこっと追加するだけなので、未対策な場合は対策することをおすすめします。若干面倒ですが・・・

見出しを識別しやすくする