[Node.js][보안] sanitize-html 사용

sanitize-html은 악성 스크립트를 삽입해 웹 서비스 보안 문제를 야기하는 XSS(Cross Site Script)를 방지하기 위한 node의 패키지 모듈이다. 해당 모듈을 사용하면 <script> 악성 코드 </script>와 같은 스크립트 태그를 통한 악성 코드 실행을 방지한다.

 

설치

npm install -S sanitize-html
npm install -g sanitize-html

-S : 해당 프로젝트에만 적용

-g : 전체(global) 적용

 

사용

var 변수명 = require('sanitize-html');

require()를 통해 외부 모듈을 가져온다.(자신이 작업하는 디렉터리에서 node_modules 디렉터리 내부를 찾아보면 sanitize-html 모듈을 찾을 수 있다.(정상적으로 설치되었을 시))

 

var sanitizeHTML = require('sanitize-html');

var dirty = 'This is a dirty script 
            <script> location.href="https://www.naver.com" </script>';

var clean = sanitizeHTML(dirty);

console.log(clean);
// This is a dirty script

누군가 악의적으로 해당 게시글 클릭 시 네이버 웹사이트로 이동되는 스크립트를 삽입했다고 가정하자.

타 웹사이트로 이동되는 것을 방지하기 위해 sanitize-html 모듈을 호출하고, 문제가 될 수 있는 본문(dirty)에 sanitize-html 모듈 기능을 적용한다.

이렇게 하면 <script> ~ </script> 태그는 제거된 채 출력된다.

 

현재 버전(2.4.0) 기준 허용되는 태그와 허용되지 않는 태그 및 기타 default 설정은 다음과 같다.

allowedTags: [
  "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
  "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
  "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
  "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
  "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
  "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
  "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr"
],
disallowedTagsMode: 'discard',
allowedAttributes: {
  a: [ 'href', 'name', 'target' ],
  // We don't currently allow img itself by default, but this
  // would make sense if we did. You could add srcset here,
  // and if you do the URL is checked for safety
  img: [ 'src' ]
},
// Lots of these won't come up by default because we don't allow them
selfClosing: [ 'img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta' ],
// URL schemes we permit
allowedSchemes: [ 'http', 'https', 'ftp', 'mailto', 'tel' ],
allowedSchemesByTag: {},
allowedSchemesAppliedToAttributes: [ 'href', 'src', 'cite' ],
allowProtocolRelative: true,
enforceHtmlBoundary: false

 

반드시 위 default 설정을 따라야 할 필요는 없다.(강제성 X)

본인이 구현하는 웹 서비스에 맞게 허용/허용하지 않는 태그 및 속성들을 설정할 수 있다.

 

특정 태그/속성/스키마 허용하기

var sanitizeHTML = require('sanitize-html');

var dirty = '<script> ~ </script>';

var clean sanitizeHTML(dirty, {
    allowedTags: [ ~ ],
    allowedAttributes: [ ~ ],
    allowedSchemes:[ ~ ]
});

 

모든 태그 허용하기

var sanitizeHTML = require('sanitize-html');

var dirty = '<script> ~ </script>';

var clean sanitizeHTML(dirty, {

    allowedTags: false,
    allowedAttributes: false
});

 

모든 태그 허용하지 않기

var sanitizeHTML = require('sanitize-html');

var dirty = '<script> ~ </script>';

var clean sanitizeHTML(dirty, {

    allowedTags: [],
    allowedAttritbutes: []

});

---

참고

https://www.npmjs.com/package/sanitize-html

sanitize-html