問い合わせフォームの構築の際、セキュリティ対策で重要になってくるのが入力内容のエスケープ処理です。
エスケープ処理とは
エスケープ処理とは、特殊な記号等、HTMLのソースで意味を持つ文字を別の文字列に置き換える処理を指します。
HTMLのソースで意味を持つ文字の例としては、ソース内でタグを囲う際に用いられる「<」や「>」、URLを入力する際に用いられる「/」等が該当します。
これらを問い合わせフォームの入力ボックスにそのまま入力し、確認画面のソースに反映される状態にしてしまうと、Webサイトの攻撃者（イタズラやハッカー）等によるJavaScriptで、本来意図しない処理を組み込まれ、情報を抜き取られたり、不正な情報をWebサイト上に表示させるプログラムを動作させてしまう原因となります。
これはXSS（クロスサイトスクリプティング）と呼ばれるサイバー攻撃で、Webの構造とJavaScriptの知識があれば簡単に実行することが出来てしまう攻撃手段です。
エスケープ処理の具体例
この攻撃を防ぐ方法として挙げられるのが、先ほど紹介したエスケープ処理です。
特殊な記号をただの文字列として表示する実体参照文字の形式に変換することで、上記のXSS攻撃を簡単に防ぐことが出来ます。
JavaScriptを利用し、問い合わせフォームの入力段階、もしくは確認画面に遷移する直前で以下の関数を呼び出すことで比較的実装コストをかけず、簡易的なエスケープ処理が可能です。
JavaScript
$('.btn').on('click', function() {
$('.element').addClass('show');
return false;
});
先程挙げた「<」「>」以外にも、「&」「"」「'」等、プログラムを実行する際に用いられる記号は軒並みエスケープ処理を行うことを推奨します。
最後に
Webサイトに問い合わせフォームを実装したいという例は多く、その需要の多さからフォームを導入するプリセットや、WordPress、Movable TypeといったCMSにフォームを簡単に実装できるプラグインが存在します。
それらは利用することで簡単にフォームを実装できる便利なものですが、セキュリティ対策の面では脆弱性が懸念される場合があるため、今回紹介したエスケープ処理などの対策が行われているかを確認することは重要になります。
弊社ではそうしたセキュリティ対策を行ったフォームの導入の実績がございます。 フォームに限らず、Webサイトのリニューアルや改善をご検討の際は、お気軽にお問い合わせください。
- Hikaru Tone
- Columns
- ―
