node.js 서버배포 후, https 리소스 요청으로 화면 깨지는 문제 해결 방법(helmet 모듈)

# 문제 현상

node.js 웹서버를 배포, 기동 후 접속했는데,

CSS, JS, 이미지 리소스 로드에 실패하여 화면이 깨지는 현상이 발생할 때가 있다.

(자바스크립트를 로드하지 못해서 웹페이지 자체가 작동을 안 하기도 한다)

 

브라우저 개발자도구의 network탭을 보면,

CSS, JS, 이미지 등을 모두 HTTPS로 요청하면서 리소스를 불러오지 못해 에러가 발생하는 케이스일 가능성이 있다.

 

 

이 경우, node.js의 미들웨어에 helmet 모듈을 장착한건 아닌지 확인해보자.

app.use(helmet());

 

helmet 모듈은 웹 취약성으로 부터 웹서버를 보호하는 역할을 하는데, 내부적으로 다음의 코드를 실행한다.

app.use(helmet.contentSecurityPolicy());
app.use(helmet.dnsPrefetchControl());
app.use(helmet.expectCt());
app.use(helmet.frameguard());
app.use(helmet.hidePoweredBy());
app.use(helmet.hsts());
app.use(helmet.ieNoOpen());
app.use(helmet.noSniff());
app.use(helmet.permittedCrossDomainPolicies());
app.use(helmet.referrerPolicy());
app.use(helmet.xssFilter());

 

이 중에 내부적으로 호출되는 hsts 라는 모듈을 통해 HTTPS(SSL/TLS) 연결을 적용하도록 헤더를 세팅한다.

 

그래서 내 웹서버는 http로 통신을 함에도 불구하고,

CSS, JS, 이미지를 요청할 때 https 통신을 시도함으로써, 리로스 로드에 실패하고, 화면이 깨지고,

결국 멘붕에 빠지는 것이다.

 

#해결방법

해결법은 helmet미들웨어 탑재 코드를 삭제하거나, helmet 미들웨어의 속성  설정 등을 변경하는 것이다.

근데 사실 보안성을 고려하면 https를 탑재하는게 좋긴 하다.

 

더 이상의 자세한 설명은 레퍼런스 문서에게 맡긴다.

www.npmjs.com/package/helmet

 

도움이 되시길.

 

 

(참고) https, ssl 에 대한 글

HTTPS, SSL 인증서: 아주 쉽고 간단하면서도, 매우 상세한 정리.