사용자 생성 콘텐츠의 보안 위험성

이커머스 사이트에서 상품 리뷰나 문의 사항 입력 시 풍부한 서식 지원은 사용자 경험을 향상시킵니다. 그러나 사용자가 입력한 데이터에 HTML 태그가 허용될 경우, 악의적인 스크립트 삽입으로 인한 XSS(Cross-Site Scripting) 공격에 노출될 수 있습니다. 공격자는 이를 통해 세션 쿠키 탈취나 악성 코드 실행을 시도할 수 있으므로, 데이터 저장 전 철저한 정제 과정이 필수적입니다.

서버 측 HTML 정제 아키텍처

클라이언트 측 검증은 우회 가능하므로, 반드시 서버 단에서 데이터를 검증해야 합니다. React 기반 프론트엔드와 Node.js 백엔드 환경에서는 isomorphic-dompurify 라이브러리를 활용하여 서버에서도 DOMPurify 의 정제 기능을 사용할 수 있습니다. 데이터베이스 저장 직전 미들웨어 단계에서 오염된 코드를 제거하는 방식이 일반적입니다.

// sanitizeService.js
const createDOMPurify = require('isomorphic-dompurify');
const { JSDOM } = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

function cleanUserContent(rawInput) {
    if (!rawInput) return '';
    
    // 기본 설정: 위험한 태그 및 속성 제거
    const secureHtml = DOMPurify.sanitize(rawInput, {
        ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'img', 'p', 'br'],
        ALLOWED_ATTR: ['href', 'src', 'alt', 'rel', 'target']
    });

    return secureHtml;
}

module.exports = { cleanUserContent };

안전한 링크 속성 강제 설정

단순히 태그만 허용하는 것보다 속성 값을 제어하는 것이 중요합니다. 예를 들어 외부 링크 허용 시 rel="nofollow" 및 target="_blank" 속성을 강제하여 SEO 스팸 및 보안 취약점을 방지할 수 있습니다. DOMPurify 의 후크 기능을 활용하여 저장 전에 속성을 변조할 수 있습니다.

// configSecurity.js
DOMPurify.addHook('afterSanitizeAttributes', function(node) {
    if (node.tagName === 'A') {
        node.setAttribute('rel', 'nofollow');
        node.setAttribute('target', '_blank');
        // javascript 프로토콜 차단
        if (node.getAttribute('href')?.startsWith('javascript:')) {
            node.removeAttribute('href');
        }
    }
});

악성 스크립트 차단 검증

실제 공격 벡터인 <script>alert('xss')</script> 와 같은 입력이 들어오면 DOMPurify 는 해당 태그를 완전히 제거합니다. 반면 <b>강조</b> 와 같은 안전한 마크업은 원본 형태를 유지합니다. 정규표현식 기반 필터링은 우회 가능성이 높지만, DOMPurify 는 브라우저의 DOM 파싱 엔진을 기반으로 하여 다양한 인코딩 우회 기법까지 차단합니다.

성능 및 배포 고려 사항

서버 측 정제 작업은 추가적인 CPU 자원을 소모하지만, 보안 위협에 비해 비용은 미미합니다. Node.js 환경에서 jsdom 인스턴스를 재사용하여 오버헤드를 줄일 수 있습니다. 최종적으로 정제된 데이터만 데이터베이스에 영구 저장되며, 클라이언트에서는 추가적인 필터링 없이 안전하게 렌더링할 수 있습니다.