웹개발을 할때 생길 수 있는 보안 이슈중 오염된 정보가 나갈때 생길 수 있는 보안 이슈가 있는데(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이 클린해진다
문제 발생
- 본문인 data부분은 살균이 잘 작동하는데 title부분은 작동하지 않고 title과 관련된 데이터가 모두 undefinded가 나왔다
문제 해결
- var title = queryData.id;를
var sanitiziedData = sanitizeHTML(data, {allowedTags:['h1']}); 위로 올린다
*실수..43번째 줄의 title 도 sanitizedTitle로 바꾼다
*입력되는 정보가 살균된다기보다는 마지막으로 표시되는 정보가 살균되는 원리이다
즉 따라서 create나 update등 을 했을때 튕겨져서 최종적으로 표시되는 /?id=~~~ id값이 존재하는 경우의 코드에 살균을 적용시키기만하면된다
'WebApp > Node.js' 카테고리의 다른 글
Node.js-security (0) | 2020.08.14 |
---|---|
Node.js-Module활용 (0) | 2020.08.14 |
Node.js- Module (0) | 2020.08.13 |
Node.js- delete 기능 구현 (0) | 2020.08.11 |
Node.js-updata화면 만들기 (0) | 2020.08.10 |