セキュリティ対策としてやっておきたいこと【HTML編】

リンクのセキュリティ対策

対応内容

別ウィンドウに飛ぶことができるtarget="_blank"にrel="noopener noreferrer"をつける

<a href="xxx" target="_blank" rel="noopener noreferrer">リンク名</a>

目的

遷移先のページが悪いサイトだった場合、window.opener.location = のように、元ページに対して悪用(フッシング詐欺やウイルスを流す)が可能になるので、以下のコードを記述します。

noopenner　リンク先→リンク元に対する不正なJavaScript処理を防止する
noreferrer　参照元ページを取得でないようにする

参考サイト

外部ライブラリ読み込み時の integrity 属性の追加

対応内容

CDN経由のライブラリを読み込む際はSRI（Subresource Integrity)設定する

1. ハッシュジェネレーターへCDNリンクを入力してコードを入力
   https://www.srihash.org/

   例：

   <script src="https://example.com/cdn/script.js" integrity="sha◯◯◯-xxx"></script>

2. 生成したコードをHTMLのそれぞれ組み込みたい箇所へ埋め込む

目的

CDNの改ざんによるマルウェア感染防止。

注意点

値を照合して読み込むため、適切にバージョン管理されていないものはハッシュ値が変動することがあるそうです。
変動があった場合は読み込みにエラーが発生します。
基本的に大手では起こり得ないそうですが、新しいものなどあまり広まっていないものは注意が必要です。

参考サイト

フォームの制御

input typeの適切な型を指定

対応内容

メールアドレス欄はinput type=”email”など。それぞれ適切な型を指定

目的

バリデーション漏れやXSSリスクの軽減

フォーム内に入力履歴を残さない対策

対応内容

inputタグの中にautocomplete="off"を記述

<input type="text" autocomplete="off">

参考サイト

目的

フォーム内に入力履歴を残さない。自動入力の誤作動などの対策

注意点

Chromeでは効かないことが多々あるようです。その場合はJSで制御ができるようです。

参考サイト