2020年11月27日

別タブで開くときの注意点(target=”_blank”)

こんにちは!佐藤です。
今回はリンクを別タブで開く際に使用する「target=”_blank”」について書いていこうと思います。

別タブで開くときの 注意点(target="_blank")

フロントエンドで活動している身として、意識していなかったので、大変恥ずかしいのですが、最近、Twitterで「taeget=”_blank”」の脆弱性について記載しているツイートを発見したので、備忘録としても書いていこうと思います。

「target=”_blank”」の基本的な使い方

<a href="#" target="_blank">リンク</a>

このような使い方でhrefに記載されたURLを別タブで開くことが可能になります。(何も記載がない場合は同じタブで開く)
基本的には外部サイトに飛ばすときに利用します。

「target=”_blank”」の何が悪い!?

端的に言うと、DOM(windowオブジェクト)とJavaScritptの仕様上、「別タブで開くと、開いたサイトから元のサイトへアクセスが可能になる」という現象が起きてしまうことだ!

どんな被害が起きる可能性がある!?

仮にあなたが参考になる良い記事を見つけて、自分のサイト内のページに target=”_blank” でリンクを貼ったとします。
しかし、もしその参考記事が悪意のある第作者によって作られたページだった場合、開かれた新規タブ側で、リンク元のあなたのページのURLを操作できてしまいます。
もし、リンク元のあなたのページが、大手ショッピングサイトなどを装ったフィッシングサイトのURLに書き換えられてしまったらどうでしょうか。
あなたのページからユーザーが個人情報を誤って入力してしまい、「あなたのページでフィッシング被害にあった!」なんて責められてしまう可能性もあるのです。

https://wwg.co.jp/blog/3807

上記のサイトの記事を引用させて頂きましたが、本当にその通りです。

かなり危ない橋を渡っていることになります。

経験上、コーポレートサイトを制作する際に、知らないページのURLに別タブで飛ばすことは少ないかもしれませんが、しっかり対策するべきですね!

「target=”_blank”」の脆弱性に対する対策方法

では、どのようにして外部リンクに飛ばせばいいのでしょうか?
答えは以下の通りです!

 <a href="#" target="_blank" rel="noopener noreferrer">リンク</a>

rel=”noopener noreferrer”を追記してあげてください!

たったこれだけですので、簡単ですよね!

セキュリティの観点からみても、自分・クライアントを守るためにもしっかりとWebサイト・Webサービスを構築していきましょう!!