서버에서 스크립트용 데이터를 출력할 때 주의할 점

발생일: 2011.09.06

문제:
스크립트를 로드하기 위해 서버에서 직접 JSON 형태의 데이터를 페이지에 찍는 경우가 많다.
헌데, 종종 서버 데이터에 따옴표 등이 포함되어 있어 스크립트 오류가 나곤 한다.
또한, 전달받은 데이터가 HTML을 구성하기 위한 용도일 경우엔 모듈마다 태그 처리 방법이 달라 원하지 않는 결과가 나올 때도 있다.

이런 상황이 발생할 걸 예측하고 있지만, (헷갈리다보니) 매번 케이스 바이 케이스로 처리할 때가 많다.
애초부터 좀 일관되게 처리하면 좋지 않을까?


해결책:
예를 들어, 아래와 같은 데이터를 서버에서 출력했다고 가정해보자.

var serverData = {
    title: "울랄라 나는 "제목"이다.", // 따옴표 때문에 오류가 발생한다.
    content: "본문도 <strong>중요</strong>하다. 또 &lt;strong&gt;중요&lt;/strong&gt;하다."
                // HTML 출력 용도로 사용한다면 escape/unescape 시 의도하지 않는 결과가 나올 수 있다.
};

title 데이터는 따옴표 때문에 스크립트 오류가 발생하게 된다. (당연히 이후 스크립트는 실행되지 않는다.)
content 데이터를 다음 모듈에서 HTML 출력 용도로 사용한다면, 중복으로 unescape을 실행해 의도하지 않는 결과가 나올 수도 있다. content 데이터는 일반 문자열로, 또는 input 박스나 textarea 내의 문자열로, 또는 HTML로 바로 출력하는 경우가 있어 때로 처리할 때 좀 헷갈리는 경우가 생길 수 있다.
이 데이터를 서버에 다시 보냈을 때에도 마찬가지이다.


서버 측과 미리 약속을 정해두면 일관성 있게 처리할 수 있을 것이다.

1. 서버에서 페이지 내 스크립트를 출력할 때엔 항상 HTML Entity로 escape 한 후 출력한다.
    따옴표와 홑따옴표를 포함한 특수문자.
    대상(special character): ', ", &, <, > 

2. 스크립트에서는 받은 데이터를 우선 unescape 한 후 처리한다.
    처리할 때에는 예외상황에 대비해 HTML Name과 Entity 모두 unescape한다.
    대상: &amp;, &#38;, &quot; &#34;, &apos; &#39, &lt; &#60, &gt; &#62;

3. 스크립트에서 서버에 데이터를 보낼 때에는 unescape 한 원본 문자열을 보낸다.


참고:
HTML Entity Reference: http://www.w3schools.com/html/html_entities.asp