Failed to load resource: SSL 오류가 발생했기 때문에 서버에 안전하게 연결할 수 없습니다.
🥲 서론
최근 회사에서 로컬에서 환경을 테스팅 하던 중 아래와 같은 문제가 발생하였다.
safari 브라우져에서만 CSS, JS가 적용이 안된 HTML 화면이 출력되고, console에 SSL 관련 error가 출력 되었다.
위 사진은 예시 사진인데, 다들 인터넷 속도 등의 문제로 CSS나 JS가 적용이 안된 빈 HTML 화면을 봤을 것이다.
과연 어떠한 문제 때문에 Chrome등의 여타 브라우져에서는 에러가 일어나지 않고 Safari 브라우져에서만 SSL 에러를 일으키며 빈 HTML이 출력이 되었을까??
😎 본론
지금 당장 문제를 해결 하고자 하는 분들을 위해 해결했던 방법을 위해 바로 이야기 해보겠다.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> 바로 위 속성 때문이다.
upgrade-insecure-requests는 클라이언트가 http 요청에서 https로 리다이렉션을 허용하는지에 대한 여부를 나타낸다.
이는 보안을 위해서 http를 사용하는(즉 안전하지 않은) 요청을 자동으로 https 요청으로 리다이렉트를 시켜준다.
예를 들어 http://localhost:8080 으로 요청을 보냈다고 해보자.
만약 upgrade-insecure-requests 이 활성화 되어 있다면 브라우져가 자동으로 http://localhost:8080 으로 요청을 redirect로 해준다.
이는 보안에 있어서 사용자를 배려하는 좋은 기능이지만, localhost를 https로 자동으로 redirect 해주는데 있어서 분명한 편의성 측면에서 문제를 일으킨다.
그렇다면 Chrome에서는 왜 이러한 문제가 생기지 않았을까?
Chrome은 개발자가 로컬에서 HTTPS 설정 없이 쉽게 개발하고 테스트할 수 있도록 localhost에서 HTTP 요청을 HTTPS로 업그레이드하지 않는다.
