メモ的ななにか。

プログラミング関係の備忘録的な何か。

Webサービス"あんこう"の不正入力対策っぽいことをしてみた


スポンサーリンク

http://andorange.sakura.ne.jp/entry.cgi?id=ankooh

目次作成サービス -Ankooh あんこう- βテスト版 @あんどろオレンジ工房


前回の記事でβテスト版をリリースした"目次作成サービス -Ankooh あんこう-"ですが、今回はフォームの不正入力対策っぽいことをしてみました!

といっても大したことはやっておらず、"あんこう"のページ内にあるフォームにscriptタグやinputタグが入力されたときに<や>を&lt;、&gt;に置き換えるようになってます。

ページロードが必要なCGIやPHPアプリだとフォームにCGI言語やPHPスクリプトが入力されたときの不正入力チェックをしないといけないのですが、今回作っているのはjavascriptのみで動作するアプリなのでHTMLタグの対策をすれば良いわけです。

"あんこう"のページ生成にはCGIを使ってますが、動的コンテンツの部分はjavascriptのみで構成しています。埋め込み式のeRuby、SSIなどは使ってないですよ!

改良前

f:id:miz7maki:20150521003331p:plain

フォームに入力したjavascriptのalert関数が見事に動いているのがわかります。
(’ω’)うわああああ!

改良後

f:id:miz7maki:20150521003405p:plain

フォームにscriptタグとinputタグを入力された場合は自動的にタグの<と>を&lt;と&gt;に置換するようにしました。
これならjavascriptの実行を防ぎつつ、もくじの項目として<script~を挿入したいというときにも対応できそうですね!

コード

今回はバリデーションチェック用に関数を定義して使いまわしています。

function valCheck(value){
	if(value.match(/\w*<\/*\s*(script)\s*/ig) || value.match(/\w*<\s*(input)\s*/ig)){
		value = value.replace(/</ig,"&lt;").replace(/>/ig,"&gt;");
	}
	return value;
}

使用方法は至って簡単!
フォームから取得したパラメータにvalCheck関数を噛ませるだけです!

var valTitle = valCheck($(':text[name="title"]').val());
var output1 = "<h2>" + valTitle + "</h2>\n";


今のところフォーム入力に自由度があったほうが使う側としては便利かと思うので、HTMLタグの入力を規制したりはしない方針でいこうかと思います!
というのは、自分が使うときに非常に不便だったりするのでw

それでは!ヾ( ´ー`)ノ

2015/05/22追記

考えてみたところ、HTMLの要素からjavascriptの処理できてしまうので、念のためHTMLタグは規制しておきます。

function valCheck(value){
	value = value.replace(/</ig,"&lt;").replace(/>/ig,"&gt;");
	return value;
}

アンカーに関しては別途入力フォームを設ける予定なので、ページ内リンクの#~や外部リンクのhttp://は専用フォームに入力するようにします!