Mixed Content 에러 — 혼합 콘텐츠·HTTPS 속 HTTP 차단 원인·해결

Mixed Content 에러 — 혼합 콘텐츠·HTTPS 속 HTTP 차단 원인·해결

사이트를 https로 잘 만들었는데, 주소창 자물쇠가 깨지거나 이미지·스크립트가 안 나온다. 콘솔을 열면 "Mixed Content"라는 빨간 경고가 잔뜩 떠 있다. 혼합 콘텐츠는 https로 불러온 페이지가 그 안에서 http(암호화 안 된) 자원을 함께 불러올 때 생긴다. 페이지는 안전한 길로 왔는데, 그 안의 이미지·스크립트 일부가 안전하지 않은 길로 오는 셈이다. 브라우저는 이걸 보안 위험으로 보고, 위험한 종류는 아예 차단한다. 이 글은 혼합 콘텐츠가 무엇인지, 능동·수동 혼합의 차이, 그리고 어떻게 해결·예방하는지를 정리한다.

Mixed Content 에러

 

이 글의 구성

 

🔎Mixed Content란 무엇인가

⚖️능동 vs 수동 혼합 콘텐츠

🧩자주 나오는 발생 원인 4가지

💻콘솔 메시지와 찾는 법

🛠해결 방법과 예방

💬자주 묻는 질문 5가지

---

🔎 Mixed Content란 무엇인가

혼합 콘텐츠(Mixed Content)는 HTTP 상태 코드가 아니라 브라우저가 띄우는 보안 경고다. https로 안전하게 불러온 페이지가, 그 안의 일부 자원(이미지·스크립트·스타일·동영상·iframe 등)을 http로 불러오려 할 때 발생한다. 페이지의 겉은 암호화됐는데 속 일부는 암호화되지 않은 상태라 "혼합(mixed)"이라 부른다.

 

문제는 보안이다. http로 오는 자원은 중간에서 누군가 가로채거나 바꿔치기할 수 있다. 특히 스크립트 같은 능동 자원이 그렇게 되면 페이지 전체가 조작될 수 있다. 그래서 브라우저는 안전한 페이지 안에 안전하지 않은 자원이 섞이는 걸 막는다. 주소창 자물쇠가 깨지거나 "안전하지 않음" 표시가 뜨는 이유가 이것이다.

핵심 — 페이지는 https인데 자원이 http

혼합 콘텐츠는 "사이트 인증서가 잘못된" 문제가 아니다. 사이트 자체의 https는 멀쩡한데, 페이지가 불러오는 자원 일부가 http라서 생긴다. 그래서 해결도 인증서가 아니라, 그 http 자원들을 https로 바꾸는 데 있다. 자물쇠가 깨졌다면 "어떤 자원이 http로 오는지" 찾는 게 첫걸음이다.

---

⚖️ 능동 vs 수동 혼합 콘텐츠

브라우저는 혼합 콘텐츠를 두 종류로 나눠 다르게 다룬다. 자원이 페이지에 얼마나 위험하게 관여하는지에 따라 차단 강도가 다르다.

구분	능동(active)	수동(passive)
대표 자원	스크립트·스타일·iframe·fetch	이미지·오디오·비디오
위험도	높음(페이지 전체 조작 가능)	상대적으로 낮음
브라우저 처리	기본 차단	https로 자동 업그레이드, 실패 시 차단

능동 혼합 콘텐츠는 스크립트·스타일시트·iframe·fetch처럼 페이지의 동작에 깊이 관여하는 자원이다. 이게 변조되면 페이지 전체가 위험해지므로, 최신 브라우저는 기본적으로 차단한다. 수동 혼합 콘텐츠는 이미지·오디오·비디오처럼 표시만 하는 자원이다. 예전엔 경고만 띄우고 보여줬지만, 요즘 브라우저는 이마저도 https로 자동 업그레이드해 시도하고, 업그레이드가 안 되면 차단한다. 방향은 분명하다. 혼합 콘텐츠는 점점 더 강하게 막히고 있다.

---

🧩 자주 나오는 발생 원인 4가지

원인 1 — http://로 하드코딩된 자원 주소

가장 흔하다. 이미지·스크립트 태그에 src="http://..."로 절대 주소를 박아 둔 경우다. 페이지를 https로 옮겨도 그 자원만 http로 남아 혼합 콘텐츠가 된다.

원인 2 — 외부 CDN·위젯이 http만 지원

불러오는 외부 라이브러리·폰트·광고·위젯이 http 주소로만 제공되는 경우다. 내 사이트는 https인데 가져오는 자원이 http라 막힌다. 오래된 외부 서비스에서 자주 생긴다.

원인 3 — DB·콘텐츠에 저장된 http 링크

게시글·상품 설명 같은 콘텐츠 안에 옛날 http 이미지 주소가 그대로 저장된 경우다. https로 사이트를 전환한 뒤에도 본문 속 http 링크가 남아 혼합 콘텐츠를 만든다.

원인 4 — 사이트 이전·https 전환 후 잔재

http에서 https로 막 전환한 사이트에서 흔하다. 템플릿·설정·환경변수에 남은 http 주소, 절대경로로 박힌 링크들이 혼합 콘텐츠로 드러난다. 전환 직후 일제 점검이 필요하다.

---

💻 콘솔 메시지와 찾는 법

혼합 콘텐츠는 브라우저 콘솔이 정확히 어느 자원이 문제인지 알려준다. 메시지에 막힌 http 주소가 그대로 찍힌다.

# 브라우저 콘솔 — 능동 자원은 차단
Mixed Content: The page at 'https://example.com/' was loaded
over HTTPS, but requested an insecure script
'http://cdn.old.com/lib.js'. This request has been blocked.

# 자물쇠 아이콘 클릭 → "안전하지 않음" 표시도 단서

여러 자원이 섞여 있으면 콘솔을 훑어 http로 시작하는 자원을 모두 모은다. 페이지 소스나 빌드 결과물에서 http://를 검색해 한 번에 찾는 방법도 빠르다.

# 소스·빌드물에서 http:// 자원 일괄 검색
grep -rn 'http://' ./dist ./src

# src·href·url() 안의 http 주소를 찾아 https로 교체

---

🛠 해결 방법과 예방

해결의 핵심은 하나다. 페이지 안의 모든 자원을 https로 불러오게 만드는 것이다. 방법은 상황에 따라 나뉜다.

상황	해결 방법
내 자원 http	src·href를 https로 변경, 가능하면 상대경로(/path) 사용
외부 자원 http만	https 제공 여부 확인, 안 되면 내 서버로 가져와 https 제공
콘텐츠 속 http	DB·본문의 http:// 링크를 https로 일괄 치환
전환 과도기	CSP upgrade-insecure-requests로 http 자원을 https로 자동 승격

전환 과도기에 유용한 게 CSP의 upgrade-insecure-requests 지시문이다. 이 헤더(또는 메타 태그)를 넣으면 브라우저가 http 자원 요청을 자동으로 https로 올려서 시도한다. 다만 이건 응급 처치에 가깝다. 근본은 자원 주소 자체를 https로 바로잡는 것이다.

<!-- 메타 태그로 http 자원 자동 https 승격 -->
<meta http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests">

# 또는 응답 헤더로
Content-Security-Policy: upgrade-insecure-requests

예방의 핵심은 자원 주소를 절대 http로 박지 않는 것이다. 같은 도메인 자원은 상대경로(/images/logo.png)로, 외부 자원은 https를 명시한다. 과거에 쓰던 프로토콜 상대 주소(//example.com)는 지금은 권장되지 않으니 https를 분명히 적는 게 안전하다.

“

혼합 콘텐츠는 인증서 문제가 아니라 자원 주소 문제다. 페이지 안의 http를 모두 https로 바꾸면 자물쇠가 돌아온다.

 

— 콘솔이 막힌 http 주소를 알려준다

---

💬 자주 묻는 질문 5가지

Q1https 사이트인데 왜 자물쇠가 깨지나요?

페이지는 https인데 그 안의 자원 일부가 http로 오기 때문입니다. 사이트 인증서 문제가 아니라 혼합 콘텐츠죠. 콘솔을 열어 "Mixed Content" 경고에 찍힌 http 자원을 찾아 https로 바꾸면 자물쇠가 돌아옵니다.

Q2이미지는 보이는데 스크립트만 안 돼요.

능동·수동 혼합의 차이입니다. 스크립트·스타일·iframe 같은 능동 자원은 위험해서 기본 차단되고, 이미지 같은 수동 자원은 https로 자동 승격을 시도합니다. 그래서 이미지는 보이고 스크립트는 막히는 상황이 생깁니다. 둘 다 https로 바꾸는 게 정답입니다.

Q3외부 자원이 http만 지원하면요?

먼저 그 자원의 https 주소가 있는지 확인하세요. 대부분 https를 함께 제공합니다. 정말 http만 있다면, 그 자원을 내 서버로 가져와 https로 직접 제공하거나, https를 지원하는 대체 서비스로 바꾸는 게 안전합니다. http로 그냥 두면 차단됩니다.

Q4upgrade-insecure-requests만 넣으면 끝인가요?

응급 처치로는 좋지만 근본 해결은 아닙니다. 이 지시문은 http 자원 요청을 https로 자동 승격하는데, 그 자원이 https를 지원하지 않으면 결국 실패합니다. 자원 주소 자체를 https로 바로잡는 게 정석이고, 전환 과도기에 보조로 쓰는 게 맞습니다.

Q5본문에 옛날 http 이미지가 많아요.

DB나 콘텐츠에 저장된 http:// 링크를 https로 일괄 치환하는 게 효율적입니다. 게시글·상품 설명 등에 박힌 옛 주소를 한 번에 바꾸세요. 같은 도메인이면 상대경로로 바꾸면 이후 도메인·프로토콜이 바뀌어도 안전합니다.

---

📌 결론

혼합 콘텐츠는 https 페이지가 http 자원을 함께 불러올 때 생기는 보안 경고다. 사이트 인증서가 잘못된 게 아니라, 페이지 안의 자원 일부가 안전하지 않은 길로 오는 것이다. 그래서 해결은 그 http 자원들을 https로 바꾸는 데 있다.

실무 원칙은 다음과 같다.

 

🔒 모든 자원을 https로 통일한다. 콘솔의 "Mixed Content" 경고로 막힌 http 자원을 찾아 https로 바꾸고, 같은 도메인은 상대경로를 쓴다.

🚫 능동·수동을 안다. 스크립트·iframe 같은 능동 자원은 기본 차단, 이미지 등 수동 자원도 자동 승격 후 실패 시 차단된다. 둘 다 https가 답이다.

⬆️ 과도기엔 upgrade를 보조로 쓴다. CSP upgrade-insecure-requests로 자동 승격하되, 근본은 자원 주소를 https로 바로잡는 것이다.

Mixed Content 해결 체크리스트

 

01콘솔의 "Mixed Content" 경고로 막힌 http 자원 목록 확보.

02소스·빌드물에서 http:// 검색해 일괄 점검.

03내 자원은 https·상대경로로, 외부 자원은 https 제공 확인.

04DB·콘텐츠 속 http:// 링크 일괄 치환.

05전환 과도기엔 CSP upgrade-insecure-requests 보조 적용.

06프로토콜 상대 주소(//) 대신 https 명시.

---

본 글은 브라우저 혼합 콘텐츠 차단의 일반적 원인과 해결 방법을 정리한 자료다. CSP·자원 주소 변경은 영향 범위를 확인한 뒤 신중히 적용한다.

 

#MixedContent #혼합콘텐츠 #HTTPS #HTTP차단 #브라우저보안 #자물쇠깨짐 #CSP #upgradeinsecurerequests #콘텐츠보안정책 #SSL #웹보안 #프론트엔드 #웹개발 #https전환 #웹표준