「target=”_blank”」には「rel=”noopener”」を！htmlで外部リンクを貼る際の注意点。

ホームページを制作するうえで外部リンクを貼るというの頻繁に使われるものです。
外部リンクを貼る際に<a>タグを使ってコードを記述しますが、ブラウザを別タブで開かせる場合「target=”_blank”」という要素を追加します。
そんな「target=”_blank”」の危険性についてのお話です。

 

「target=”_blank”」とは？

「target=”_blank”」というのはリンクを貼る際に使うアンカーリンクの<a>の中の属性で、
<a href=”https://hogehoge.com/l” target=”_blank”>リンク先はこちら</a>
のような書き方をします。
このtarget属性により、クリックした先のページをどのように開くかを指定することができます。

指定方法として以下のようなものがあります。
・target=”_blank”
・target=”_self”
・target=”_parent”
・target=”_top”

target=”_blank”

「_blank」とすることで、クリックすると、別タブで開くようになります。
これは比較的外部へのリンクを貼る際によく使われるリンク方法で、自サイトは残しつづ、別のサイトも参考にさせたい場合などにつかうことができます。

target=”_self”

何も指定しない場合はこの要素となります。ページを別タグで開くことなくそのままページを移動します。

target=”_parent”

ウィンドウがフレームに分割されていれば、1段だけ分割を解除して、その親フレームに表示します。

target=”_top”

ウィンドウがフレームに分割されていれば、分割を全て解除して、そこに表示します。

target=”sample”

既にsampleという名前を持ったウィンドウ(フレーム)があればそこに、無ければ新しいウィンドウを開いて表示します。

「target=”_blank”」の危険性

“target=”_blank” にはセキュリティ上の脆弱性があります。
リンク先のページでは window.opener を使用して親ウィンドウのオブジェクトにアクセスしたり、 window.opener.location = newURL によって親ページの URL を変更したりできます。

<a>タグで外部にリンクをする場合、外部のリンクが完全に信用できる自社サイトだったりする場合はその必要はないのですが、 単なる勝手リンクである場合は「rel=”noopener”」をつけるべきということなのです。
つまりリンク先でJavascriptを使えばリンク元を操作できるようになるというものです。

Googleの技術者が「他のサイトへのリンクのtarget = “_ blank”は、サイトをパフォーマンスとセキュリティの問題にさらす可能性があります。修正するには、これらのリンクにrel = “noopener”またはrel = “noreferrer”を追加してください」という内容を以下のようにツイートしている。

Tip: target=”_blank” on links to other sites can expose your site to performance and security issues. To fix, add rel=”noopener” or rel=”noreferrer” to these links: https://t.co/HdA7ooNzx5 ✅ pic.twitter.com/T7X5r7MKWz

— Addy Osmani (@addyosmani) March 1, 2020

 

「rel=”noopener”」を付ける

<a>タグに「target=”_blank”」を付与する場合「rel=”noopener”」を付ける！

参考：https://developers.google.com/web/tools/lighthouse/audits/noopener?hl=ja

FirefoxやChrome、Safariが対応済みに

2020年7月にFireFox79が公開され、本バージョンから、「target=”_blank”」の指定されたa要素やarea要素に対し、rel属性が指定されていない場合には、「rel=”noopener”」が規定値として適用されるようになりました。

それに追随する形Googleは2021年1月にchrome88を公開し、このバージョン以降 「rel=”noopener”」が規定値となりこのコードを記述しなくても良いということになりました。

ちなみにSafariは2019年3月に公開したv12.1より対応済みとのこと。

WordPressにはrel=”noopener”は対応済み

WordPress 5.1からtarget=”_blank”の属性のリンクに「rel=”noopener noreferrer”」が自動付与されるようになりました。
そのため現在では特別意識することなく、「target=”_blank”」を使って外部リンクをはっても問題ありません。

※「rel=”noreferrer”」は、リンク元の情報をリンク先におくらない属性です。

具体的にどういった脆弱性なのか

では具体的にどういった操作ができてしまうのか？

リンク先のページのソースのJSに window.opener.location = http://hogehoge.com と書かかれている、自分のサイト（リンク元）が勝手にhogehoge.comに置きかわってしまいますのでそこでフィッシングに利用されたり ウイルスを仕込ませるなんてことができてしまいます。

しかしながらリンク先のページはちゃんとしているところにリンクしているから大丈夫！って思っていませんか？ いえいえそんなことはありません。
ホームページは日々どんどん閉鎖されていきます。
閉鎖後にそのドメインが悪意ある人にわたりそのような地雷をしこまれるという可能性は大いにあります。
そういった観点から外部サイトへのリンクは気をつけましょう！

ちなみにWordpressには投稿時に「リンクを新しいタブで開く」にチェックをいれると自動的に「rel=”noopener”」が付与されます。

パフォーマンスの問題

“target=”_blank” を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。
そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。

いわゆるリンク先でJavascriptなどで高負荷なプロセスが実行されるとリンク元も同様なプロセスが実行されるためリンク元のパフォーマンスが落ちるということらしいです。

古いブラウザを使っているユーザーもまだいらっしゃるかもしれないので、当分の間は外部リンクの<a>タグでは「target=”_blank”」をつけるなら「rel=”noopener”」を挿入するようにしましょう

WEB制作、1度はこんなことありませんか?

最後まで記事を読んでくださりありがとうございます!

ここまで読んでくださった方々の中には、Web制作を行っている方、企業や個人の宣伝としてwebで宣伝されている方など たくさんいらっしゃるかと思います。

しかし、個人でweb作成をされている方、企業としてweb作成をされている方、
お問合せページに使いにくさを感じていませんか?

たくさんの方々からお問い合わせが来ると、お客様への返信の管理やその他機能に物足りなさを感じませんか?

あるいは、メールフォームに拡張機能を追加しようとするとほしい機能が有料だった…なんてこともありませんか?

そんな方のお悩みを解決するツールが、、
EasyMailという完全無料のメールフォームです!

弊社ではEasyMailというオープンソースメールフォームCMSを展開しております!

今まではかゆいところに届かなかった、もっとカスタマイズ性が高いものが欲しい、などなどお客様の声をふんだんに反映したものになっております!

大事なことなのでもう一度言いますが、完全無料です!

詳しくはEasyMail特設ページをご覧ください!

【EasyMail】URL：https://www.mubag.com/