[NodeJS] 출력에 대한 보안

게시물 내용에 아래와 같이 입력해본다.

<script>
alert('메롱');
</script>

추가된 글을 클릭할 때마다 '메롱'이 출력된다

이런 방식이 XSS 공격의 하나라고 한다. 이러한 공격방식을 방지해 보도록 한다.

 

1. sanitize html

script를 비활성화 하는 것을 영어로 sanitize(소독하다)라고 한다. 이를 검색해본다(npm sanitize html)

www.npmjs.com/package/sanitize-html

npm의 수많은 모듈들이 서비스되고 있는 사이트라고 한다.

 

• npm init

애플리케이션을 npm으로 관리기위한 절차가 시작된다.

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nodejs_opentutorial)

그러면 아래 그림과 같이 package.json 파일이 생성된다.

 

• npm install -S sanitize-html

-g 옵션은 컴퓨터 전체에서 독릭접으로 사용할 수 있도록 설치하는 옵션이다. -S 옵션은 현재 진행하는 프로젝트에서만 사용하도록 설치하는 옵션이다.

  "dependencies": {
    "sanitize-html": "^1.27.4"
  }
}

설치하면 위와같이 dependencies에 sanitize-html이 생기게 된다. 

node moudules에도 sznitize-html이 생성된 것을 확인할 수 있다. 설치한건 sanitize-html뿐이지만, sanitize-html이 의존하고 있는 다른 module들도 설치가 된다. 이러한 복잡한 과정을 npm이 대신 해준다고 생각하면 된다.

 

sanitize-html 사용하기

var sanitizeHtml = require('sanitize-html')

모듈을 사용한다고 선언한다.

      var filteredId = path.parse(queryData.id).base;
      fs.readFile('data/' + filteredId, 'utf8', function (err, description) {
        var title = queryData.id;
        var sanitizedTitle = sanitizeHtml(title);
        var sanitizedDescription = sanitizeHtml(description);

글을 확인하는 곳에 title과 description을 위와같이 sznitizeHtml을 이용해 각각 다른 var 에 저장한다. 그리고 아래의 ${title}과 ${description}에 대신 넣는다.

저장 후, 아까와 같이 메롱 게시물을 작성해본다.

 

<script> alert('merong'); </script> END... 이라고 작성했는데 위와같이 표시된다.

 

생성된 파일에는 분명 입력한 내용이 그대로 있음에도 브라우저에서 표시가 되지 않는다. 스크립트 태그가 있으면 사라지게 된다.

 

<script> 태그는 아예 내용도 표시되지 않지만, h1 태그는 내용은 보여주고, 태그만 사라지는 것을 확인할 수 있다.

 

var sanitizedDescription = sanitizeHtml(description, {
	allowedTags:['h1']
});

위처럼 허용하는 태그를 설정하여 <h1> 태그가 동작하도록 설정할 수도 있다.