そのリンク、本当に「開いて」大丈夫？別タブ遷移に潜む意外な落とし穴
Webサイトを作っていると、外部リンクを「別のタブで開いてほしい」と思う場面、よくありますよね。例えば、ユーザーを外部の参考サイトへ誘導したいときや、SNSのプロフィールへ飛ばしたいときなどです。
そんなとき、多くの人が迷わず使っているのが `target=”_blank”` です。
実はこれ、「便利だけど、ちょっと危ない扉」だって知っていましたか？今日は、Web制作の現場で「これだけは絶対に守ってほしい」と言われる、セキュリティの基本ルールについてお話ししますね。
なぜ `target=”_blank”` が危険なの？
「えっ、ただリンクを開くだけなのに、何が危ないの？」と思いますよね。
イメージしてみてください。あなたが新しいお店（別のタブ）に入ったとき、実はそのお店の店主（リンク先のサイト）が、あなたが元いたお店（あなたのサイト）の様子を「こっそり覗き見できてしまう」としたら……ちょっと怖くないですか？
専門的な話をすると、`target=”_blank”` で開かれたページは、元のページと「親子関係」のような繋がりを持ってしまいます。JavaScriptというプログラミング言語を使うと、その繋がりを悪用して、元のページを勝手に書き換えたり、不正なサイトへ飛ばしたりすることができてしまうんです。
これを「`window.opener`（窓を開けた人）を悪用した脆弱性」と呼びます。
魔法の呪文 `rel=”noopener”` を唱えよう！
でも、安心してください。解決策はとてもシンプルです。リンクを書くときに、ほんの少し「おまじない」を付け加えるだけ。それが `rel=”noopener”` です。
`rel=”noopener”` を付けると、新しいタブを開いたときに「元のページとの繋がりを断ち切る」という命令になります。これだけで、相手のサイトからあなたのサイトを覗かれる心配がなくなるんです。まるで、お店の入り口に頑丈なセキュリティゲートを設置するようなものですね。
さらなる守り神 `rel=”noreferrer”`
もう一つ、`rel=”noreferrer”` というものもあります。「referrer（リファラー）」というのは、「どこから来たか」という情報を指します。
`rel=”noreferrer”` を付けると、`noopener` の効果に加えて、「どのサイトから来たのか」という情報を相手に一切教えないようにできます。
「誰が来たのかバレたくない」というときや、より厳格にセキュリティを高めたいときは、こちらを使うのがおすすめです。
まとめ：今日からできる「安全なリンク作り」
「難しそう…」と感じたかもしれませんが、やることはたったこれだけです。
- `target=”_blank”` を使ったら、必ず `rel=”noopener”` をセットにする。
これさえ覚えておけば、あなたのサイトはぐっとプロフェッショナルな品質になりますし、何よりユーザーを危険に晒す心配がありません。
最近のブラウザでは、自動的に守ってくれる機能も増えてきましたが、自分でしっかりと指定しておくことは「丁寧なものづくり」の第一歩です。ぜひ、今日書いているコードから見直してみてくださいね。
もし分からないことがあっても大丈夫。一つずつ学んでいけば、誰もが信頼できるWebクリエイターになれますよ！応援しています！
コメント