Ajax form data를 Query String으로 전달 시 % 값이 사라지는 문제

특정 폼에 %가 들어가는 경우 DB에 저장이 안되는 이슈가 발생하여 수정하는 중에 삽질하게 된 내용을 정리 차원에서 기록한다.

대부분 %의 문제는 DB에 SQL Injection이나 XSS 등의 문제를 회피하기 위해 발생하는 현상이라서 DAO 처리 과정 중에 문제가 발생 한 것이 아닐까란 추측으로 디버깅을 해 보았으나 SQL Prepare가 잘 되어 있었다.

고로 DAO 상에서 발생하는 문제는 아니라는 결론...

 

그럼 서버 단의 Filter에서 파라미터를 잘라 먹는 것은 아닐까란 생각으로 이미 만들어진 보안 Filter를 찾아서 몇 시간 삽질 했으나 이미 Filter에 값이 들어오기 전 부터 없어진 다는 것을 확인.

 

그럼 스크립트의 문제인 것인가?란 의문을 가지고 개발자 도구에서 console.log 로 값을 확인.

참고로 다음과 같은 소스로 되어 있었음.

$.ajax({
	url : "action url...",
	type : "POST",
	dataType : "json",
	data : "idx=" + $("#idx").val() + "&" + mode + "=" + $("#"+mode).val(),
	timeout : 1000 * 5,
	error : function(){},
	success : function(json){
		var status	= json.status;
		var message	= json.message;
		if (status == "200")	swal("성공", "정상적으로 수정이 완료되었습니다.", "success");
		else					swal("에러", message, "error");
	}
});

 

 

여전희 값은 잘 찍히고 있었음.

그럼 뭐가 문제인가? 하고 보다가 개발자 도구의 network 탭에서 % 문자가 들어가는 경우에만 해당 form의 값이 사라지는 현상이 생김.

오류 메시지는 다음과 같이 나옴.

 

memo:

(unable to decode value)

 

"unable to decode value" 란 문장으로 구글링 해 보니 스크립트 단의 문제가 맞고, 해결 방법은 value에 encodeURIComponent를 사용하여 값을 인코딩 해야 한다고 함 ㅠㅠ

 

$("#"+mode).val() 를 encodeURIComponent($("#"+mode).val()) 처럼 수정하고 테스트 하니 서버에서 아무런 이상 없이 동작하고 DB에도 잘 저장 됨.

 

오늘도 삽질은 끝이 없구나 ㅠㅠ