【HTML】target= “_blank”の脆弱性？別タブで開くときのセキュリティ対策は大丈夫？

みなさんこんにちは！おさかなです！

今回は「target= “_blank”の脆弱性？別タブで開くときのセキュリティ対策」について、書いていこうと思います！

それでは、レッツゴー！！！！！

target=”_blank”には脆弱性がある？

別タブで開いてもらう時によく使用する「target=”_blank”」ですが、実は脆弱性が存在しています！

おさかな

なんと！！！

実は、新しく開いたタブでJavaScriptのwindow.openerを使用すると、元のページが操作されてしまうらしいのです！(ひええ～。)
MDNにも掲載されています。

Window: opener プロパティ - Web API | MDN

Window インターフェイスの opener プロパティは、 open() によって、または target 属性の付いたリンクの操作によって開かれたウィンドウを開いたウィンドウへの参照を返します。

developer.mozilla.org

悪用すると、フィッシング詐欺などにも使われてしまい大変です💦(どうしよう…。)

「rel=”noopener”」で対策！

対策として、target=”_blank”とセットで「rel=”noopener”」を付け足せば使用してもOKです！(かんたん！)
これは新しいタブを「別スレッド」として扱うことで、ページの処理を別々にできるため、結果として元ページが操作されることを防いでくれます。

↓こんな感じ〇

<a href="hogehoge.com" target="_blank" rel="noopener">

↓単独で使うのは避けましょう✖

<a href="hogehoge.com" target="_blank">

おさかな

メモメモ…✏

「rel=”noreferrer”」との違いは？

rel=”noopener”と似たもので「rel=”noreferrer”」というものもあります！
これは「参照元のリンクを非表示」にすることができ、結果としてrel=”noopener”と似たような挙動を実現することができます。(わ～お！)

Edgeなどの「rel=”noopener”」自体がサポートされていない一部ブラウザや、メールやユーザーIDなど、プライベートな情報を扱う場面で使用することが望ましいです！

いかがだったでしょうか？

プログラムの勉強を始めたばかりの方は「セキュリティ」の観点からコードを書くということが少し難しかったります。
ですが、かなり重要な視点になります！
ちょっとずつでいいので、初心者のうちから意識してみると、ますますパワフルなプログラムが書けると思うので、一緒にがんばりましょう…✨

おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています！
ぜひ他のページも覗いてみてください…！

それでは今回はこの辺で！

ここまで読んでくださり、ありがとうございました！

おさかなでした！