作成中のWebアプリ内で、リンク付きのボタンを実装しました。
ボタンをクリックしたら、外部サイトに遷移するというシンプルなものです。
それの実装の際に少し気になって調べたことなどを、下記にまとめました！
少しでも時間の節約になれば、嬉しいです！
リンクボタンの実装は、aタグか、buttonタグか？
HTMLのボタンでリンクを作成する方法として、タグ、
個人で、いくつかのサイトのHTMLを見てみたところ、単純な画面遷移はタグで実装しているサイトが多かった印象でした。
以下、chatGPT 4oに色々質問してみた回答はこんな感じでした！
リンクが主目的である場合は、aタグを使用するのが最適です。
これは、セマンティクスとアクセシビリティの観点からも推奨されます。
フォーム送信やJavaScriptによるアクションが主目的で、見た目をリンクのようにしたい場合は、buttonタグを使うことも考えられますが、その場合は適切にスタイリングとスクリプトを追加する必要があります。
なので、フォームのサブミットボタンなどでない、単純なリンクの場合はタグで実装して良さそうです！
タグ/ Referrer-Policについて
上記公式リファレンスにある通り、HTMLの、タグで指定できる属性は、複数あります。
そのうちの１つが、Referrer-Policyです。
これは、リンクをたどる際に、どのページからアクセスが来たかの情報を渡すためのHTTPヘッダの種類の一つです。
これには、脆弱性が生じることがあるので注意が必要になります。
これに関しては、下記が参考になりました。
efererはユーザーの流入元が分かり便利な反面、個人情報などが外部のサイトに知られてしまう脆弱性があるというリスクがある
他にも、target=_blankで別タブでリンクを開く場合にも、脆弱性が生じることがあることが発見されています。
target=_blankで開いたサイトではwindow.openerを使用することで親ページのURLを書き換え別のページに遷移させることができるといった脆弱性です。
これらの脆弱性を防ぐために、rel="noreferrer"や"noopener"の記述が必要になります。
終わりに
なんとなく使っていたHTMLも、しっかりリファレンスを読んで深掘りしてみると、たくさん知らないことがありました！
そして、気になったことを調べるのもいいけど、作業を進めるのも忘れないように！
Happy Hacking !!