[JavaScrpit] 특수문자 치환

1. 이슈

게시글 내용 저장 시 특수문자에 대한 처리가 부족함을 느꼈다.

<>와 같은 특수문자들을 그대로 출력 시 이를 태그로 인식하여 원치 않는 형태로 출력되거나 했다. (빈칸이나 공백이 되거나...)

또한 XSS 공격에 취약할 것이란 생각이 들었고 이를 대체문자로 치환하여 저장하는 방식을 알아봤다.

2. 특수문자 치환

//특수문자 -> escape 치환
function escapeHtml( str ) {

	 if (str == null) {
	  return "";
	 }	
     
	 str = str.replace(/</g,"&lt;");
	 str = str.replace(/>/g,"&gt;");
	 str = str.replace(/\"/g,"&quot;");
	 str = str.replace(/\'/g,"&#39;");
	 str = str.replace(/\n/g,"<br />");
	 return str;
}

// escape -> 특수문자 치환
function unescapeHtml(str) {

	 if (str == null) {
	  return "";
	 }
     
     str = str.replace(/&amp;/g, '&');
	 str = str.replace(/&lt;/g, '<');
	 str = str.replace(/&gt;/g, '>');
	 str = str.replace(/&quot;/g, '"');
	 str = str.replace(/&#039;/g, "'");
     str = str..replace(/&#39;/g, "'");
     
	 return str;
	}

예를 들어 escape 치환 전 <&test%>라는 문구를 입력했을때 DB에 저장되는 값은 아래와 같다.

치환전

escape 치환 후는 아래와같다.

 

치환후

만약 escape 치환 후 저 태그 그대로 출력된다면 위에 정리한 unescapeHtml()를 이용해 재치환하여 사용하면 된다.

https://pracon.tistory.com/154

자바스크립트 정규표현식 이용한 replace html(<,>,", ' ,\n) 특수문자로 변환

잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다.