Helmet.js 를 이용한 서버 보안성 향상

Helmet.js 란?

Express.js 사용시 Http 헤더 설정을 자동으로 바꾸어주어 잘 알려진 몇가지 앱의 취약성으로 부터 앱을 보호 할 수 있는 패키지이다.

 

* Helmet는 다음과 같은 미들웨어로 이루어 져 있다.

csp: Content-Security-Policy 헤더 설정. XSS(Cross-site scripting) 공격 및 기타 교차 사이트 인젝션 예방.
hidePoweredBy: X-Powered-By 헤더 제거.
hpkp: Public Key Pinning 헤더 추가. 위조된 인증서를 이용한 중간자 공격 방지.
hsts: SSL/TLS를 통한 HTTP 연결을 적용하는 Strict-Transport-Security 헤더 설정.
noCache : Cache-Control 및 Pragma 헤더를 설정하여 클라이언트 측에서 캐싱을 사용하지 않도록 함.
frameguard : X-Frame-Options 헤더 설정하여 clickjacking에 대한 보호 제공.
ieNoOpen : (IE8 이상) X-Download-Options 설정.
xssFilter :  X-XSS-Protection 설정. 대부분의 최신 웹 브라우저에서 XSS(Cross-site scripting) 필터를 사용.
noSniff : X-Content-Type-Options 설정하여, 선언된 콘텐츠 유형으로부터 벗어난 응답에 대한 브라우저의 MIME 가로채기를 방지.

설치 방법

# yarn add helmet @types/helmet --save

 

사용법

import helmet from 'helmet';

app.use(helmet());

 

* 주의사항

app.use(helmet()); 만 설정 할 경우 기본적인 보안(X-Powered-By 등)만 설정해 주며

csp, expectCt, hpkp, noCache, referrerPplicy는 적용되지 않는다.

이를 적용하려면 다음과 같이 별도로 설정한다. (각 미들웨어 마다 별도로 설정을 해야한다.)

app.use(helmet.noCache());
app.use(helmet.hpkp());

 

* 부가사항

csp는 url에서 가져온 이미지, 동영상, js, css파일 등을 막는 역할을 한다. 설정 할때  관련 url을 모두 추가 해 줘야한다.

트위터 같은 경우 csp를 다음과 같이 설정 하고 있다.

 

참고

Express에서 보안성을 높이는 방법

https://wlsdml1103.blog.me/221460233318