HTML5 데이터 속성에서 JSON 인코딩 시 작은따옴표 이스케이프 처리 방법

HTML5 데이터 속성에서 JSON 작은따옴표 문제

PHP의 json_encode()를 사용해 배열을 HTML5의 data- 속성에 출력할 때, JSON 문자열에 포함된 작은따옴표(')가 HTML 구조를 깨뜨리는 문제가 발생할 수 있습니다. 특히 속성 값을 큰따옴표로 감싸더라도, 브라우저나 상황에 따라 작은따옴표가 예기치 않게 해석되어 오류가 생길 수 있습니다.

해결 방법 1: htmlspecialchars()와 함께 사용하기

가장 안전한 방법은 json_encode() 결과를 htmlspecialchars() 함수로 한 번 더 처리하는 것입니다. 이때 ENT_QUOTES 플래그를 지정하면 작은따옴표와 큰따옴표 모두 HTML 엔티티로 변환됩니다.

printf('<article data-tags="%s">', htmlspecialchars(json_encode(array('html5', ...)), ENT_QUOTES, 'UTF-8'));

이 방식은 JSON 문자열 내의 모든 인용 부호를 ', " 형태로 변환해 주므로, HTML 속성 값으로 안전하게 삽입할 수 있습니다.

해결 방법 2: JSON_HEX_APOS 플래그 활용하기

PHP 5.3 이상에서는 json_encode() 자체에 내장된 옵션을 사용할 수도 있습니다. JSON_HEX_APOS 플래그를 두 번째 인자로 전달하면, JSON 문자열 내의 작은따옴표가 자동으로 유니코드 16진수 표현(\u0027)으로 변환됩니다.

json_encode(array('html5', ...), JSON_HEX_APOS)

추가 팁: 플래그 조합하기

더욱 견고한 처리를 원한다면 여러 플래그를 비트 OR 연산자(|)로 조합할 수 있습니다. 예를 들어 JSON_HEX_APOS | JSON_HEX_QUOT을 함께 사용하면 작은따옴표와 큰따옴표를 모두 변환하여 어떤 상황에서도 안전한 JSON 출력을 보장합니다.

두 가지 방법 모두 유효하지만, 일반적으로는 첫 번째 방법처럼 htmlspecialchars()를 함께 사용하는 것이 HTML 컨텍스트 전반에서 더 포괄적인 보안을 제공하므로 권장됩니다.