[이미지 렌더링 최적화] HTTPS 페이지 내 HTTP 로드 이미지 문제 (혼합 콘텐츠(Mixed Content))

이미지 렌더링 최적화 작업이 전에 모두 완료되었다.

헌데! 

 

테스트 과정에서 발생했던 이슈가 있었어서 아래에 정리해둔다. 

 

[문제 상황]

1. 페이지에서 특정 이미지를 호출 하는 과정이 있었음

2. 이미지가 페이지에 렌더링되지 않음

3. 이미지 경로에 파일이 없어서 그런 것인 줄 알고, 이미지 URL을 직접 호출했으나 이미지가 정상적으로 존재하고 있었음

 

[이슈 해결]

1. HTTPS(암호화된 사이트)에서 HTTP(암호화되지 않은 텍스트) 리소스를 호출할 경우 Mixed Content 오류가 발생함

=> HTTP에서 HTTPS 리소스 호출 가능하나, HTTPS에서 HTTP 리소스 호출 불가능함.

 

mixed content란?
"혼합 콘텐츠 오류"는 웹 페이지에서 보안 연결(HTTPS)을 통해 제공되는 페이지에 비해 보안되지 않은 연결(HTTP)을

통해 로드되는 콘텐츠가 있는 경우 발생한다.

일반적으로 HTTPS로 보호된 페이지에 HTTP로 로드되는 이미지, 스크립트 또는 스타일 시트와 같은

외부 리소스가 있는 경우에 발생한다.

 

 

- 이슈 당시 console 탭 내용

 

- 이슈 당시 network 탭 내용