JavaScriptでサニタイジング(エスケープ処理)

ユーザーが文字を入力するようなWebページを作る際に気をつければいけないことがある。それは必ずサニタイジングを行うことだ。 　　　　　　

サニタイジング（エスケープ）とはなにか

サニタイジングとは、利用者が入力した文字データを受け取る際に、プログラムにとって特別な意味を持つ可能性のある文字や文字列を検知して、一定の規則に従って別の表記に置き換えること。「無害化」とも呼ばれ、攻撃者が入力データ中にコード断片などを混入させて誤作動を誘発する攻撃などを防ぐために行われる。 IT用語辞典

要するに、入力文字列をチェックして角括弧など特殊な意味を持つ文字や記号をHTML実体参照表記に置き換える処理をサニタイジングという。

こうした処理を行わなければユーザーがscriptタグなどを入力欄に入れることで、 ユーザーが動作を指示することができる状態になるので、セキュリティが脆弱なサイトとなってしまう。

次に具体的なサニタイジングの仕方をみる。 サーバーサイドの言語(PHP)が利用できる環境の場合は簡単に実装することができる。

受け取った入力文字列を次の関数に通せばいい。

htmlspecialchars($str, ENT_QUOTES, ‘UTF-8′);

PHPに用意された関数htmlspecialcharsという関数は、文字列をサニタイジングして値を返してくれる。第２引数にはサニタイジングする際のルール、第３引数には文字コードを指定する。 htmlspecialchars

ではJavaScriptでサニタイジングを実装するためにはどうすればいいのか。JavaScriptにはPHPのhtmlspecialcharsのような関数は用意されていない。そのため、サニタイジングするための関数を自分でつくればよい。例えば、次のような関数h(str)を定義すればh(入力文字列)とすることで簡単にサニタイジングされた結果を得ることができる。

function h(str){
  return String(str).replace(/&/g,"&")
    .replace(/"/g,""")
    .replace(/</g,"&lt;")
    .replace(/>/g,"&gt;")
}

JavaScriptでのサニタイジングの仕方を見たが、実際には入力文字列のチェックはブラウザ上ではなく、サーバー側で行うことが必要である。ブラウザでJavaScriptを無効にすればブラウザ上でのチェックは免れられるからだ。Webサイトを作成するときは、サーバー側でのサニタイジングがしっかりとできるかしっかりと確認しなければいけない。