[Node.js]출력정보에 대한 보안(sanitize-html)

오염된 정보가 나갈때에 대한 보안

<script> 라는 html 태그는 그 안에 자바스크립트 코드가 오도록 약속되어 있음

노드가 아니고 웹브라우저에서 

웹브라우저가 script 태그를 만나면 자바스크립트 코드로 간주해서 자바스크립트문법에 따라 실행시킴

따라서 create 창에서 위와같이 입력할 시에

위의 XSS 를 누를때마다 메롱 하는 alert 창이 뜨게됨

 

이보다 심각한거는 예를들어

description내용에 

location href=사이트 주소 

입력시 웹브라우저 자바스크립트는 저 주소로 사용자를 보내버림

xss 누르면 이제 저 주소로 이동하게 됨

그밖에도 로그인 정보를 갈취 하는 등  문제 일어 날 수 있음

사용자로부터 받은 정보 바깥으로 출력할때는 필터링 필요

 

방법

1. 스크립트 태그를지워버리기

2. 웹브라우저가 스크립트 태그 인식하지 않고 그냥 그 자체로 출력하게 하기

< 는 &lt; 

> 는 &gt; 쓰면 웹브라우저는 < ,> 문자 자체로 표시해줌

 

예를들어 아래와 같이 본문이 들어오면

웹화면에 위와 같이 출력됨

 

사용자에게 받은 data에서 <script>같은거 역할을 비활성화 시키는 작업 

살균, 소독 =sanitize 라함

npm 이용해 패키지 가져오기 

sanitize-html 라는 모듈 가져와 우리 앱의 부품으로 사용하기

1. npm init 명령어 실행시키기 

우리 애플리케이션을 npm으로 관리하기 위한 절차 시작됨

거기서 패키지네임은 그냥 엔터 치면 됨

그럼 기본적으로 디렉토리 이름이 패키지네임이 됨

자신의 앱을 패키지로서 관리하는것

버전 기타 등등은 걍 기본값으로 지정

 

 

그럼 패키지.json파일이 생기고 우리 프로젝트 정보가 생성이 됨

 

이전에 pm2 할때 -g를 했는데 글로벌의 약자임

pm2를 이 컴퓨터 전역에서 어디서나 쓸수있는 독립된 프로그램으로 깐 것

-S를 하면 우리가 진행하는 프로젝트에서 사용할 작은 조각의 프로그램으로서 깔게됨

위와 같이 입력시 이제 sanitize기능을 다운 받게됨

그러면 아래와 같이 node_modules 라는 파일 생김

 

그안에 많은 디렉토리 생기는데 그중에 sanitize 안에 있는 파일들을 쓸 것

json파일에 쓰여있는 dependencies 는 어떠한 외부 소프트웨어들에 의존하는지 적어줌

즉, 앱이 그 소프트웨어 사용하고 있다.

 

우리가 원래 필요한건 sanitize였는데 그 외 많은 파일 다운로드 된 이유는 

sani 가 다른 소프트웨어에 의존하고 있기 때문

이런 복잡한 의존관계를 npm이 알아서 해주는 것임

 

sanitize-html 사용하기

 

위와 같이 가져오고

사용자에게 입력들어오는 title, description 부분 sanitize된 변수로 대체 시켜줌

 

그러면 아래와 같이, 내용입력시 페이지에 스크립트 태그가 없어져 나옴

 

이렇게 sanitize-html 는 script 와 같이 예민한 태그가 있으면 걍 없애버림

위와 같이 페이지 소스보기 해도 다 사라졌음

 

그런데 아래와 같이 <h1> 태그를 본문에 입력하면?

descript에 <h1> 태그 입력시 스크립트 태그와 다르게 안의 텍스트 내용이 보이게 되고 

<script> 태그와 다르게 페이지 뷰 소스 하면 위와 같이 내용이 살아 있음도 확인

 

그런데 만약에 <h1> 과 같은 태그를 허용하고 싶다면? 아래와 같은 양식을 사용 

위와 같이 h1태그를 허용하게 끔 설정

그러면 위와 같이 h1 태그 입력시 반영되여서 오른쪽과 같이 글자 크게 출력됨을 확인