[Nodejs] npm Sanitize-html 사용하기

입력창을 통한 입력을 받을 때,

<script>
	//location.href = 'https://www.naver.com';
</script>

위와 같이 들어와선 안될 입력이 들어오게 된다면 큰 문제가 발생한다.

따라서 이에 대한 보안이 필요하다.

 

첫번째로 할 수 있는 것이

Character entities이다.

아래와 같이 하여서 <script> 모두 화면에 출력되도록 하는 것이다.

<script>
    //location.href = 'https://www.naver.com';
    뭐지 ;; 이 글을 쓰고 난 뒤에 내 티스토리 가면 네이버로 가진다..
    이런 황당한 일이 있을 쑤가...
</script>

 

하지만 수동으로 해야하는 단점이 있다.

자동으로 하기 위해서는 사람들이 만들어놓은 API가 있다.

들어와서는 안되는 입력이 들어오게 된다면 이를 소독한다는 뜻에서

Sanitize-html 이라고 부른다.

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

sanitize-html

 

이를 사용하기 위해서 npm init을 먼저 해준다.

npm init

package.json 파일을 생성하기 위함이다.

package name과 같은 설정들은 그냥 엔터 쳐주다가 yes 엔터 하면 된다.

npm init이 완료되면

npm install -S sanitize-html

위와 같은 명령어를 통해 sanitize-html 을 설치해준다.

-S 는 진행할 프로그램 속 부품으로 설치를 해준다는 뜻이다.

 

설치를 해줬다면 Sanitize를 사용할 js 파일로 가보자.

title에 sanitize를 한다고 가정할 때, 먼저 파일을 불러온다.

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

 

그 후, title을 sanitize를 해준다.

var sanitizedTitle = sanitizeHtml(title);
var html = template.HTML(title, list, `<h2>${sanitizedTitle}</h2>`);

 

사용 결과

title에 이런 잘못된 입력이 들어왔다.

웹 상에서는 아래와 같이 script 태그 부분은 빼고 표시된다.

오른쪽마우스 -> 페이지 소스보기 를 통해 소스를 봐도 script 태그 부분은 볼 수 없다.

강력하게 살균이 되었다 ! ! !

<h1> 태그를 입력하면, 그 속에 있는 내용은 살려주지만 태그는 지워버린다.

옵션을 통해 특정 태그를 허용할 수도 있으니 !!!! 잘 보시길