혼합 콘텐츠, HTTPS 페이지 속 http 자원 찾고 고치는 5단계

혼합 콘텐츠는 HTTPS 페이지가 http 주소의 이미지·스크립트를 불러오는 상태로, 주소를 https로 바꾸면 해결됩니다. 이 글에서는 혼합 콘텐츠가 생기는 이유, 브라우저가 종류별로 어떻게 처리하는지, 개발자 도구로 찾아 고치는 5단계를 정리했습니다.

혼합 콘텐츠란 무엇인가

혼합 콘텐츠(mixed content)는 HTTPS로 안전하게 연 페이지 안에서 일부 자원을 암호화되지 않은 http 주소로 불러오는 상태를 말합니다. 페이지 자체는 암호화됐지만 http로 오는 이미지나 스크립트는 중간에서 엿보거나 바꿔치기할 수 있어, 페이지 전체의 안전이 깨집니다.

가장 흔한 원인은 http로 운영하던 사이트를 HTTPS로 옮긴 뒤 예전 주소가 그대로 남은 경우입니다. 게시글 본문에 붙여 넣은 이미지 주소, 테마 파일에 직접 적은 스크립트 주소, 오래된 외부 위젯 코드가 대표적입니다. 혼합 콘텐츠가 있으면 주소창에 경고가 보이거나 일부 기능이 멈출 수 있으며, 주소창 경고의 다른 원인은 주의 요함 경고 글에서 정리합니다.

브라우저는 혼합 콘텐츠를 어떻게 처리하나

MDN의 혼합 콘텐츠 문서에 따르면 지금 브라우저는 혼합 콘텐츠를 두 종류로 나눠 처리합니다. 아래 표는 그 차이를 비교한 것입니다.

종류	예	브라우저 처리
업그레이드 대상	src로 넣은 img, audio, video	http를 https로 바꿔 요청합니다. https로 제공되지 않으면 보이지 않습니다.
차단 대상	script, 스타일시트 link, iframe, fetch 요청, 웹 폰트, srcset 이미지	불러오지 않고 막습니다.
IP 주소 자원	도메인 대신 숫자 IP 주소로 적은 자원	업그레이드하지 않고 차단합니다.

그림과 표에서 보듯 브라우저가 알아서 고쳐 주는 것은 일부 이미지와 미디어뿐입니다. 스크립트와 스타일시트는 막히기 때문에 메뉴가 열리지 않거나 디자인이 깨지는 식으로 드러납니다. 브라우저가 대신 고쳐 준다고 기대하지 말고 주소를 직접 바꾸는 것이 해결책입니다.

혼합 콘텐츠를 찾고 고치는 5단계

아래 순서는 크롬이나 엣지 같은 브라우저로 내 사이트를 점검하고 고치는 방법입니다.

1. 경고 찾기: 페이지에서 개발자 도구(F12)를 열고 콘솔 탭에서 Mixed Content 경고를 찾습니다. 크롬은 보안 패널의 비보안 출처 항목에서 http로 불러온 요청만 모아 볼 수 있습니다.
2. 자원 위치 파악: 경고에 나온 주소가 게시글 본문, 테마나 레이아웃 파일, 사이트 설정(로고·배너 주소), 외부 위젯 코드 가운데 어디에 적혀 있는지 찾습니다.
3. https 주소로 바꾸기: 우리 사이트의 자원은 https 주소나 슬래시로 시작하는 상대 경로로 바꿉니다. 게시글이 많다면 데이터베이스에서 일괄 변경하되, 먼저 백업을 받습니다.
4. 외부 자원 정리: 외부 서비스의 주소는 https 버전이 있는지 확인해 바꾸고, https를 지원하지 않는 서비스는 다른 서비스로 바꾸거나 제거합니다.
5. 다시 확인: 첫 화면만이 아니라 게시판, 문의, 오래된 게시글 페이지까지 돌며 경고가 남았는지 확인합니다.

그림의 3단계에서 데이터베이스를 일괄 변경할 때는 바꿀 범위를 좁게 정해야 합니다. 우리 도메인의 http 주소만 https로 바꾸고, 다른 사이트 주소는 하나씩 확인한 뒤 바꿉니다. 일괄 변경 전 백업 방법은 홈페이지 백업 방법 글을 참고하세요.

보조 수단: upgrade-insecure-requests

CSP의 upgrade-insecure-requests 지시어를 보내면 브라우저가 페이지의 http 요청을 모두 https로 바꿔 요청합니다. 남은 주소를 고치는 동안 쓸 수 있는 보조 수단이지만, 상대 서버가 https를 지원하지 않으면 여전히 불러오지 못하므로 주소 정리를 대신하지는 않습니다. CSP 도입 순서는 콘텐츠 보안 정책(CSP) 글에서 다룹니다.

혼합 콘텐츠를 고칠 때 흔한 실수

• 첫 화면만 확인한다: 오래된 게시글과 게시판 첨부 이미지에 http 주소가 가장 많이 남아 있습니다.
• http 주소를 그대로 두고 리디렉션만 건다: 차단 대상 자원은 요청 단계에서 막히므로 주소 자체를 바꿔야 합니다.
• 백업 없이 일괄 변경한다: 잘못 바꾸면 본문 전체 링크가 깨질 수 있습니다.
• 새 글에서 다시 생긴다: 편집기에 http 주소를 붙여 넣지 않도록 작성자에게 알려 둡니다.

HTTPS로 옮긴 뒤에는 http 주소 접속을 https로 넘기는 강제 설정과 HSTS도 함께 확인합니다. 점검 방법은 HTTPS 강제와 보안 헤더 글에 정리했습니다.

디코랩이 돕는 방식

디코랩은 운영 중인 사이트의 유지보수와 개선을 맡고, 웹사이트 취약점 점검 서비스로 사이트의 보안 상태를 확인합니다. 게시글이 많아 일괄 변경이 필요한 경우 백업과 범위를 정한 뒤 진행합니다.

자주 묻는 질문

SSL 인증서를 새로 받으면 혼합 콘텐츠가 사라지나요?

사라지지 않습니다. 인증서는 우리 페이지의 연결을 암호화할 뿐이고, 페이지 안에 적힌 http 주소는 직접 바꿔야 합니다.

이미지는 자동으로 https로 바뀐다는데 그냥 둬도 되나요?

상대 서버가 https를 지원하지 않으면 이미지가 보이지 않게 됩니다. 브라우저 처리에 기대지 말고 주소를 직접 바꾸세요.

외부 위젯이 http만 지원하면 어떻게 하나요?

그 위젯은 HTTPS 페이지에서 정상적으로 쓸 수 없습니다. 같은 기능의 https 지원 서비스로 바꾸거나 제거하는 것이 안전합니다.

상대 경로로 바꾸면 무엇이 좋은가요?

슬래시로 시작하는 상대 경로는 현재 페이지와 같은 방식으로 불러오므로, 도메인이나 프로토콜이 바뀌어도 다시 고칠 일이 줄어듭니다.

우리 홈페이지에 혼합 콘텐츠 경고가 보인다면 경고가 나온 페이지 주소를 적어 디코랩 프로젝트 문의로 보내 주세요.