おはよう。
今日はHTMLコーディングでよく使われている「target=“_blank”」が危険であるということを紹介する。
Web制作をする際によく使うものなのでぜひ知っておいて欲しい。
暇な人はここからそれらの解決方法や「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で更新された記事を毎日チェックできるのでこちらもフォローしていただけると幸いだ。
今日の記事はここで終わりとする。
ここまで読んでくれてありがとう！
また明日お会いしよう！
おすすめ記事
