target=”_blank”にrel=”noopener”をつける方法と、より安全に外部リンクを張る対策

新しいタブで開く外部リンクの脆弱性を回避したい時や、より安全に外部リンクを使用したい時の方法 ネットやパソコンについての勉強メモ

HPやブログなどで記事を書くときに

こちらのサイトを参考にさせていただきました、と

他の方のサイトに新しいタブを開いてアクセスするように外部リンクを貼る時に

以前だったら

<a href=”サイトURL” target=”_blank”>リンクの説明</a>

というような書き方をすることが通常だったと思う。

今開いているタブのままアクセスすると自分のサイトから

他のサイトに移動してしまうので

上記のようなhtmlの書き方をすると、自分のサイトを開いたまま

別のタブで他のサイトを開くことが出来ます。

しかし、このtarget=”_blank”という書き方が

リンク先のサイトが、

リンク元のサイトを操作出来てしまう脆弱性があって危ないとのことです。

target=”_blank”という書き方で

私のサイトから、外部サイトに新しいタブで開くリンクを貼った時に

外部サイトから、リンク元である私のサイトを

操作出来てしまう可能性があるということなのだそう。

そこで、target=”_blank”をつけて新しいタブで開くように外部リンクをする際に

rel=”noopener”をつければ良いのだそうですが

rel=”noopener”をつけるとは、どのようにhtmlタグを記述すればいいのかということを

今回の記事では書きます。

スポンサーリンク

target=”_blank”にrel=”noopener”をつけて外部リンクを張る方法、HTMLの書き方

rel=”noopener”をつけて、target=”_blank”による脆弱性のリスクを回避して

新しいタブで外部リンクを開くようにリンクを張るためには、

htmlタグが有効な記事編集画面又は、html編集画面でこのように記述します。

<a href="サイトURL" target="_blank" rel="noopener">リンクの説明</a>

サイトURLのところには、https://サイトURL、http://サイトURLのような

URLを書いて、

リンクの説明には、リンク先の記事タイトルかサイト名などを書くと良いと思います、

もしくは

リンクの説明のところにもURLを書いても良いと思います。

リンクの説明の書き方、何を書けばいいのか

上記の図の下のように、サイトの説明欄にもサイトURLを書く際は以下のように書きます。

<a href="サイトURL" target="_blank" rel="noopener">サイトURL</a>

外部リンクも同じタブで開く設定にすれば、target=”_blank”による脆弱性を回避できる

1つ前の説明では、rel=”noopener”をつけることによってtarget=”_blank”による脆弱性を回避する方法を書きましたが、

もっと確実な方法は新しいタブで開く外部リンクを使わない、

target=”_blank”を使わないことです。

その際は以下のどちらかのhtmlタグを使います。どちらでもOKです。

<a href="サイトURL">リンクの説明</a>
<a target="_self" href="サイトURL">リンクの説明</a>

そうすると、新しいタブで開くのではなく、今開いているタブで他サイトに飛ぶようになります。自分のサイトからは離れてしまいます。戻るボタンで戻ってきてくれる可能性はありますが、リンク先のサイトに行って戻ってこないかもしれないというデメリットもあります。

しかし、rel=”noopener”を使ったところで

古いブラウザを使用している人にはrel=”noopener”が無効になってしまうようです。

それを回避するためにrel=”noopener”に更にrel=”noreferrer”も使って

<a href="サイトURL" target="_blank" rel="noopener noreferrer">リンクの説明</a>

と書けば良いのですが

rel=”noreferrer”をつけてしまうと、

私のサイトから外部サイトにリンクをした時に、外部サイトには

私のサイトのどのページのリンクから外部サイトに飛んできたのか、

わからなくなってしまうようです。

それがデメリットになってしまう場合もあると思います。

よって、古いブラウザからアクセスが来た時に対策出来ないことは諦めるか、

同じタブで開く形でのリンクを使うかという選択となり、

自分のサイトから他サイトに離れてしまう可能性が高くなるというデメリットはありますが、

脆弱性を確実に防ぐのであれば新しいタブで開くのではなく、

同じタブで開くように外部リンクを張る方法が確実だと思います。

現在のワードプレスは、target=”_blank”を使用した外部リンクには強制的にrel=”noopener noreferrer”がつくようになった

今はワードプレスの機能で自動的にrel=”noopener noreferrer”がつくようです。

それにより、target=”_blank”を使用することによる脆弱性は回避出来て、

自分のサイトにアクセスした人のブラウザが古いためにrel=”noopener”が無効になってしまうリスクも、rel=”noreferrer”がつくことにより回避出来ます。

しかし、逆を言えば強制的にrel=”noopener noreferrer”が付属してしまい、

私のサイトのどの記事から相手方のリンク先に飛んできたのか、相手方にはわからなくなってしまいます。

それは、「こちらのサイトを参考にさせていただきました」というように、ただリンクするだけなら問題ないかもしれないけど

強制的にrel=”noopener noreferrer”がついてしまうことは不都合が出てくる場合もあります。

そう考えると、無難なのは同じタブでリンクを開く設定を使用することだと思います。

同じタブでリンクを開く設定だと、target=”_blank”自体を使用しないので

target=”_blank”を使用することによる脆弱性はなくなります。

私はワードプレスのテーマにCocoonを使用しているので、Cocoonの設定で、外部リンクを同じタブで開くように設定したところ、過去に外部リンクを新しいタブで開く設定にして投稿したものも同じタブで開くように変更できました。自分の過去に書いた記事の外部リンクを確認してみたのですが、記事を編集し直すことはなく、操作はCocoon設定のみで同じタブで開くように変更出来ていました。

又、内部リンクについては、自分で自分のサイトに悪意を持って操作するということはまずないと思うので、target=”_blank”を使っても問題ありません。

コメント

タイトルとURLをコピーしました