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

HTML/CSS

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

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

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

想定読者
・target=”_blank”をそのまま使用している人
・HTML初心者
・target=”_blank”のセキュリティ対策法を知りたい方

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

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

おさかな
おさかな

なんと!!!

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

window.opener
現在のウィンドウを開いたウィンドウへの参照を返します。

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

WordPressの不正ログインなどが気になる方は、対策としてValue-Auth(バリューオース)を使ってみると良いかも?

「rel=”noopener”」で対策!

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

↓こんな感じ

 

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

おさかな
おさかな

メモメモ…✏

 

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

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

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

 

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

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

 

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

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

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

おさかなでした!

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました