サニタイズとバリデーションの違いとは？初心者向けに整理してみた
Web開発を学んでいると、
- バリデーション
- サニタイズ
という言葉をよく見かけます。
どちらも「ユーザー入力を扱う処理」ですが、実際には役割が異なります。
この記事では初心者向けに、それぞれの違いや、なぜ必要なのかを整理してみます。
なぜ必要なの？
一言でいうと、
ユーザー入力は信用できないから
です。
Webアプリでは、外部のユーザーが自由に入力できます。
そのため：
- 間違った入力
- 想定外の入力
- 悪意のある入力
が送られてくる可能性があります。
例えば：
- 年齢欄に文字列を入力する
- メール欄にメール形式ではない値を入れる
- scriptタグを入力して攻撃する
などです。
そのため、
- 正しい形式か確認する
- 危険なデータを無害化する
という処理が必要になります。
バリデーションとは
バリデーション（Validation）は、
入力された値が正しい形式か確認する処理
です。
例えば会員登録フォームでは、以下のような内容を確認します。
- メールアドレスの形式
- 必須入力
- パスワードの文字数
- 数字のみ入力可能か
- 最大文字数を超えていないか
例
if (!email.includes('@')) {
alert('メールアドレスの形式が不正です')
}
これは、
メールアドレスとして正しい形式か？
を確認しているため、バリデーションです。
サニタイズとは
サニタイズ（Sanitize）は、
危険なデータを無害化する処理
です。
例えば掲示板などで、ユーザーが以下のような入力をした場合を考えます。
<script>alert('hack')</script>
これをそのままHTMLとして表示すると、JavaScriptが実行される危険があります。
このような攻撃は、XSS（クロスサイトスクリプティング）と呼ばれます。
そのため、以下のように変換して、ただの文字列として扱います。
<script>alert('hack')</script>
これがサニタイズです。
違いを整理
| 項目 | バリデーション | サニタイズ |
|---|---|---|
| 目的 | 正しい入力か確認する | 危険な入力を無害化する |
| 主な用途 | フォーム入力チェック | セキュリティ対策 |
| 例 | メール形式チェック | scriptタグの無害化 |
| 防ぐもの | 不正な形式のデータ | XSSなどの攻撃 |
実務では両方必要
重要なのは、
どちらか片方だけでは不十分
ということです。
バリデーションだけの場合
入力形式はチェックできても、危険な文字列が通る可能性があります。
<script>alert(1)</script>
サニタイズだけの場合
危険な文字列を無害化できても、形式がおかしいデータが保存される可能性があります。
例えば、以下のようなケースです。
- メール形式ではない
- 異常に長い文字列
- 数字欄に文字列が入っている
そのため、実務ではバリデーションとサニタイズを組み合わせて使います。
Reactではどうなの？
Reactでは通常、以下のように値を表示する場合、自動でエスケープされます。
<p>{text}</p>
そのため、ユーザーが <script> のような文字列を入力しても、基本的にはただの文字列として表示されます。
しかし、以下のような dangerouslySetInnerHTML を使う場合は注意が必要です。
<div dangerouslySetInnerHTML={{ __html: html }} />
これはHTMLを直接描画するため、使い方を誤るとXSSの原因になる可能性があります。
まとめ
-
バリデーション
→ 正しい入力か確認する -
サニタイズ
→ 危険な入力を無害化する
似ているように見えますが、役割は大きく異なります。
Web開発では、
- 正しい形式のデータを受け取ること
- 危険なデータを無害化すること
の両方が重要です。
バリデーションとサニタイズの違いを理解しておくと、フォーム処理やセキュリティ対策を考えるときに役立ちます。