sanitize-html, csurf

sanitize-html, csurf 패키지는 각각 XXS, CSRF 공격을 막기 위한 패키지입니다.

$ npm i sanitize-html
$ npm i csurf

 

XSS는 악의적인 사용자가 사이트에 스크립트를 삽입하는 공격입니다. 악성 사용자가 게시글이나 댓글 등을 업로드할 때 자바스크립가 포함된 태그를 올리면, 나중에 다른 사용자가 그 게시글이나 댓글을 볼 때 그 스크립트가 실행되어서 예기치 못한 동작을 하게 됩니다.

따라서 서버에서는 사용자가 게시글을 업로드할 때 스크립트가 포함되어 있는지 검사해서, 존재하면 제거해야 합니다. 다만, 공경성 스크립트 유형이 많으므로 라이브러리의 도움을 받는 것이 좋습니다.

사용법은 간단합니다.

 

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

const html = "<script>location.html.href = 'https://gilbut.co.kr'</script>";
console.log(sanitizeHtml(html)); // ''

 

사용자가 업로드한 HTML을 sanitize-html 함수로 감싸면 허용하지 않는 태그나 스크립트는 제거됩니다. 두 번째 인수로 허용할 부분에 대한 옵션을 넣을 수 있는데, 옵션 목록은 공식 문서를 참고하면 됩니다.
CSRF는 사용자가 의도치 않게 공격자가 의도한 행동을 하게 만드는 공격입니다. 예를 들어 특정 페이지에 방문할 때 저절로 로그아웃되거나, 게시글이 써지는 현상을 유도할 수 있습니다. 심지어 은행과 같은 사이트에서는 다른 사람에게 송금하는 행동을 넣는 등 상황에 따라 크게 악용될 수 있는 공격입니다.
이 공격을 막으려면 내가 한 행동이 내가 한 것이 맞다는 점을 인증해야 합니다. 이때 CSRF 토큰 이 사용되고, csurf 패키지는 이 토큰을 쉽게 발급하거나 검증할 수 있도록 돕습니다.
아래 코드는 공식 문서에서 발췌한 예제입니다. GET form 라우터는 form을 렌더링하는 라우터이 고, POST 1form 라우터는 form에서 보낸 데이터를 처리하는 라우터입니다.

const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });

app.get('/form', csrfProtection, (req, res) => {
	res.render('csrf', { csrfToken: req.csrfToken() });
});

app.post('/form', csrfProtection, (req, res) => {
	res.render('ok');
});

 

익스프레스의 미들웨어 형식으로 동작하며 form 값은 것을 렌더링할 때 CSRF 토큰을 같이 제공합니다. 현재 cookie를 사용하는 것으로 옵션을 설정했으므로 cookie-parser 패키지도 연결되어 있어야 합니다.

토큰을 req.csrfToken()으로 가져올 수 있습니다. 프런트엔드에 렌더링된 CSRF 토큰을 나중에 form을 제출할 때 데이터와 함께 제출하면 됩니다. 상황에 따라 CSRF 토큰을 적용하는 방법이 다른데, 이는 공식 문서를 참고하면 됩니다.