HTTPS 전환을 마치고 게시판을 열었는데 글 제목과 본문은 그대로이고 개발된 소스도 그대로 입니다. 이미지도 정상인데 HTTP -> HTTPS 전환 후 이미지가 display가 안되는 케이스를 운영 초보때 많이 겪었었습니다. 이런 경우 깨진 사진 한 장을 골라 게시물에 저장된 주소와 브라우저가 실제로 요청한 주소를 나란히 확인해 보십시오. 두 주소가 다르면 어느 쪽을 고쳐야 할지 범위를 좁힐 수 있습니다.
기존 게시물에 남은 HTTP 이미지 주소
게시판 페이지와 본문 이미지는 브라우저가 각각 요청합니다. 게시판을 HTTPS로 전환해도 에디터가 예전 글에 저장한 http:// 이미지 주소는 그대로 남을 수 있습니다. HTTPS 페이지에서 이처럼 보안 연결을 쓰지 않는 리소스를 불러오는 상황을 혼합 콘텐츠라고 합니다. MDN — 혼합 콘텐츠
도메인 이름을 쓴 일반적인 <img src>의 HTTP 요청은 브라우저가 HTTPS로 바꿔 보낼 수 있습니다. 이미지 서버가 HTTPS를 제공하지 않거나 인증서가 유효하지 않으면 그 요청은 실패합니다. 반면 srcset이나 <picture>의 이미지 후보에서 선택된 HTTP 요청과, 일반 HTTP 연결에서 호스트를 IP 주소로 직접 지정한 이미지 요청은 혼합 콘텐츠로 차단될 수 있습니다. 그래서 같은 글에서도 어떤 사진은 그대로 보이고, 다른 사진은 화면 폭이나 기기에 따라 빠질 수 있습니다. W3C — Mixed Content
Console과 Network에서 확인할 세 가지
- Console에서 전환·차단 메시지 확인. Chrome 개발자 도구를 열고 Network의 Disable cache를 켠 뒤 새로고침합니다. 지연 로딩을 쓰는 게시판이라면 깨진 사진 위치까지 스크롤합니다. Console에 혼합 콘텐츠 메시지가 보이면 해당 글과 이미지의 주소를 기록하고, HTTPS로 바뀌었다는 안내인지 차단됐다는 안내인지 구분합니다. MDN — 혼합 콘텐츠
- Elements에서 실제 이미지 후보 확인. 깨진 사진의 요소를 선택해
src,srcset, 상위<picture>의<source srcset>을 확인합니다. 선택한 요소가<img>라면 Console에서$0.currentSrc로 브라우저가 고른 URL을 볼 수 있습니다. 이 값은 선택된 후보를 보여 주므로 전송 결과는 Network에서 따로 확인합니다. MDN — HTMLImageElement.currentSrc - Network에서 실제 요청과 응답 확인. 해당 이미지 항목의 Request URL, Status, Initiator를 확인합니다. 주소가 HTTPS로 바뀌었는데 인증서 오류가 나면 이미지 호스트의 TLS 설정을, HTTPS 응답이 404라면 파일 경로나 배포 상태를 먼저 봅니다. 403이면 이미지 호스트의 접근 권한을 살펴보고, 200인데도 깨지면 로그인 페이지 같은 HTML이 이미지 대신 내려오는지 확인합니다. 전송 전에 차단된 요청은 서버의 HTTP 응답 코드가 없을 수 있습니다. Chrome 개발자 문서 — Network 기능
이미지가 저장된 위치에 따른 수정 범위
같은 사이트에서 계속 제공하는 이미지라면 확인한 HTTPS 주소나 같은 출처로 연결되는 루트 상대 경로(예: /uploads/notice.jpg)로 바꿉니다. 별도 이미지 서버나 CDN이라면 그 호스트의 HTTPS 주소로 파일이 열리는지 먼저 확인합니다. HTTPS를 제공하지 않는 외부 이미지라면 게시 권한을 확인한 뒤 관리할 수 있는 HTTPS 저장소로 옮기고 게시물을 수정합니다.
오래된 글에만 잘못된 주소가 있으면 저장된 본문을, 새로 작성한 글에서도 재현되면 에디터나 첨부파일 URL을 생성하는 설정을 확인합니다. 일괄 수정이 필요하다면 백업 후 문제가 확인된 이미지 호스트와 속성만 대상으로 잡고, 게시물 몇 건에 먼저 적용합니다. src를 고친 글도 srcset에 남은 모바일용 주소 때문에 작은 화면에서 다시 깨질 수 있습니다.
주소가 여러 글에 흩어져 즉시 수정하기 어렵다면 콘텐츠 보안 정책(CSP)의 upgrade-insecure-requests를 임시 수단으로 검토할 수 있습니다. 이 설정으로 주소를 바꿔도 이미지 서버가 HTTPS로 파일을 제공할 수 있어야 합니다. HTTPS 요청이 실패하면 브라우저는 HTTP로 재시도하지 않습니다. MDN — upgrade-insecure-requests
결론
복구를 확인할 때는 처음에 깨졌던 글을 데스크톱과 모바일 폭에서 다시 엽니다. Console에서 해당 이미지의 혼합 콘텐츠 메시지가 사라졌는지, Network에서 선택된 이미지가 HTTPS로 정상 응답하는지, 화면에서 실제 사진이 표시되는지 확인하십시오. 새 글에 사진 한 장을 올려 저장된 주소까지 확인하면 같은 문제가 이후 게시물에도 생기는지 점검할 수 있습니다.