이 글의 목적은 HTTPS 페이지에서 발생하는 Mixed Content 차단 문제를 근본적으로 제거하기 위해 원인 진단, 서버·애플리케이션 설정, 자동 변환, 검증까지 전 과정을 실무 중심으로 정리하여 즉시 적용할 수 있게 돕는 것이다.
1. Mixed Content의 개념과 위험성
Mixed Content는 기본 문서가 HTTPS로 제공되지만 내부에서 불러오는 스크립트, 이미지, 스타일, 폰트, 영상, iframe 등 하위 리소스 중 일부가 http로 로드될 때 발생하는 상태를 의미한다. 활성 콘텐츠(스크립트, iframe, 스타일 등)는 브라우저가 기본 차단하거나 경고하며 보안 위협으로 간주한다. 수동 콘텐츠(이미지, 동영상 등)는 일부 브라우저에서 경고 후 표시되기도 하나 최신 브라우저는 점진적으로 차단을 강화하고 있다. 공격자는 http 구간을 손상시켜 스니핑, 콘텐츠 변조, XSS 유도, 세션 하이재킹 등으로 이어질 수 있다. 따라서 모든 리소스를 https로 통일하는 것이 원칙이다.
2. 브라우저 동작 요약
브라우저는 활성 콘텐츠의 http 로드를 기본 차단한다. 콘솔에는 Mixed Content 경고 또는 오류가 기록된다. 예전에는 사용자가 주소창의 자물쇠를 조작해 임시 허용하는 동작이 있었으나 최신 버전에서는 보안 저하 기능이 빠르게 축소되고 있다. 개발 단계에서는 DevTools를 통해 차단 목록과 요청 URL을 확인할 수 있다.
3. 증상 식별 방법
- 페이지 일부 기능이 동작하지 않거나 버튼 클릭 시 무반응인 현상이 나타난다.
- 콘솔에
Mixed Content메시지가 출력된다. - 네트워크 패널에서 특정 요청이
blocked:mixed-content상태로 표시된다. - 주소창의 보안 표시에서 경고가 나타난다.
4. 원인 진단 체크리스트
혼합 콘텐츠의 주된 원인은 하드코딩된 절대경로, 템플릿 내 프로토콜 지정, CMS 설정 미흡, 외부 위젯의 http 전용 링크, 이미지 경로의 구버전 캐시, CDN 설정 누락 등이다. 아래 체크리스트로 빠르게 확인한다.
| 점검 항목 | 확인 방법 | 우선순위 |
|---|---|---|
| 템플릿·JS·CSS 내 절대 URL | IDE 전역 검색으로 http:// 패턴 탐색 | 상 |
| 이미지·동영상 소스 | DevTools Network에서 http 요청 필터 | 상 |
| 외부 스크립트·폰트·아이콘 | CDN 문서 확인 및 https 지원 여부 점검 | 상 |
| CMS 기본 URL | 사이트 주소, 미디어 주소가 https인지 확인 | 중 |
| 리버스 프록시·로드밸런서 | X-Forwarded-Proto 처리 확인 | 중 |
| 레거시 리디렉션 규칙 | 서버 설정에서 http 고정 규칙 탐색 | 중 |
| 캐시·서비스워커 | 오래된 http 리소스 캐시 무효화 | 하 |
5. 해결 전략 개요
- 모든 리소스 URL을 https 스킴으로 통일한다.
- 서버에서 http 요청을 301으로 https로 영구 리디렉션한다.
- 애플리케이션·CMS의 기본 주소를 https로 고정한다.
- 프록시 환경에서는 원 요청 스킴을 올바르게 전달·추론한다.
- CSP
upgrade-insecure-requests로 일괄 변환을 보조한다. - HSTS를 설정해 http 진입 자체를 차단한다.
- CI·감시로 재발을 방지한다.
6. URL 통일: 코드와 템플릿 수정
- 절대권장: 모든 리소스에
https://스킴을 명시한다. - 비권장:
//example.com과 같은 프로토콜 상대 URL은 이식성은 있으나 가독성과 의도가 떨어져 장기적으로 권장하지 않는다. - 상대경로는 동일 도메인 내에서는 허용되나 CDN·다중 도메인 구조에서는 명시적 https가 안전하다.