Mixed Content 때문에 상품 이미지가 깨지는 이유와 대응 방법

문제

HTTPS 전환 이후 상품 상세에 빈 영역이나 깨진 이미지가 나타나는 경우가 있습니다. 고객 입장에서는 상품 설명이 비어 보이고, 운영자 입장에서는 이미지 파일이 사라진 것처럼 보입니다. 하지만 실제 원인은 브라우저가 HTTP 리소스를 차단하는 Mixed Content인 경우가 많습니다. HTTPS 페이지 안에서 HTTP 이미지를 불러오면 보안 정책상 차단되거나 경고가 발생합니다.

커머스에서는 이 문제가 구조적으로 발생합니다. 오래 운영된 쇼핑몰일수록 셀러가 과거에 등록한 상세 HTML이 많고, 그 안에는 http://로 시작하는 이미지 URL이 남아 있을 가능성이 큽니다. 일부 이미지는 외부 호스트에 있고, 일부 호스트는 HTTPS를 지원하지 않거나 인증서가 올바르지 않습니다. 운영자는 페이지를 HTTPS로 바꿨지만, 페이지 내부의 오래된 리소스까지 모두 바뀐 것은 아닙니다.

이 문제는 단순히 이미지가 깨지는 것에서 끝나지 않습니다. 고객은 상품 정보를 확인하지 못하고, CS는 "이미지가 안 보인다"는 문의를 받으며, 상품 담당자는 어떤 셀러의 어떤 HTML이 문제인지 찾아야 합니다. 대량 상품 상세에서는 원인 파악 자체가 업무가 됩니다.

원인

Mixed Content 대응에서 가장 흔한 첫 시도는 http://를 https://로 일괄 치환하는 것입니다. 일부 경우에는 통하지만, 모든 외부 호스트가 HTTPS를 지원하지는 않습니다. 지원하지 않는 호스트에 대해 일괄 치환하면 기존에는 보이던 이미지가 더 확실하게 깨질 수 있습니다. 인증서가 만료됐거나, 리다이렉트가 잘못됐거나, hotlink 방지 정책이 있는 호스트도 있습니다.

두 번째 시도는 셀러에게 직접 수정 요청을 보내는 것입니다. 하지만 수년간 누적된 상품 상세, 이미 퇴점한 셀러, 외부 이미지 호스트, 복사된 HTML을 모두 사람이 고치는 것은 현실적이지 않습니다. 신규 등록분을 막는 정책은 필요하지만, 기존 데이터 전체를 단기간에 정리하기는 어렵습니다.

중요한 점은 Mixed Content가 페이지 코드만의 문제가 아니라는 것입니다. 브라우저 보안 정책, 외부 호스트의 HTTPS 지원 여부, 이미지 프록시 가능 여부, 캐시, 상품기술서 HTML 구조가 모두 연결됩니다. 그래서 단순 치환보다 "호스트별로 어떤 처리가 안전한가"를 판단하는 방식이 필요합니다.

해결

내부에서 먼저 할 수 있는 일은 문제 리소스를 목록화하는 것입니다. Chrome DevTools Console에서 Mixed Content 경고를 확인하고, Network에서 차단된 요청을 모읍니다. 문제가 특정 호스트에 몰려 있는지, 특정 셀러나 등록 시점에 반복되는지 보면 대응 범위가 좁아집니다. HTTPS를 지원하는 호스트는 안전하게 업그레이드할 수 있고, 지원하지 않는 호스트는 별도 처리 대상이 됩니다.

운영 정책도 필요합니다. 신규 등록 시 HTTP 이미지 URL을 경고하거나 차단하고, 외부 이미지 허용 범위를 정합니다. 다만 기존 콘텐츠는 한번에 치환하지 말고 샘플링을 통해 안전성을 확인해야 합니다. 상품 상세는 매출 페이지이므로, "대부분 될 것"이라는 추정으로 일괄 반영하면 장애가 될 수 있습니다.

M2 Live Cloud의 접근은 응답 시점에 학습하고 처리하는 앞단을 두는 것입니다. 호스트별 HTTPS 지원 여부를 학습해 가능한 경우 자동 업그레이드하고, 미지원 리소스는 정책에 따라 프록시 또는 대체 경로로 전달합니다. 원본 HTML을 직접 수정하지 않고 고객에게 보이는 응답을 보정하기 때문에, 대량 기존 콘텐츠를 안전하게 다루기 쉽습니다.

지금 실행

• 직접 확인: Chrome DevTools Console에서 Mixed Content 경고를 보고, Network 탭에서 blocked 또는 failed 리소스를 CSV처럼 모으세요. URL의 host, path, status, protocol을 나누면 반복 패턴이 보입니다.
• 내부 조치: HTTPS를 지원하는 호스트와 지원하지 않는 호스트를 분리하세요. 신규 상품 등록 화면에서는 HTTP 이미지 입력을 경고하고, 기존 상품은 상위 트래픽 URL부터 샘플링해 위험도를 확인합니다.
• 구조 검토: HTTP 외부 이미지가 수십만 건이고, 호스트별 지원 여부가 제각각이며, 원본 HTML을 직접 고치기 어렵다면 일괄 치환보다 앞단 처리 방식이 안전합니다. 이 경우 Mixed Content 가이드를 기준으로 자동 업그레이드와 프록시 범위를 나누는 것이 좋습니다.