「新しいタブで開く」その裏側で起きていること――Webサイトを守るための小さな守護神のお話
Webサイトを作っていると、リンクをクリックしたときに「今のページは残したまま、新しいタブで別のページを開いてほしいな」と思うこと、ありますよね。そんなとき、HTMLの `` タグに `target=”_blank”` を添えるのがお決まりのパターンです。
「よし、これでバッチリ！」……実は、その書き方、少しだけ注意が必要なんです。今回は、Webサイトを運営する上で絶対に知っておきたい「セキュリティの守護神」こと、`rel=”noopener noreferrer”` について、一緒に紐解いていきましょう。
—
なぜ `target=”_blank”` だけでは不安なの？
まずはイメージしてみてください。あなたは自分の大切なお店（Webサイト）を運営しています。そこへやってきたお客さん（ユーザー）が、店内の「おすすめリンク」をクリックしました。
`target=”_blank”` を使うということは、「新しい別の部屋へ、お客さんを案内する」という行為です。ここまではいいのですが、実はこのとき、「元の部屋（あなたのサイト）の鍵」を、お客さんが案内先の部屋へ持ち込めてしまうという仕様がHTMLにはあるんです。
もし、案内先のページが悪意のある人によって作られていたら？ その人は、あなたのWebサイトの裏側を覗き見たり、勝手に操作したりする「悪さ」ができてしまう可能性があるのです。これを専門用語で「タブナビング」と呼んだりします。
「せっかく来てくれたお客さんを安全に送り出したい！」――そんな願いを叶えてくれるのが、魔法の呪文のような属性、`rel=”noopener noreferrer”` です。
—
魔法の呪文を書いてみよう
やり方はとても簡単です。`target=”_blank”` を使うとき、セットでこの属性を書き加えるだけ。これだけで、元のページへのアクセス権を完全に切り離し、安全な状態でお客さんを送り出せます。
各属性の役割をちょっとだけ解説
- `target=”_blank”`: 「新しいタブで開いてね」という指示。
- `rel=”noopener”`: 「元のページへのつながり（関係性）を断ち切る」という指示。これで裏側を覗かれるのを防ぎます。
- `rel=”noreferrer”`: 「どこから来たか」という情報を隠す指示。プライバシーを守るためのガードマンのような役割です。
最近のブラウザでは `noopener` だけで十分なことも多いのですが、念には念を入れて `noreferrer` もセットで書いておくのが、プロの現場でも安心の習慣になっています。
—
「面倒だな」って思っても大丈夫ですよ
「毎回リンクを作るたびに、こんなに長いコードを書くの？」と不安に思いましたか？ 大丈夫です。最初は誰でもそう思います。
でも、一度この習慣を身につけてしまえば、それは「料理のあとに手を洗う」のと同じくらい、自然な動作になります。Webサイトを作るということは、そこを訪れる人の安全を守るということ。この小さなひと手間が、あなたのサイトを「信頼できる場所」へと育ててくれるんです。
今日のまとめ
1. `target=”_blank”` を使ったら、必ず `rel=”noopener noreferrer”` をセットにする！
2. これがあることで、悪意のあるページから自分のサイトを守れる。
3. 難しく考えず、「お出かけするときには必ず鍵を閉める」のと同じことだと捉えてみましょう。
Web制作は、こうした小さな気遣いの積み重ねでできています。あなたが書いたその一行のコードが、どこかの誰かの安全を守っている。そう考えると、コーディングも少しだけ誇らしく感じませんか？
つまずいたときは、いつでもこの記事を見返してくださいね。あなたのWeb制作ライフを、これからもずっと応援しています！
コメント