sanitize-html HTML보안 XSS

Sanitize-HTML: 안전한 웹 애플리케이션을 위한 필수 도구

웹 애플리케이션에서 사용자 입력을 처리할 때 가장 중요한 것은 보안이다. XSS(Cross-Site Scripting) 공격은 여전히 OWASP Top 10 웹 애플리케이션 보안 위험 중 하나로 꼽히고 있다. 이러한 위험으로부터 우리의 애플리케이션을 어떻게 보호할 수 있을지 알아보도록 한다.

Sanitize-HTML이란?

sanitizing : 살균하다

Sanitize-HTML은 사용자가 제공한 HTML을 안전하게 정화하여 악의적인 스크립트를 제거하는 Node.js 라이브러리이다. 이 라이브러리는 신뢰할 수 없는 HTML과 악의적인 JavaScript를 제거하면서도 안전한 HTML 태그와 속성은 유지한다.

주요 기능

사용 방법

설치

$ npm install sanitize-html

기본 사용법

const sanitizeHtml = require("sanitize-html");

const dirty =
  '<p>안전한 HTML입니다.</p><script>alert("악의적인 코드!");</script>';
const clean = sanitizeHtml(dirty);

console.log(clean); // 출력: <p>안전한 HTML입니다.</p>

고급 설정

const options = {
  allowedTags: ["b", "i", "em", "strong", "a"],
  allowedAttributes: {
    a: ["href"],
  },
  allowedIframeHostnames: ["www.youtube.com"],
};

const clean = sanitizeHtml(dirty, options);

실제 사용 사례

  1. 블로그 플랫폼

    • 사용자가 작성한 게시글의 HTML 컨텐츠 정화
    • 댓글 시스템의 기본 HTML 태그 허용

  2. CMS 시스템

    • WYSIWYG 에디터 출력물 정화
    • 사용자 생성 컨텐츠 관리

  3. 채팅 애플리케이션

    • 메시지 내 HTML 포맷팅 허용
    • 이모지와 기본 서식 지원

보안 설정 모범 사례

최소 권한 원칙 적용

const strictOptions = {
  allowedTags: ["p", "b", "i", "em", "strong", "a"],
  allowedAttributes: {
    a: ["href"],
  },
  allowedSchemes: ["http", "https", "ftp", "mailto"],
  allowedSchemesByTag: {},
  allowedSchemesAppliedToAttributes: ["href", "src", "cite"],
  allowProtocolRelative: true,
};

옵션

URL 검증 강화

const urlCheckOptions = {
  allowedTags: ["a"],
  allowedAttributes: {
    a: ["href"],
  },
  transformTags: {
    a: (tagName, attribs) => {
      if (attribs.href) {
        // URL 검증 로직 추가
        if (!/^https?:\/\//i.test(attribs.href)) {
          return false;
        }
      }
      return {
        tagName,
        attribs,
      };
    },
  },
};

스타일 속성 제한

const styleOptions = {
  allowedTags: ["p", "span"],
  allowedAttributes: {
    p: ["style"],
    span: ["style"],
  },
  allowedStyles: {
    "*": {
      color: [
        /^#(0x)?[0-9a-f]+$/i,
        /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/,
      ],
      "text-align": [/^left$/, /^right$/, /^center$/],
      "font-size": [/^\d+(?:px|em|%)$/],
    },
  },
};

결론

Sanitize-HTML은 웹 애플리케이션의 보안을 강화하는 필수적인 도구로, 적절한 설정과 함께 사용하면 XSS 공격으로부터 효과적으로 보호할 수 있으며, 동시에 사용자에게 풍부한 HTML 기능을 제공할 수 있다. 보안과 기능성의 균형을 맞추는 것이 중요하며, 정기적인 설정 검토와 업데이트를 통해 최신 보안 위협에 대응해야 한다.

sanitize-html HTML보안 XSS