Node.js-security2

웹개발을 할때 생길 수 있는 보안 이슈중 오염된 정보가 나갈때 생길 수 있는 보안 이슈가 있는데(XSS 공격기법)

예를 들어 내가 만든 애플리케이션에서 create 버튼을 클릭하고 

 

<script>

alert('merong');

</script>

를 입력하면 경고창이 떠버린다..

공격자가 우리의 사이트에 자바스크립트를 심어놓으면...ㄷㄷ

이를 해결하기 위해서 

용자가 입력한 정보중 스크립트 태그를 없애버리는 방법이 있다

=사용자가 입력한 정보를 외부로 출력할때 오염된 정보가 있다면 그 정보를 소독하는것

 

해결과정

npm이라는 내가 아닌 다른사람이 만든 모듈을 사용하자

google 검색: npm sanitize(살균) html

*npm에 등록되어 있는 수많은 모듈 사이트

오른쪽의 평판을 보고 사용해라

 

npm을 사용하는법

터미널에

1. npm init 입력

*우리의 에플리케이션을 npm으로 관리하기 위한 절차시작

 

2. package name 그냥 엔터 눌러라 그러면 기본적으로 디렉토리의 이름이 그 package name이 된다

자신의 에플리케이션을 패키지로써 관리하는 것이다 

버전등은 엔터 갈겨라

yes엔터

 

3. 그러면 package.json이라는 파일이 생기고 우리의 프로젝트에 대한 정보가 생성이 된다

그리고 이상태에서 우리가 사용하고 싶은 패키지는 sanitize-html 이다

 

4.터미널에 npm install -S sanitize-html라고 하면 우리가 진행하는 프로젝트에서만 사용

할 작은 조각 즉 부품으로써 sanitize-html 이 설치된다

 

설치를 하면 sanitize-html 파일이 깔리고 package.json파일에 "dependencise":{"sanitize-html":"^1.27.3"}

가 생기는데 이 뜻은

의존성으로 우리의 애플리케이션이 sanitize-html을쓰고 있다면

우리의 에플리케이션이 이 sanitize-html에의존하고 있다는 것을 알려준다

다른 여러파일은 sanitize-html이 의존하고 있는 다른 파일들이다

이런 복잡성을 npm이 대신해주고 있는 것이다.

 

sanitize-html의 사용법으로 

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

을 입력하면 모듈안에서 그 파일을 찾게 되면서

var clean = sanitizeHTML(dirty); 를 사용하여

dirty했던 html이 클린해진다

 

script태그가 사라진 모습

 

 

활용. h1태그를 살리는 법 allowedTags 이용

 

문제 발생

- 본문인 data부분은 살균이 잘 작동하는데 title부분은 작동하지 않고 title과 관련된 데이터가 모두  undefinded가 나왔다

 

문제 해결

- var title = queryData.id;를

  var sanitiziedData = sanitizeHTML(data, {allowedTags:['h1']}); 위로 올린다

*실수..43번째 줄의 title 도 sanitizedTitle로 바꾼다

 

*입력되는 정보가 살균된다기보다는 마지막으로 표시되는 정보가 살균되는 원리이다

즉 따라서 create나 update등 을 했을때 튕겨져서 최종적으로 표시되는 /?id=~~~ id값이 존재하는 경우의 코드에 살균을 적용시키기만하면된다