Skip to content

텍스트 에디터 및 HTML Sanitizer 라이브러리 도입

Jump to bottom
Seongjin Hong edited this page Aug 5, 2024 · 2 revisions

라이브러리별 도입 목적

텍스트 에디터

사용자가 크루루 서비스를 이용하여 동아리 부원 모집 공고를 작성할 때 편의를 제공합니다.

  • 모집 공고는 크루루에서 동아리 모집 담당 임원과 지원자가 만나는 접점입니다.
  • 동아리 자체의 아이덴티티, 모집하고자 하는 포지션의 특성, 인재상과 JD가 사람들에게 효과적으로 전달될 수 있도록 다양한 타이포그래피 기능 지원이 필요하다고 판단하였습니다.
    • Heading 요소
    • List 요소 (ol, ul)
    • 문단 정렬 스타일
    • 서체 스타일 (색상, 배경색상 등)
  • 부가적인 학습곡선이 요구되는 마크다운 등의 문법 지원보다는, 직관적인 UI를 갖춘 텍스트 에디터가 기능 사용성 측면에서 더 바람직하다고 보고 WYSIWYG 에디터를 우선 고려하게 되었습니다.

HTML Sanitizer

사용자가 임의로 입력한, HTML 포함 콘텐츠를 렌더링하는 과정에서 XSS 공격을 방지합니다.

  • WYSIWYG 에디터를 통해 입력된 데이터는 일반적으로 HTML 태그 문자가 포함된 string 타입으로 저장됩니다.
  • React 기반 애플리케이션 화면에 이 데이터를 렌더링하려면 dangerouslySetInnerHTML prop을 사용해야 합니다. 이름에서 유추할 수 있듯이 보안적으로 위험한 방법이며, 특히 악의적인 사용자에 의한 스크립팅 공격을 허용할 가능성이 있습니다.
  • 이러한 공격을 방지하기 위하여 별도의 HTML Sanitizer 라이브러리를 함께 도입하고자 합니다.

라이브러리 선정 기준

기준 상세 내용
오픈소스 기반 무료 오픈소스에 기반한 무료 라이브러리여야 한다.
라이선스 문제 없음 상업적/비상업적 사용에 따른 문제가 없어야 한다.
활발한 사용자 커뮤니티 유무 높은 인지도와 함께 각종 도입기, 트러블슈팅 기록이 꾸준히 축적된 상태여야 한다.
꾸준한 유지보수 여부 현 시점 기준으로 최근 6개월 이내에 업데이트 배포 이력이 있어야 한다.
(에디터 한정) 한글 지원 한글 입력 및 저장에 문제가 없어야 한다.

라이브러리별 내부 검토 결과

텍스트 에디터

최종 선택 : Quill (react-quill)

Quill는 JS/TS/React에서 사용 가능한 오픈소스 WYSIWYG 에디터 라이브러리입니다.

기타 후보군

Toast UI

  • NHN Cloud에서 개발한 마크업 언어 기반 오픈소스 에디터
  • 타이포그래피, 이미지 업로드, 테이블 생성 등 다양한 기능을 지원
  • WYSIWYG보다는 마크업 기반 ‘웹페이지 에디터’의 역할에 가까움
  • 2023년을 끝으로 지원 중단되었으며, React v18을 미지원하여 후보군에서 탈락

TinyMCE

  • 오픈소스 기반 유명 WYSIWYG 에디터
  • React component 공식 지원
  • 무료 버전의 경우 cloud-hosted 버전만 선택 가능하며 월 1,000회 로드 제한이 걸려있어 후보군에서 탈락

Draft.js

  • Facebook에서 공개했던 오픈소스 에디터
  • Heading, Blockquote, List 등 타이포그래피 위주로 지원했으며 React와의 직접 연동을 지원
  • 2020년 v0.11.7 버전을 끝으로 지원 중단되었으며, 한글 입력시 onChange 이벤트 문제로 상태값 저장이 제대로 되지 않는 이슈가 있어 후보군에서 탈락

Jodit

  • 순수 TypeScript로 개발된 오픈소스 에디터
  • 워드프로세서에 준하는 다양한 기능 지원 → 실제 필요 범위에 비해 지나치게 많은 기능 및 플러그인
  • 국내 사용자 커뮤니티 및 도입 기록을 찾아보기 힘듦 → 부가적인 러닝 커브 및 트러블슈팅 난이도 상승 이슈로 후보군에서 탈락

평가표

기준 Quill Toast UI TinyMCE Draft.js Jodit
오픈소스 기반 무료 여부 O O △ O O
라이선스 문제 없음 O O O O O
활발한 사용자 커뮤니티 유무 O O O △ X
꾸준한 유지보수 여부 O X O X O
한글 지원 O O O X O

HTML Sanitizer

최종 선택 : DOMpurify

DOMpurify는 HTML 태그가 포함된 텍스트에서 위험 요소를 제거하는(sanitize) 라이브러리입니다.

기타 후보군

sanitize-html

  • Node.js 등 서버사이드의 백엔드 환경에서 사용하는 데에 특화되어 있어 후보군에서 제외

js-xss

  • DOMpurify와 유사하게 HTML 포함 텍스트에서 위험 요소를 제거하는 라이브러리
  • DOMpurify 대비 React, Quill 등과 연계한 사용기가 부족하여 후보군에서 제외

Sanitizer API

  • Chrome, Firefox 등 브라우저 차원에서 Sanitizing을 지원하기 위한 API로 개발
  • 2023년 10월 Chrome의 API deprecated 처리를 계기로 사실상 사장된 상태

평가표

기준 DOMpurify sanitize-html js-xss Sanitizer API
오픈소스 기반 무료 여부 O O O - (브라우저 내장)
라이선스 문제 없음 O O O - (브라우저 내장)
활발한 사용자 커뮤니티 유무 O △ X X
꾸준한 유지보수 여부 O O O X
Clone this wiki locally