Mixed Content 차단: HTTPS 페이지에서 막힌 리소스 해결

Problem

페이지는 HTTPS로 제공되는데, 콘솔에 Mixed Content 경고가 뜨고 일부 스크립트, 스타일, 이미지가 로드되지 않습니다. 자물쇠 아이콘에 경고가 표시되거나, 인터랙티브 기능이 조용히 멈춥니다.

Symptoms

• 콘솔에 Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure ... 'http://...'. This request has been blocked; the content must be served over HTTPS.가 표시됩니다.
• 스크립트나 스타일시트가 로드되지 않아 레이아웃이 깨지거나 기능이 반응하지 않습니다.
• http://를 참조하는 이미지, 오디오, 비디오가 조용히 실패합니다.
• 로컬 HTTP 빌드에서는 정상이고, HTTPS로 배포한 뒤에만 깨집니다.

Top 3 Causes

1. 하드코딩된 http:// URL - 템플릿, CMS 콘텐츠, 빌드 산출물이 스크립트·스타일·미디어를 http://로 참조합니다.
2. HTTPS를 지원하지 않는 외부/레거시 호스트 - 참조하는 임베드, 위젯, 자산 호스트가 HTTP로만 제공되어 업그레이드된 요청이 도착할 곳이 없습니다.
3. 상단에서 TLS 종료 - CDN이나 프록시(예: Cloudflare Flexible SSL)가 HTTPS를 종료하고 오리진에는 평문 HTTP로 전달해, 서버 코드가 http:// 절대 URL을 생성합니다.

Diagnose with DechoNet

• HTTP Check로 페이지가 실제 HTTPS로 제공되는지 확인하고, redirect 흐름과 업그레이드를 제어하는 Content-Security-Policy 헤더를 점검합니다.
• SSL Check로 서브리소스를 제공하는 호스트가 유효한 인증서를 제시하는지 확인합니다. active 콘텐츠 차단과 이미지 업그레이드 실패는 모두 리소스 호스트의 HTTPS 지원 여부에 달려 있습니다.

Resolution Checklist

• 브라우저 콘솔을 열어 표시되는 모든 http:// URL을 나열합니다 - 브라우저에 기대지 말고 원본을 고칩니다.
• 템플릿, 스타일시트, 애플리케이션 코드의 하드코딩된 http://를 https:// 또는 상대 경로로 바꿉니다.
• URL을 바꾸기 전에 각 외부 호스트가 실제로 HTTPS로 파일을 제공하는지 확인합니다.
• Content-Security-Policy: upgrade-insecure-requests를 추가해 동일 출처와 서브리소스의 http:// 요청을 https://로 재작성합니다. 교차 출처 내비게이션은 업그레이드하지 않으므로 HSTS는 그대로 유지합니다.
• CDN이나 프록시가 TLS를 종료한다면 오리진까지 full/strict HTTPS로 전환해 앱이 http:// URL을 생성하지 않도록 합니다.
• 콘솔이 깨끗해질 때까지 새로고침하며 재확인합니다 - active 콘텐츠(스크립트, iframe, fetch)는 즉시 차단되고, 이미지·미디어는 자동 업그레이드되며 HTTPS가 없으면 실패합니다.

When to Escalate

• 임베드된 위젯이나 자산이 HTTP로만 제공되고 직접 HTTPS로 호스팅할 수 없다면 해당 외부 벤더에 문의합니다.
• TLS 종료 때문에 오리진이 HTTP로 강제되고 산출물의 절대 URL을 바꿀 수 없다면 CDN이나 로드밸런서 담당자에게 에스컬레이션합니다.