리소스를 HTTPS 프로토콜 호출로 인한 ERR_SSL_PROTOCOL_ERROR 발생, Mixed Content

1. 문제 사항

테스트 서버에 애플리케이션을 실행 환경을 구축하기 위해 도커로 nginx와 tomcat을 띄웠다.

테스트 서버는 사내IP에서만 접근이 가능하여 SSL인증이 따로 필요하지 않았다.

 

프론트에서 css, image 등 외부나 내부 API 호출할 때, 프로토콜이 HTTPS로 호출되어

ERR_SSL_PROTOCOL_ERROR가 발생하며 리소스들이 가져오지 않는 현상이 발생했다.

 

2. 원인

웹 & 모바일 환경을 고려한 소스 코드 작성으로 모바일 테스트 서버에서는 HTTPS를 적용한 상태로

Mixed content, 혼합콘텐츠로 인해 HTTPS로 요청을 보내기 위해 프론트 코드에 추가한 META태그가 원인이였다. 

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

 

3. 해결

해당 지식이 없어서 삽질을 많이했다.

Nginx에서 리버스 프록시 설정에서 proxy_set_header X-Forwarded-Proto http; 로 설정을 변경해보기도 했다. 

spring boot application.yml 파일에서 server.ssl.enabled: false로 설정을 변경해보기도 했다.

여전히 리소스를 호출할 때는 HTTPS로 호출이되었고

해당 META태그를 분기처리하여 테스트 서버 환경에서는 적용이 안되도록 소스코드를 수정하였다.

 

이번 오류를 해결하면 느낀건 Nginx, spring boot 설정에 대한 개념과 지식을 확실하게 잡아가야겠다고 생각했으며 

전반적인 웹 지식을 더욱 학습해야겠다.