HTTPS 활성화 후 혼합 콘텐츠 경고

이 오류의 의미와 확인 방법

• 페이지 주소는 HTTPS를 사용하지만 브라우저의 개발자 도구에 혼합 콘텐츠가 보고됩니다.
• HTTPS 활성화 후 스크립트, 스타일시트, 글꼴, 이미지, 동영상, 배경 이미지 또는 embedded frame이 로드되지 않거나 다르게 동작합니다.
• Console 메시지에서 HTTPS 페이지가 요청한 HTTP 리소스를 식별합니다.
• JavaScript 또는 CSS와 같은 active content가 차단되어 페이지 기능이 완전히 작동하지 않습니다.
• 특정 페이지, 템플릿 또는 사용자 상태에서만 경고가 표시되며, 이는 하드코딩된 참조 또는 조건부로 생성되는 참조임을 시사합니다.
• 개별 리소스가 여전히 안전하지 않은 참조를 사용하더라도 기본 페이지에 대한 사이트 인증서는 유효한 것으로 표시됩니다.

가능성이 높은 순서의 주요 원인

1. 하드코딩된 HTTP 참조: 페이지 콘텐츠, 템플릿, 테마 파일, 위젯 또는 스타일시트가 여전히 http:// 주소의 리소스를 가리킵니다.
2. 오래된 저장 콘텐츠: HTTPS 마이그레이션 이전에 저장된 이미지, embed, 미디어 필드, 스크립트 또는 기타 데이터베이스 값에 HTTP 참조가 남아 있습니다.
3. 테마 또는 플러그인의 출력: 기본 사이트 주소가 HTTPS로 설정되어 있어도 구성 요소가 안전하지 않은 URL을 생성합니다.
4. HTTPS를 지원하지 않는 외부 리소스: 타사 스크립트, 글꼴, 프레임, 미디어 파일 또는 기타 종속성을 안전하게 사용할 수 없을 수 있습니다.
5. 캐시되거나 번들된 파일: 페이지 캐시, asset bundle, 축소 파일, CDN 또는 reverse proxy가 이전 참조가 포함된 마크업을 계속 제공할 수 있습니다.
6. 오래된 애플리케이션 또는 asset 설정: 애플리케이션이 이전 base address 또는 환경 설정에서 절대 URL을 생성할 수 있습니다.

혼합 콘텐츠 경고만으로 사이트 인증서가 유효하지 않다는 것을 의미하지는 않습니다. 인증서 오류는 사이트 또는 리소스 호스트와의 보안 연결에 관한 문제이며, 혼합 콘텐츠는 보안 페이지 내부에서 요청한 안전하지 않은 리소스에 관한 문제입니다.

해결 방법

1. 문제가 혼합 콘텐츠인지 확인

최신 브라우저에서 영향을 받는 페이지를 열고 개발자 도구를 여세요. Console에서 혼합 콘텐츠 메시지를 찾습니다. Network 패널에서 경고에 표시된 요청을 검사하고 URL, 리소스 유형, 상태, 그리고 표시되는 경우 해당 요청을 시작한 파일 또는 구성 요소를 기록합니다.

브라우저가 기본 사이트와 보안 연결을 설정하지 못하고 인증서 경고를 표시한다면 별도의 문제로 처리하세요. 안전하지 않은 리소스 참조를 수정하기 위해 인증서 설정을 변경하지 마세요.

2. 안전하지 않은 모든 참조 식별

렌더링된 페이지와 필요한 경우 소스, 스타일시트, 스크립트 및 생성된 asset 파일에서 HTTP 참조를 검사합니다. 표시되는 이미지만 확인하지 마세요. JavaScript, CSS, 글꼴, 프레임, 미디어 및 CSS 배경 이미지도 경고나 로드 실패를 일으킬 수 있습니다.

영향을 받는 페이지를 private browsing 창에서 테스트하거나 관련 브라우저 캐시를 삭제한 후 테스트하세요. 이렇게 하면 현재 발생하는 안전하지 않은 요청과 오래된 캐시 응답을 구분하는 데 도움이 되지만, 원래 참조를 수정하는 작업을 대신하지는 않습니다.

3. 참조를 생성하는 출처 찾기

리소스 유형과 영향을 받는 페이지를 활용하여 URL의 출처를 좁혀 나가세요.

• 한 개의 글 또는 페이지: 저장된 콘텐츠나 미디어 필드를 검사합니다.
• 하나의 레이아웃을 사용하는 여러 페이지: 공유 템플릿, 테마, 위젯 또는 재사용 가능한 구성 요소를 검사합니다.
• 특정 기능을 사용하는 페이지만 해당: 관련 플러그인, integration, embed 또는 설정을 검사합니다.
• 결합된 asset 요청: 해당 bundle을 생성한 원본 스타일시트, 스크립트, build 프로세스, 캐시 또는 proxy를 검사합니다.
• 로그인 및 로그아웃 방문자에게 동작이 다름: 각 상태에서 렌더링되는 콘텐츠 및 캐싱 계층을 비교합니다.

4. 출처에서 참조 업데이트

참조가 저장된 위치에 맞는 수정 방법을 적용하세요.

• 페이지 또는 게시물 콘텐츠를 변경하여 리소스의 HTTPS 버전을 사용합니다.
• URL을 생성하는 사이트, 미디어, 테마, 플러그인, embed 또는 integration 설정을 업데이트합니다.
• 템플릿, 스타일시트, 스크립트 또는 설정 파일에 하드코딩된 참조를 수정합니다.
• 동일 사이트의 리소스라면 애플리케이션 및 배포 구조에 적합한 경우 지원되는 relative path를 사용합니다.
• 외부 리소스라면 호스트가 HTTPS를 지원하는지 확인합니다. 지원하지 않는 경우, 특히 active content를 제공하는 리소스라면 해당 종속성을 안전한 출처로 교체하거나 제거합니다.

5. 안전장치를 적용한 경우에만 일괄 교체 사용

일괄 교체는 동일한 오래된 값이 여러 개의 알려진 레코드에 저장된 경우 적합합니다. 운영 데이터를 변경하기 전에 승인을 받고, 복원 가능한 백업을 만들며, 정확한 범위를 정의하고, 가능한 경우 staging 사본 또는 대표 레코드에서 작업을 테스트하세요.

직렬화된 데이터 또는 구조화된 데이터를 고려하고, 텍스트 문자열이 나타나는 모든 위치를 무조건 교체하지 마세요. 외부 호스트, redirect, 파일 경로, 설정 값 및 http://라는 텍스트가 페이지 URL이 아닐 수 있는 레코드를 검토합니다. 데이터 구조가 익숙하지 않다면 애플리케이션 소유자 또는 개발자에게 변경을 맡기세요.

6. 생성된 콘텐츠 및 캐시 삭제

출처를 수정한 후에도 오래된 마크업이나 asset bundle을 포함할 수 있는 애플리케이션, 페이지, CDN, reverse-proxy 및 브라우저 캐시를 purge합니다. 사이트에서 결합되거나 축소된 asset을 사용하는 경우 이를 다시 생성합니다. 캐시 purge는 일시적으로 origin 트래픽을 늘리거나 사이트 동작을 변경할 수 있으므로, 영향을 받는 환경에서 승인된 작업만 수행하세요.

7. 수정 사항 확인

영향을 받는 페이지를 다시 로드하고 Console 및 Network 패널을 다시 확인합니다. 이전에 플래그가 지정된 리소스가 안전하게 요청되는지, 스크립트와 스타일이 정상적으로 작동하는지, 새로운 안전하지 않은 참조가 나타나지 않는지 확인하세요.

관련 템플릿과 로그인 및 로그아웃 상태에 해당하는 보기도 반복해서 확인합니다. 캐시를 새로 고친 후 경고가 다시 나타난다면 기본 템플릿, 플러그인, 설정 또는 생성된 asset을 계속 수정해야 합니다.

예방 및 해결 확인 방법

• HTTPS를 고려한 참조를 사용하여 이미지, 스크립트, 스타일시트, 글꼴, embed 및 미디어를 추가합니다.
• 애플리케이션의 사이트 주소, asset 설정, 테마, 플러그인 및 integration을 HTTPS에 맞게 일관되게 유지합니다.
• 배포 전에 타사 종속성을 검토하고 안전한 제공을 지원하지 않는 공급자를 교체합니다.
• staging 및 마이그레이션 후 테스트에 혼합 콘텐츠 검사를 포함합니다.
• 경고가 처음 발견된 페이지만이 아니라 공유 템플릿과 재사용 가능한 구성 요소도 검사합니다.
• 대량 콘텐츠 변경 전에 테스트된 백업을 유지하고, 이후 영향을 받는 캐시와 asset bundle을 purge하거나 다시 생성합니다.
• 서로 다른 리소스를 렌더링하는 인증 상태별 페이지를 다시 확인합니다.

자주 묻는 질문