Daphneのご縁日和

Daphneのご縁日和

2025年05月25日
XML
カテゴリ: 楽天ブログの勉強



​`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"` をセット するのがベストです😊

ブログランキング・にほんブログ村へにほんブログ村





お気に入りの記事を「いいね!」で応援しよう

Last updated  2025年07月10日 06時55分20秒
コメントを書く
[楽天ブログの勉強] カテゴリの最新記事


【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! -- / --
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

PR

Profile

Daphne120

Daphne120

Free Space

🔽楽天ルームやってます👇🏻

🔽トップページ👇🏻

🔽写真AC たまに載せています👇🏻

🔽日本ブログ村参加中👇🏻
ブログランキング・にほんブログ村へ にほんブログ村 歴史ブログ 史跡・神社仏閣へ
🔽ブログランキング👇🏻神社仏閣
神社・お寺巡りランキング

Category

カテゴリ未分類

(0)

神社仏閣・パワースポット

(15)

買ったもの

(0)

グルメ

(3)

番外編

(6)

楽天ブログの勉強

(3)

Archives

2025年11月
2025年10月
2025年09月

Calendar


© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: