target = "_blank"の脆弱性について

はじめに

オリジナルポートフォリオ作成でビューに苦戦しており、スクールで一番最初に学習したHTML・CSSが抜けている事に気付きました。

スクール同期から「スクールの学習に補う形でドットインストールをいいですよ！」と勧めて頂いたので学習し始めました。

そこでスクールでは学習しなかった知識があったのでアウトプットしていきます。

target = "_blank" ページを別タブで開く

文字をクリックしたら別のページに遷移させたいとします。

その場合、以下のようにaタグとhref属性を以下のように記述します。

<p>私のマイページは「<a href="https://qiita.com/N396184501">こちら</a>」です！</p>

「こちら」をクリックしたらqiitaのマイページに遷移する事ができます。

参考

aタグは、リンク＝次のページ・コンテンツへつながるドアのようなもので、
ドアの先の行き先がhref属性となります。

ページの遷移を仕方で別のタブを開いてページを遷移させたい場合は target="_blank"を使用します。

<p>私のマイページは「<a href="https://qiita.com/N396184501" target="_blank">こちら</a>」です！</p>

aタグの中に組み込む事で別のページに遷移する事ができます。

target="_blank について深掘りしていくと脆弱性があり、使うのはよろしくないとの記事がありました。

「web.dev」というGoogleが開発しているwebサイトのパフォーマンスを分析できるサイトに記載されておりました。

和訳すると、

target="_blank "属性を使って他のサイトのページにリンクすると、サイトのパフォーマンスやセキュリティ上の問題が発生する可能性があります。

target="_blank "リンクにrel="noopener "またはrel="noreferrer "を追加することで、これらの問題を回避することができます。

<p>私のマイページは「<a href="https://qiita.com/N396184501" target="_blank" rel="noopnener">こちら</a>」です！</p>

rel="noopnenerをつける事で改善されるようです。

最後に

スクールで学習した以外にもまだまだ学ぶ事があるという事が分かりました。
また今回でカリキュラムに書いてある事を使うのではなく、調べる大切さを知りました。