こんにちは！フロントエンドの世界へようこそ。
Web制作を始めたばかりの頃って、新しいタグを覚えるたびにワクワクしますよね。今日はそんな皆さんに、「リンクを開く」という何気ない操作に隠された、ちょっと怖いけれど大切なセキュリティの知識をお話しします。
「たかがリンク」と侮るなかれ。ここを押さえておくだけで、あなたの作るサイトの信頼性がグッと高まりますよ。
—
リンクを開くときの「小さな落とし穴」
皆さんも、新しいタブでリンクを開きたいときに `target=”_blank”` を使ったことはありますよね？
これ、実はブラウザの仕組み上、「移動先のページ」に対して「移動元のページ」の情報の一部を渡してしまうという性質があるんです。
例えるなら「合鍵を渡してしまう」ようなもの
イメージしてみてください。あなたが友人に「このドアの向こうを見てきて！」と部屋の鍵を貸したとします。でも、その鍵に「元の部屋の鍵」も一緒についていたら？
もしその友人が悪意を持っていたら、勝手に元の部屋に戻ってきて、中のものを荒らしたり、こっそり覗き見たりできてしまいますよね。
Webの世界でも同じです。`target=”_blank”` だけを指定すると、移動先のページから、あなたのページを操作できる「隙」ができてしまうことがあるんです。これを「window.opener」経由の脆弱性と呼びます。
—
救世主は `rel=”noopener”`
そんな怖い事態を防いでくれるのが、`rel=”noopener”` という属性です。
これをリンクに付け加えるだけで、新しいタブを開いた際に、移動先のページに対して「元のページの情報」を一切渡さなくなります。「用が済んだら鍵は置いていってね！」と制限をかけるようなイメージですね。
実装はとても簡単です
さっそくコードを見てみましょう。今の時代、`target=”_blank”` を書くときは、必ずセットで書くのが「お作法」になっています。
これだけで、セキュリティリスクをピシャリと遮断できるんです。どうですか、意外とシンプルですよね！
—
もう一つの味方：`rel=”noreferrer”` との違い
たまに `rel=”noreferrer”` という記述も見かけませんか？
こちらは「情報を渡さない」ことに加えて、「どこから来たのか（参照元）」という情報すらも相手に教えないようにする、より厳重な守り方です。
- `rel=”noopener”`: 相手に元のページを操作させない（セキュリティ重視）
- `rel=”noreferrer”`: セキュリティに加え、「どこからアクセスされたか」という履歴も隠す
基本的には `rel=”noopener”` で十分ですが、よりプライバシーを重視したいときは `rel=”noreferrer”` を使う、と覚えておけばバッチリです。ちなみに、最近のブラウザでは `noopener` を指定すれば `noreferrer` の効果も一部含まれるようになっているので、まずは `rel=”noopener”` を徹底するだけで大きな進歩ですよ。
—
まとめ：今日から「当たり前」にしよう
最後に、今回のポイントをまとめておきますね。
1. `target=”_blank”` を使ったら、必ず `rel=”noopener”` をセットにする
2. これは「元のページを不正操作から守る」ための大切なガード
3. 難しく考えず、「お出かけのときは鍵を預けない」というマナーだと覚えておこう！
Web制作は、こうした小さな気遣いの積み重ねです。最初は覚えることが多くて大変かもしれませんが、こうして一つひとつ「知っていること」を増やしていく過程こそが、スペシャリストへの第一歩です。
皆さんが書くコードで、インターネットが少しずつ安全で心地よい場所になっていく。そう考えると、なんだかワクワクしませんか？
ぜひ明日からのコーディングで、忘れずに試してみてくださいね！応援しています！
コメント