2025年05月25日
テーマ： HTMLタグのお勉強(104)
カテゴリ： 楽天ブログの勉強
`target="_blank"` を使うときの脆弱性と
`rel="noopener"` や `rel="noreferrer"` を使うメリットについて✏️
🟦🔒
このように書くと、リンク先が新しいタブやウィンドウで開く。
でもこれは、セキュリティ的にリスクがあります⚠️
🟦 脆弱性の内容：`window.opener` の悪用
- 新しいタブで開いたページ（リンク先）は、元のページ（リンク元）に JavaScript でアクセスできてしまう。
- 具体的には、`window.opener.location = "https://phishing-site.com"` のようにして、元のページを偽のサイトに書き換えることも可能。
- この手法を「タブナビゲーション攻撃（Tabnabbing）」と呼びます。
🟦 `rel="noopener"` のメリット
- `rel="noopener"` をつけると、リンク先のページから `window.opener` にアクセスできなくなる。
- つまり、元のページの乗っ取りを防げる😊
- モダンブラウザでは、これをつけるだけで十分に安全性が上がる。
🟦 `rel="noreferrer"` のメリット
- `rel="noreferrer"` は `noopener` の機能も含みつつ、リファラー（参照元のURL）も送らないようにする。
- つまり、リンク先には「どこから来たか（リンク元のURL）」がまったく伝わらなくなる。
🟦💡 組み合わせて使うと安全
たとえば：
このように書くと：
| 機能 | 効果 |
|---|---|
| `target="_blank"` | 新しいタブで開く |
| `rel="noopener"` | リンク先から `window.opener` を遮断 |
| `rel="noreferrer"` | リンク元のURLをリンク先に送らない |
🟦✅ まとめ
| 項目 | 内容 |
|---|---|
| `target="_blank"` | 新しいタブで開くが、セキュリティリスクあり |
| `rel="noopener"` | `window.opener` を無効化 → セキュリティ向上 |
| `rel="noreferrer"` | リファラー情報を送らない ＋ `noopener`の効果あり |
もし個人ブログや企業サイトで外部リンクを開くときには、 常に `rel="noopener"` か `rel="noopener noreferrer"` をセット するのがベストです😊
にほんブログ村
お気に入りの記事を「いいね！」で応援しよう
[楽天ブログの勉強] カテゴリの最新記事
-
楽天ブログにグーグルマップを載せる🗺️ 2025年04月30日
-
リンクページ 2024年12月31日
【毎日開催】
15記事にいいね！で1ポイント
PR
Daphne120
都内在住のダフネといいます👩 自然のあるところや神社仏閣に出かけたりしています。 ブログを見やすくレイアウトできるように勉強しながら投稿しています。
Category
Calendar
© Rakuten Group, Inc.
