外部リンクを「新しいタブで開く」設定は安全？
皆さんはブログ記事を作成していて、他の参考ページをURLリンクとして挿入することがあ
るでしょう。
URLをクリックした際、新しいタブで開いたり、同じでタブで開いたりと、Webサイトによ
ってリンクの表示方法が異なります。これは、HTMLで指定してるリンクの表示先が異なるか
らです。
「リンクの表示先の指定」には4種類がありますが、今回は「新しいタブで開く」設定につい
てちょっとした話です。
その仕組みは、HTMLで以下のように、aタグにtarget属性を指定することでリンクの表示先
の指定ができます。<a href="リンク先のURL" target="リンクの表示先の指定"></a>
つまり、リンクの表示先の指定には targetの後に「_blank」を付けて、
<a href="リンク先のURL" target="_blank">リンク先の任意の名前</a>
という構文となります。
しかし、新しいタブで開くために必要な「target=”_blank”」にはセキュリティの脆弱性が
問題視されています。target=”_blank”で新しいタブを開く際、一つのブラウザ上にリンク
元のページとリンク先のページが同時に存在していることになります。そのため、リンク元
であるWebページを操作できるようになってしまうということです。
では、セキュリティ面の脆弱性の問題をどのように解決すればよいのでしょうか？
以下の対策を取ることで、安全に新しいタブでリンクを開くことができるようになります。
<a href="リンク先のURL" target="_blank" rel="noopener noreferrer">リンク先の任意
の名前</a>
「noopener」は、新しいタブで開かれるリンクを参照できなくする指定のことで、リンク元
も新しいタブで開かれるリンクも別のものとして扱われます。ただ、ブラウザによっては
noopenerがサポートされていない場合があるので、未対応ブラウザ用に「noreferrer」も一
緒に指定しておきます。
新しいタブでリンクを開く行為は正しい設定方法を知らないと、ユーザーの個人情報の流出
などを招いてしまう危険性があるので注意が必要です。
なお、前回記事のPHD2ユーザーガイドWeb版での外部リンクには、この「target="_blank"
rel="noopener noreferrer"」構文設定を施してあります。
