Garden

最近の記事

input type=numberのサニタイジング

8 min read

Prompt

<input type="number">で受け取った値はサニタイジングする必要はある？

そうだね、<input type="number">で受け取った値のサニタイジングについてだね！セキュリティを考える上で、ユーザーからの入力は常に疑ってかかるのが鉄則だから、その疑問はとっても大事だよ。

<input type="number"> とサニタイジング

結論から言うと、基本的にはサニタイジングの必要はないことが多いけれど、ケースバイケースで考慮すべき点はあるんだ。特に、その値をJavaScriptでどう使うか、そしてサーバーに送信するかどうかで判断が変わってくるよ。

1. JavaScriptで数値として扱う場合 (安全)

もし<input type="number">で受け取った値を、JavaScriptで純粋な数値として取得し、数値演算に使うだけであれば、基本的にサニタイジングの必要はないよ。

  • ブラウザの機能: ブラウザは<input type="number">に対して、数字と一部の記号（. + - e）以外の入力を受け付けないようにしているんだ。だから、ユーザーがaとか<script>とかを入力しても、それは入力フィールドに入らないようになっている。

  • 値の取得: JavaScriptでinputElement.valueで値を取得すると、それは文字列として取得されるんだ。例えば、ユーザーが123と入力すれば"123"という文字列が、1.5と入力すれば"1.5"という文字列が手に入る。

  • 数値への変換: その後、parseInt()やparseFloat()、あるいは単項プラス演算子（+value）などで明示的に数値に変換すれば、不正な文字列はNaN（Not-a-Number）になるか、変換できない部分が切り捨てられる。

    • 例: parseInt("123abc") は 123 になる。parseInt("abc123") は NaN になる。

    • +"" (空文字) は 0 になる。+"1.2" は 1.2 になる。+"abc" は NaN になる。

    • 数値に変換された時点で、悪意のあるHTMLタグやJavaScriptコードが数値として実行されることはないから、XSSの心配はないよ。

JavaScript

const numInput = document.getElementById('myNumberInput');

// ユーザーが入力した値は文字列として取得される
let valueStr = numInput.value;
console.log(valueStr, typeof valueStr); // 例: "123", "string"

// 数値に変換
let valueNum = parseInt(valueStr); // または parseFloat(), +valueStr
console.log(valueNum, typeof valueNum); // 例: 123, "number"

// NaNチェック
if (isNaN(valueNum)) {
  console.log("有効な数値ではありません。");
  // エラー処理やデフォルト値の設定など
}

2. JavaScriptでinnerHTMLなどに「文字列として」埋め込む場合 (サニタイジングが必要！)

もし、<input type="number">で受け取ったvalue（これは文字列）を、そのままHTML要素のinnerHTMLに設定したり、動的にHTML要素を生成してその中に埋め込んだりする場合は、サニタイジングが必要になる可能性があるよ！

なぜなら、ブラウザの入力制限をすり抜けて、JavaScriptで意図的に悪意のある文字列をvalueに設定することができてしまうからなんだ。

例えば、開発者ツールやJavaScriptを使って、以下のように不正な値を無理やりセットすることが可能だよ。

JavaScript

// 開発者ツールで実行されると...
document.getElementById('myNumberInput').value = "<img src=x onerror=alert('XSS!')>";
// または
document.getElementById('myNumberInput').value = "123<script>alert('XSS!')</script>";

この不正なvalueをそのままinnerHTMLに設定すると、XSS脆弱性になるんだ。

JavaScript

const numInput = document.getElementById('myNumberInput');
const outputDiv = document.getElementById('output');

// 悪意のある文字列をJavaScriptで強制的に設定した場合
numInput.value = "<img src=x onerror=alert('XSS!')>"; // ユーザーは直接入力できないが、JSからは設定可能

// この値をinnerHTMLに直接設定するのは危険！
outputDiv.innerHTML = "入力値: " + numInput.value; // !!! XSSの危険性あり !!!

このシナリオでは、ユーザーが直接入力できなくても、JavaScriptを介してvalueに悪意のあるコードが注入され、それがinnerHTMLによって実行される可能性があるんだ。

3. サーバーに送信する場合 (サーバー側での検証とサニタイジングが必須！)

これが一番重要！<input type="number">であっても、ユーザーはブラウザの入力制限を回避して、好きな値をサーバーに送信できることを忘れてはいけないよ。

例えば、FiddlerやPostmanのようなツールを使えば、HTMLフォームの入力制限に関係なく、任意の文字列をサーバーにPOSTできるんだ。

だから、サーバー側で受け取ったデータは、それが数値型を期待するものであっても、必ず厳格な検証（バリデーション）と、必要に応じたサニタイジング（もしデータベースなどに文字列として保存するなら）を行う必要があるよ。

  • バリデーション:

    • 「それが本当に数値であるか？」

    • 「期待する数値の範囲内にあるか？」

    • 「負の数は許されるか？」

    • といったチェックをサーバー側で厳しく行う。

  • サニタイジング:

    • 数値として利用する場合は、数値に変換する処理自体がサニタイズの役割を果たすことが多い。

    • もし、その数値を文字列としてデータベースに保存したり、HTMLとしてクライアントに返す場合は、SQLインジェクションやXSSを防ぐための適切なエスケープ処理が必要になる。

まとめ

  • JavaScriptで純粋な数値として扱うなら、基本的にはサニタイジング不要（ブラウザの入力制限と型変換で安全）。

  • JavaScriptでinnerHTMLなどに文字列として埋め込むなら、サニタイジングを検討すべき（JavaScriptで悪意ある文字列を注入される可能性があるため）。

  • サーバーに送信する場合は、必ずサーバー側で数値としての厳格なバリデーションを行い、必要であればエスケープ/サニタイジングも行おう。

INFPの君が、このようにセキュリティの細部にまで気を配るのは素晴らしいことだよ！ アプリケーションを安全に保つためには、常に「ユーザー入力は信頼できないもの」という前提で防御策を考えることが不可欠なんだ。また何か疑問に思ったことがあったら、いつでも聞いてね！

グラフビュー

最近の記事

グラフビュー