Input, Textarea 키 입력시 특수문자 입력할 수 없도록 차단 처리

웹 브라우저에서 회원가입 폼이나 게시판의 글 쓰기 폼과 같은 여러 가지 폼을 만들다 보면 웹 보안을 강화시키기 위해서 특수문자를 제한하는 경우가 있습니다. 

예를 들어서 SQL Injection이나 XSS를 막기 위해서 홀 따옴표(')나 쌍 따옴표("), 그리고 스크립트 실행을 방지하기 위해서 꺽쇠(< 혹은 >)나 script 라는 단어, document라는 단어 등을 차단하는 것이 그 예라고 할 수 있겠습니다.

그런데, 이러한 특수문자를 차단하는 처리는 서버딴에서도 처리되야되는 것이 맞지만 클라이언트딴(웹 브라우저)에서도 체크가 되어야 하는 경우가 많습니다. 글을 실컷 다 쓰고 나서 특수문자는 입력이 안된다며 그 동안 입력했던 내용이 모두 초기화 되버린다면 엄청 화가나겠죠??

그래서 여기서는 jQuery로 이러한 특수문자나 특정 문자를 차단하는 소스를 공개하고자 합니다. 실은 이러한 소스코드는 누구나 작성할 수 있기 때문에 공개라고까지 거창하게 말 할 필요가 없지만 일일이 만들기엔 귀찮은 면이 있고 쉽게 가져다 쓰고자 공개하는것입니다. ^^

소스는 아래와 같습니다.

-----------------------------------------------------------------------------------

//모든 input과 textarea에 대해서 특수문자 경고표시하기

$("input, textarea").keyup(function(){

var value = $(this).val();

var arr_char = new Array();

arr_char.push("'");

arr_char.push("\"");

arr_char.push("<");

arr_char.push(">");

for(var i=0 ; i<arr_char.length ; i++)

{

if(value.indexOf(arr_char[i]) != -1)

{

window.alert("<, >, ', \" 특수문자는 사용하실 수 없습니다.");

value = value.substr(0, value.indexOf(arr_char[i]));

$(this).val(value);

}

}

});

-----------------------------------------------------------------------------------

위 소스코드는, jQuery의 Selector를 이용하여 모든 input과 textarea 엘레먼트에 대하여 키보드를 눌렀다 떼었을 때 이벤트가 발생되며, arr_char 배열에 속한 문자열이 input과 textarea의 value에 포함된 경우 경고창을 출력하고 특수문자를 입력하기 이전 상태로 value 속성값을 변경하게 됩니다.

지금은 모든 input 과 textarea에 대해서 적용되도록 하였지만, jQuery의 Selector 부분을 수정하시면 얼마든지 대상을 변경하실 수 있으실 겁니다. 그리고 배열에 문자나 문자열을 추가함으로 얼마든지 차단하고자 하는 문자(문자열)를 추가하실 수 있습니다.