「別タブで開く」の落とし穴？`target=”_blank”`とセキュリティの意外な関係
Web制作を始めたばかりの頃、誰もが一度は使うのが「リンクを別のタブで開く」ための `target=”_blank”` ですよね。
「新しいページに行っても、元のページは閉じてほしくないから」という、ユーザーへの親切心で使うこの設定。実はこれ、そのまま使っていると「知らない間に自分のWebサイトが乗っ取られる（あるいは情報を盗まれる）リスク」が潜んでいることをご存知でしたか？
「えっ、そんな怖いことあるの？」とドキッとした方も大丈夫。今日は、このセキュリティの隠れた落とし穴を、身近な例えを交えて一緒に紐解いていきましょう！
—
なぜ「別タブ」だと危険なの？
少しだけ想像してみてください。あなたが大切なお店（あなたのWebサイト）にお客さんを招いているとします。
そこへ、ちょっと怪しげな他のお店（外部のWebサイト）への案内板を置いたとしましょう。
`target=”_blank”` を使うということは、「お客さんをその怪しいお店へ、自分の店の裏口からこっそり送り込む」ようなものなんです。
1. `window.opener` という「合鍵」の問題
実は、`target=”_blank”` で開いた先のページからは、元のページ（あなたのサイト）を操作する「合鍵」のようなもの（`window.opener`）が渡されてしまう仕様があるんです。
もし、その先のサイトが悪意のあるものだったら？ あなたのサイトを勝手に書き換えたり、偽のログイン画面を表示させて情報を盗んだりできてしまう……なんてことが理論上できてしまうんですね。
2. リファラー漏洩（こっそり覗かれる）
また、リンク先のページには「どのページから来たか（あなたのサイトのURL）」という情報（リファラー）が伝わります。場合によっては、ユーザーがどこから来たかを知られたくない、あるいはセキュリティ上隠したい情報まで漏れてしまう心配があります。
—
救世主は `rel=”noopener noreferrer”`
そんな怖い事態を防ぐために、僕たちがやるべきことはとってもシンプル。`a` タグに魔法の言葉を付け足すだけです。
この「魔法の言葉」は何をしているの？
- `rel=”noopener”`
- これが「合鍵」を渡さないようにする呪文です。「新しいページを開くけど、こっちの部屋とは一切関係ないですよ！」と区切りをつけるイメージですね。
- `rel=”noreferrer”`
- これが「どこから来たか」を教えないようにする目隠しです。「どこの誰から来たか、教えちゃダメだよ」と伝えて、情報を遮断します。
—
実際に書いてみよう！
皆さんのエディタで、まずは以下のコードを試してみてください。
※最近のブラウザでは、`target=”_blank”` を指定すると自動的に `noopener` が適用されるような動きも増えてきましたが、明示的に書いておくことはプロとしてのたしなみです。念には念を入れておいて損はありません！
—
最後に：小さな気遣いが「信頼」を作る
最初は「こんな短いコードを書くくらいで何が変わるの？」と思うかもしれません。でも、Webの世界において、こうした小さなセキュリティの積み重ねが、最終的に「このサイトは安心して見られる」というユーザーからの信頼に繋がります。
僕も駆け出しの頃は、こうした「見えない部分」の重要性に気づくのが遅れてしまったことがあります。だからこそ、今こうして皆さんに伝えられるのが嬉しいんです。
`target=”_blank”` を使いたくなったら、心の中で「noopener、noreferrer！」と唱えてみてくださいね。これだけで、今日からあなたはセキュリティ意識の高いエンジニアの仲間入りです。
つまずいたり、迷ったりしたときは、いつでも戻ってきて確認してください。Web制作の世界は、こうやって一つずつ学んでいけば、必ず楽しくなりますよ！
コメント