http -> https 리다이렉트 해결 (node js, helmet 모듈)

CSS, JS, 이미지 리소스 로드에 실패하여 화면이 깨지는 현상

node.js 웹서버를 배포, 기동 후 접속했는데,  위와 같은 현상이 발생할 때가 있다.

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

 

html코드를 검사해봤다.

 모든 링크 파일이 https://로 연결되있었다. http://로 바꾸고 접속하니 이미지파일과 main.js파일이 잘 불러와졌다.

 

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

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

 

(ec2에서 모든 링크를 https로 변경해서 오류가 났다고 판단했다. ec2는 그런 권한이 없다.)

 

 

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를 탑재하는게 좋긴 하다.

 

helmet모듈을 삭제하고 3001번 포트로 접속하면 바로 소스파일이 로딩이 되고, 2-3분 후에 80번포트 또한 소스파일이 업로드 되어있는 것을 확인할 수 있다.