HTML入門！第2回目、aタグの勉強でセキュリティについて考えたこと。

HTML 第２回目となります。
今回は、簡単なリスト＋リンクについて書いてみました。

<ul>
    <li><a href="#" target="_blank">HOME</a></li>
    <li><a href="#">SNS</a></li>
    <li><a href="#">ABOUT</a></li>
</ul>

link

またもかなりシンプル。。。
最初から綺麗画面作りとはいかないので、
まずはできることから取り組んでいきます！

個人的な好みですが、リンクは新しいタブで開きたいので[target="_blank"]を使用しております。

そんな中、便利だな〜とコードに追加している中で、
MDNで応用事例をみていた際、「！！！」となる内容をで発見しました。

それはなんと、[target]活用する時に[window.opener API]なるものが情報を悪用したり、
また[_blank]活用時には、タブ１（既存タブ）のプロセスをタブ２（新規タブ）へ引き継いでしまう、と言う内容です。
これにより、ページパフォーマンスが下がったり、悪い人の手によってフィッシング詐欺攻撃に利用されてしまうようです。

そのようなWebサービスは、利用配慮が足りないよな。
自分がサービスを作るなら、安全性は最低限なりに実装したい!回避方法は？と調べると
[rel="noopener noreferrer"]の追加で回避できることを知りました！
実際の現場での活用方法などありましたらコメントいただけると嬉しいです。

と言うことで、さっそく追加しました。

<ul>
    <li><a href="#" target="_blank" rel="noopener noreferrer">HOME</a></li>
    <li><a href="#">SNS</a></li>
    <li><a href="#">ABOUT</a></li>
</ul>

画面の見た目は、全く変わらないのですが、こういった配慮は必要ですよね。

最後まで読んでいただきありがとうございました！