혼합 콘텐츠 오류: HTTPS 페이지가 HTTP 리소스를 로드함
· CSR.plus 팀
- •브라우저는 HTTPS 페이지의 HTTP 리소스를 차단해 다운그레이드 공격으로부터 페이지를 보호합니다.
- •브라우저 콘솔로 차단된 URL을 모두 확인한 뒤 소스를 수정하세요: 상대 URL, 프로토콜 상대 URL 또는 CSP 업그레이드 헤더.
- •Content Security Policy의 upgrade-insecure-requests는 코드 수정 없이 많은 페이지를 고칠 수 있습니다.
혼합 콘텐츠가 작동하는 방식
HTTPS로 제공되는 페이지는 보안 컨텍스트를 상속합니다. 평문 HTTP로 로드되는 모든 하위 리소스 — 이미지, CSS, 스크립트, 글꼴, iframe, fetch/XHR — 는 그 컨텍스트를 깨뜨립니다. 브라우저는 "액티브" 혼합 콘텐츠(스크립트, iframe, fetch)를 완전히 차단하며, 점점 더 이미지와 오디오도 차단합니다. 콘솔은 차단된 URL을 명확한 메시지와 함께 기록합니다.
모든 위치 찾기
DevTools > 콘솔을 열고 "Mixed Content"로 필터한 뒤 차단된 URL을 복사하세요. 그런 다음 코드에서 해당 호스트의 http:// 참조를 검색합니다. 가장 견고한 수정은 프로토콜 상대 URL(//cdn.example.com/x.js)이나 단순 상대 경로를 사용해 브라우저가 올바른 스킴을 자동 선택하게 하는 것입니다.
CSP 한 줄 수정
Content-Security-Policy: upgrade-insecure-requests 헤더를 추가하면 브라우저가 http:// 하위 리소스를 차단 대신 https://로 다시 씁니다. 대부분의 정적 페이지에서 작동합니다. HTTPS를 제공하지 않는 하드코딩된 http:// API 엔드포인트는 코드를 바꿔야 합니다 — 클라이언트 측 해결책이 없습니다.
FAQ
다른 브라우저는 되는데 제 사이트만 깨져 보이는 이유는?
구형 브라우저나 느슨한 정책은 혼합 콘텐츠를 조용히 로드할 수 있습니다. 현대 브라우저는 차단하므로 동작이 다릅니다.
HSTS가 혼합 콘텐츠를 고치나요?
아니요. HSTS는 HTTP 페이지 로드를 막지만 내장된 http:// 리소스를 다시 쓰지는 않습니다. upgrade-insecure-requests를 쓰거나 URL을 고치세요.
UptimeRobot
SSL과 가동 시간을 무료로 모니터링
UptimeRobot이 인증서와 엔드포인트를 24시간 감시합니다——무료 플랜에 모니터 50개.
제휴 링크——추가 비용 없이 저희가 커미션을 받을 수 있습니다.
무료 SSL/TLS 도구
몇 초 만에 인증서를 검증하고 검사하세요.