[node.js] xss 막기 - sanitize html

XSS란?

크로스 사이트 스크립팅(cross-site-scripting)의 약자로, 사용자가 웹페이지에 악성 스크립트를 삽입할 수 있는 취약점이다.

예를 들어 게시판에

어떻게 막을까?

sanitize html 설치하고 적용하기

1. npm 을 이용해 sanitize-html을 설치할 것이다.

npm init

먼저 init으로 npm 패키지 설정을 새로 만들어 준다. (or 업데이트)
중간중간 나오는 질문들은 일단 enter 를 눌러 패스!
다 완료되면 package.json이 생성된다. (or 수정된다)

npm install -P sanitize-html

sanitize-html을 설치한다.

• -P는 패키지를 설치하고 프로젝트의 dependencies 목록에 추가해 준다.

  "dependencies": {
  "pm2": "^5.2.0",
  "sanitize-html": "^2.7.0"
  }

• 개발 단계에서만 필요한 패키지라면 -D 옵션을 넣어 설치한다.
• -g 플래그를 사용하면 프로젝트가 아닌 시스템의 node_modules에 패키지가 설치된다.
  설치가 끝나면 node_modules 폴더가 생성되고, 이 안에 sanitize-html이 들어 있는 것을 볼 수 있다. 그 밖의 수많은 패키지들은 sanitize-html이 의존하고 있는 패키지들이다.

2. js파일에 적용하기
   sanitizeHtml을 적용하고싶은 파일로 가서 import 해준다. 또는 require 문을 사용한다.

// In ES modules
import sanitizeHtml from 'sanitize-html';

// Or in CommonJS
const sanitizeHtml = require('sanitize-html');

이제 sanitizeHtml을 사용하고 싶은 부분에 가서 매개변수로 넘겨준다.
sanitizeHtml은 sanitized 된 새 HTML 을 반환해준다.

const dirty = 'some really tacky HTML';
const clean = sanitizeHtml(dirty);

3. 허용 태그 정하기
   script 처럼 위험한 태그 외의 다른 태그들은 사용을 허락하고 싶다면 다음과 같이 객체를 두 번째 매개변수로 넘겨준다.

// Allow only a super restricted set of tags and attributes
const clean = sanitizeHtml(dirty, {
  allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ],
  allowedAttributes: {
    'a': [ 'href' ]
  },
  allowedIframeHostnames: ['www.youtube.com']
});

기본 옵션들