Node.js.47.3.App제작-출력정보에 대한 보안

목표

sanitize-html 사용방법

 

---

 

sanitize-html

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

외부 모듈을 불러온다.

var dirty = 'some really tacky HTML';
var clean = sanitizeHtml(dirty);

sanitizeHtml(dirty)를 통해 dirty했던 HTML이 clean해진다.

 

우리의 웹 애플리케이션에서는 description과 title을 sanitize해야 한다.

            var sanitizedTitle = sanitizeHtml(title);
            var sanitizedDescription = sanitizeHtml(description);

수정된 코드

      // 2. id값을 선택한 page
      } else {
        fs.readdir('./data', function(err, filelist){
          var filteredId = path.parse(queryData.id).base;
          fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
            var title = queryData.id;
            var sanitizedTitle = sanitizeHtml(title);
            var sanitizedDescription = sanitizeHtml(description);
            var list = template.list(filelist);
            var html = template.html(title, list,
              `<a href="/create">create</a>
              <a href="/update?id=${sanitizedTitle}">update</a>
              <form action="delete_process" method="post" onsubmit="blarblar">
                <input type="hidden" name="id" value="${sanitizedTitle}">
                <input type="submit" value="delete">
              </form>
              `,
              `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`);
            response.writeHead(200);  //200: 파일을 성공적으로 전송하였음
            response.end(html);
          });
        });
      }

create 결과

dirty한 태그를 입력하고 제출

alert가 뜨지 않음.

page view source - 본문에 <alert>태그가 삭제됨

태그를 아예 없애지만 내용은 살리는 기능이다.

 

만약 태그를 허용하고 싶다면, 아래처럼 작성하면 된다.

두 번째 인자로 허용해줄 태그들의 객체를 준다.

            var sanitizedDescription = sanitizeHtml(description, {
              allowedTags:['h1']
            });

만약 이처럼 <h1>태그를 허용한 후, <h1> This is dirty.</h1> End. 로 글을 update하게 되면

h1태그가 허용됨을 확인할 수 있다.