App - 출력정보에 대한 보안 & Node.js - npm 활용

 

 

 

XSS ( X Site Scripting)

웹 사이트 공격 기법.

웹 사이트에 

 

html태그 <script> 를 이용하여 자바스크립트를 조작할 수 있다. ( <script>태그 안쪽에는 자바스크립트가 들어감 )

location.href = '~~~'; 를 사용해서 다른 사이트로 보내버릴 수도 있고,

사용자 로그인 정보 갈취

 

따라서, 사용자가 입력했던 데이터를 그대로 출력하는 것은 위험할 수 있다.

 

 

XSS 방지

사용자로 부터 입력받은 정보를 외부로 출력할때는 그 정보에서 문제가 되는 부분들을 필터링 한다.

1. <script> 태그로 되어 있는 부분을 다 지운다.

2. <script>태그가 태그로 인식되지 않고, 그 모양 그대로 보여줄 수 있게 한다.

html entities >>>  www.w3schools.com/html/html_entities.asp

---

 

** npm 활용 **

XSS 방지를 위한 기능을 직접 구현할 수도 있지만, 

npm을 통해 다른 사람이 만들어 놓은 모듈을 받아서 사용한다.

 

 

1. 검색

사용자가 입력한 정보를 외부로 출력할 때, 오염된 정보가 있다면 그 정보를 소독하는 모듈을 찾는다.

검색어 : npm sanitize html

(sanitize : 소독)

sanitize-html이라는 모듈(라이브러리?)을 활용하기로 한다.  

www.npmjs.com/package/sanitize-html

 

 

2. npm 시작 (npm으로 프로젝트 관리 시작)

프로젝트를 npm으로 관리를 시작한다는 명령어

프로젝트 디렉토리에서 실행 후 package.json 이 생성된다.

>> npm init

 

 

3. npm을 통해 모듈 설치

install옵션 -S는 해당 프로젝트의 부품으로서 npm을 설치하겠다는 의미. (프로젝트 내부에서 사용) (-g 옵션 : 전역 global에서 사용)

>> npm install -S sanitize-html

 

설치하고나면 node_modules 라는 폴더가 생성되고, package.json 에 "dependencies": { "sanitize-html": "^2.3.3" } 가 추가된다.

node_modules안에 있는 sanitize-html 외의 다른 폴더들은 sanitize-html이 의존하고 있는 다른 소프트웨어들이다.

이런 복잡한 의존관계를 npm이 대신 해주고 있는 것.

 

???? VScode에서는 node_modules 폴더가 안보임. 왜 안보이지?!?! 프로젝트 경로로 들어가서 확인해보니 있었음.

 

 

---

 

sanitize-html 모듈이 설치 된 후에는

직접 만들었던 모듈을 사용하는 것과 마찬가지로

1. 모듈을 import하고, 2. 설명을 보고 모듈을 사용하면 된다.

 

 

 

 

 

 

 

 

 

출처

App - 출력정보에 대한 보안

opentutorials.org/course/3332/21151