target=”_blank”の使用と問題点
ウェブサイトを作成していて、HTML文書にリンクをつけたいときは、aタグを使用します。
<a href="https://example.com/">リンクに飛びます</a>このリンクを（ユーザーが「新しいタブで開く」を選ばずに普通にクリックしても）新しいタブで開いてもらいたいと思うことがあります（同じタブで別のサイトを開いてしまうと、自分のサイトに戻ってきてもらえなくなるなどの理由）。そうした場合は、以下のようにtarget=”_blank”というように指定すれば実現できます。
<a href="https://example.com/" target="_blank">新しいタブでリンクを開きます</a>ただし、このtarget=”_blank”の指定にはセキュリティー上の問題点があります。target=”_blank”の指定がされているリンクを踏んで新規タブを開いた場合、新規タブで開いたページが悪意あるページであった場合、元のタブの内容が書き換えられてしまう可能性があります。これによりフィッシング詐欺などの被害に遭う可能性があるのです。
この問題は、以下の例のようにaタグにrel=”noopener”という指定を加えることで防止することができます。
<a href="https://example.com/" target="_blank" rel="noopener">これで安全になります</a>ただし、2021年公開のChrome 88以降ではtarget=”_blank”の指定がされているリンクについては、rel=”noopener”が付与されているものとして解釈されることとなっており、安全にブラウジングができるようになりました。Safari、Firefoxについてもすでに同様の措置が実施されています。とはいえ、こうした措置が行われていないブラウザで閲覧するユーザーもいるかもしれませんので、念のために rel=”noopener”をつけておく方がいいでしょう。
また、ホームページの構築にWordPress（WordPress5.1以降）を使用している場合、target=”_blank”の指定がされているリンクにはrel=”noopener noreferrer”が自動付与されるようになっています。そのため、WordPressを使用している場合には、target=”_blank”のセキュリティー上の問題点について考慮する必要はないということになります。やっぱりWordPressは便利ですね。
また、こちらはセキュリティーの問題ではないのですが、一部のAndroidスマホではtarget=”_blank”の指定がされていると、そもそもリンクを開くことができないという現象が見られるようです。この問題についても、rel=”noopener”をつけることによって回避できます。
私たちは、target_blankです。
ちなみに、私たちは大阪府吹田市を拠点にホームページ制作サービスを提供していますが、私たちの屋号「target_blank」はtarget=”_blank”からきています。以前は、「タブ」というものが一般的ではなく、target=”_blank”といえば、「新しいウィンドウで開く」でした。窓のむこうには、世界がどこまでも広がっています。私たちは、ホームページを作る事業を通して「新しい窓」を作り、お客さまのお仕事、お客さまの想いを遠くまで届けるお手伝いがしたい。そんなふうに考えて、「target_blank」という名前をつけました。
ホームページの作成、リニューアルをお考えの方は、ぜひtarget_blankにご相談ください。遠方にお住まいの方でもリモート会議などで対応させていただきますのでご安心ください。ホームページやパソコン、スマホのことがあまりわからない方も、遠慮なくお問い合わせください。お待ちしております。