○웹살림
← 모든 기록
HTTPS 페이지의 Mixed Content 오류 해결하는 방법 대표 이미지
문제 해결

HTTPS 페이지의 Mixed Content 오류 해결하는 방법

Mixed Content 오류의 원인과 단계별 해결 방법을 소개합니다. 리소스 URL 변경, CSP 헤더 설정 등을 다룹니다.

글

HTTPS 페이지에서 Mixed Content 오류는 HTTP 리소스를 로드할 때 발생합니다. 이 오류는 보안 위협으로 브라우저가 차단하거나 경고합니다. 해결 방법은 리소스 URL을 HTTPS로 변경하거나 Content-Security-Policy 헤더를 설정하는 것입니다.

Mixed Content 오류의 원인 이해하기

혼합 콘텐츠는 HTTPS 페이지에서 HTTP 리소스를 로드하는 경우를 말한다 (혼합 콘텐츠 원인과 해결 방법). 혼합 콘텐츠는 수동적(Passive)과 활성(Active)으로 나뉜다. 활성 혼합 콘텐츠는 현대 브라우저에서 기본적으로 차단되며, 수동적 혼합 콘텐츠는 경고와 함께 로드될 수 있습니다.

브라우저 개발자 도구로 오류 리소스 확인하기

브라우저 개발자 도구의 콘솔 탭에서 Mixed Content 관련 경고를 확인할 수 있습니다. 네트워크 탭에서 HTTP로 요청된 리소스를 찾아내고, 해당 리소스의 URL을 확인합니다.

리소스 URL을 HTTPS로 직접 변경하기

가장 간단한 해결 방법은 요청 URL을 HTTP에서 HTTPS로 변경하는 것입니다. 다음 단계를 따르세요.

  1. 브라우저 개발자 도구의 네트워크 탭에서 HTTP 리소스를 확인합니다.
  2. 해당 리소스 URL을 https://로 변경하거나 프로토콜을 생략한 // 형태로 수정합니다.
  3. 페이지를 새로고침하여 오류가 해결되었는지 확인합니다.

예를 들어, http://example.com/image.jpg를 https://example.com/image.jpg로 바꾸거나, //example.com/image.jpg로 변경합니다. 이 방법은 Mixed Content 오류 해결하기에서도 설명하고 있습니다.

Content-Security-Policy 헤더로 HTTP 요청 자동 업그레이드하기

Content-Security-Policy의 upgrade-insecure-requests 지시문으로 혼합 콘텐츠를 해결할 수 있다. 브라우저에게 모든 HTTP 요청을 HTTPS로 자동 업그레이드하도록 지시합니다. HTML <head>에 다음 메타 태그를 추가하세요: <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">. 또는 서버에서 HTTP 응답 헤더로 Content-Security-Policy: upgrade-insecure-requests를 설정할 수 있습니다. 자세한 내용은 Mixed Content 오류 해결 방법을 참고하세요.

프록시나 빌드 도구를 활용한 자동 변환 고려하기

CDN이나 리버스 프록시(예: Cloudflare)를 사용하면 HTTP 요청을 자동으로 HTTPS로 변환할 수 있습니다. 또한 빌드 도구에서 리소스 URL을 HTTPS로 강제하는 플러그인을 사용할 수도 있습니다.

사이트 전체 점검 및 정기적 모니터링

사이트 전체를 점검하여 모든 리소스가 HTTPS로 로드되는지 확인합니다. 정기적인 모니터링 도구를 사용하여 Mixed Content 문제가 재발하지 않도록 관리합니다.

자세한 SSL 인증서 오류 해결은 SSL 인증서 오류 트러블슈팅 가이드를 참고하세요.

참고 자료