【Web制作】「target=“_blank”」は危険!?

おはよう。

 

今日はHTMLコーディングでよく使われている「target=_blank”」が危険であるということを紹介する。

 

Web制作をする際によく使うものなのでぜひ知っておいて欲しい。

 

要点だけまとめると、
「target=“_blank”」で外部リンクに飛んだ後に元のページはJavaScriptで操作できてしまう。
「JavaScriptで操作できてしまう」ということは悪意のあるサイトも埋め込めるということ。
なのでaタグ内に「target=“_blank”」を付けるときは一緒に「rel="noopener”」を付ければ良い。

 

暇な人はここからそれらの解決方法や「noopener」の名前の由来など、詳しい説明をしていくので読んでいって欲しい。

 

 

それでは早速書いていく。

 

 

なぜ「target=_blank”」は危険なのか

 

外部リンクに飛ばす際に主に使用する「target=blank”」だが、

これを使う際は細心の注意を払わなければ非常に危険なものになりかねない。

 

 

<a href=https:///nantara.com/nnnn target=_blank>何たらのサイトへ飛ぶ</a>

 

なんと、このように何の手も施さずに「target=_blank”」を使うのは危険なのだ。

私も先日までなにも考えずに使用していたが、このように記述していると、飛んだ先のリンクに悪意のあるJavaScriptを埋め込んでしまえばウイルスを仕込むことができてしまう

 

 

それではどうするべきか

 

「ならば、外部リンクに飛びたいときはどうすれば良いんだ!?」という問題に当たるわけだが、

その場合は、target=_blank”」の記述の後ろに「rel=noopener”」と付ければいいのだ!

 

先ほどの例文を編集するとこのようになる。

 

 

<a href=https:///nantara.com/nnnn target=_blank rel=noopener>何たらのサイトへ飛ぶ</a>

 

 

 

この「rel=noopener”」は一体何者かというと、意味的には

 

JavaScriptに「opener」というメソッドがあって、

その「opener」を「No(させない)」ということで「noopener」というらしい。

 

なので読み方は「ノーオープナー」みたいな感じで良いのではないだろうか。(適当)

 

私はそのように呼んでいる。

 

まとめ

 

以上が「target=_blank”」は危険であるという話だ。

 

なので今後は、「target=“”_blank」を使う際は必ず「rel=noopener”」を付与してあげよう。

 

 

このように私のブログでは、エンジニアに関する技術のことや精神面のことなどをメインにブログを毎日更新している。

 

Twitterで更新された記事を毎日チェックできるのでこちらもフォローしていただけると幸いだ。

 

ハラカズヤのTwitterリンク

 

今日の記事はここで終わりとする。

 

ここまで読んでくれてありがとう!

 

また明日お会いしよう!

 

おすすめ記事

 

エンジニアなのに「百度」を知らないのは流石にヤバくない!?
2020.2.27
おはよう。 今日は「百度」について書いていく。 えっ?「百度」を知らないだって!? 私のブログの訪問者の大半はエンジニアだと言うのに「百度」を知らないのは流石に問題があるだろう! だが心配はいらない、今日はこの天才である私が「百度」を知らないあなたに優しく「百度」の魅力を解説してあげよう! ...
  • 【驚愕】金持ちになる「お金の使い方」を完全に理解してしまった、、
  • 【怒涛の一年】ハラカズヤの2019年を振り返る(エンジニア向け版)
  • 【面白い】読解不能な文章の書き方
  • 【全人類必見】自己投資は徹底的にするべき
  • 脳移植すると記憶はどうなるのか
  • 【社会人になる不安が吹っ飛ぶ!】社会人の最高なところ3選