Mixed content 허용 - Mixed content heoyong

문제점 및 증상

잘 접속이 되던 웹 서비스가 https를 적용한 이후, 갑작스럽게 접속에 문제가 발생하기 시작하였습니다.

특정 리소스들이 모두 불러와지지 않고 화면이 깨지는 현상이 발생하였습니다.

원인분석

브라우저의 개발자 도구를 통하여 웹 서비스에 접속하여 보니, 다음과 같은 오류들이 콘솔창에 표시되었습니다.

"Mixed Content" 관련 내용을 확인하여 다음과 같은 해결 방법들을 찾았습니다.

사용자가 브라우저에서 임시 해결하기

최종 사용자 입장에서 웹 서비스에서 바로 수정이 어려운 경우, 브라우저에서 URL 주소 옆의 자물쇠 버튼을 눌러 "사이트설정"을 선택하고, 그 사이트 설정에서 "안전하지 않은 콘텐츠"가 기본적으로 "차단"으로 설정되어 있는 것을 "허용"으로 변경하면 http 컨텐츠를 불러올 수 있습니다.

웹 서비스 수정 방법

웹 서비스에서 소스에 적용하는 방법으로는 다음과 같은 META 태그를 헤더에 추가하여, http 콘텐츠를 자동으로 https로 변환하여 로딩하도록 하는 방법이 있습니다.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

위 META 태그를 적용한 경우에 있어서, 웹 서비스가 이루어지는 호스와 다른 서버에서 불러오는 리소스에 대해서는 주의해야할 점이 있습니다.
리소스가 저장된 별도 서버에서 https가 반드시 지원이 되어야만 문제가 없습니다. 만약 별도 리소스를 위한 서버에서 https가 지원이 되지 않는다면 근본적으로 보안상 서비스가 불가합니다.

이를 해결하기 위해서는 다음과 같은 방법들을 적용해 볼 수 있습니다.

• https가 지원되는 다른 서버의 동일한 리소스를 활용하는 방법
• 필요한 리소스들을 직접 다운로드하여 웹 서비스와 동일한 호스트에서 직접 서비스 하는 방법
• 해당 리소스를 제외하고 서비스를 구성하는 방법

하지만, 꼭 필요하고 다른 곳에 적용할 수 없다면, 해당 리소스 서버에서 https가 지원되도록 SSL 인증서를 적용하여야만 합니다.
이 부분도 불가능하다면, https가 아닌 http로 서비스를 구성할 수 밖에 없습니다. (보안 취약 ㅠ.ㅠ)

참고자료

브라우저에서 혼합 콘텐츠 사용

혼합 콘텐츠는 초기 요청이 HTTPS에서는 안전하지만 HTTPS 및 HTTP 콘텐츠가 로드되어 웹 페이지를 표시하는 경우 발생합니다. HTTPS 콘텐츠는 안전합니다. HTTP 콘텐츠는 불안전합니다.

최신 브라우저는 보안 콘텐츠가 비보안 콘텐츠와 혼합된 경우 페이지 표시를 차단하거나 경고 메시지를 표시할 수 있습니다.

경고 메시지는 Adobe Target의 시각적 경험 작성기 (VEC)가 혼합 콘텐츠가 포함된 페이지를 열려고 할 때 표시됩니다. 이 메시지는 브라우저에서 차단을 비활성화하는 방법을 알려 줍니다. 차단을 비활성화하면 HTTP 사이트 또는 혼합 호출(HTTPS 및 HTTP)이 있는 사이트를 열 수 있습니다.

이전에는 혼합 콘텐츠가 허용되지 않는 경우 활동을 작성할 때 3단계 안내가 있는 워크플로의 1단계에서 일부 작업을 수행할 수 있었습니다. 이제 Target에서는 1단계에서 작업을 수행할 수 없습니다. 이 메시지가 표시되면 활동을 계속 만들기 전에 혼합 콘텐츠를 활성화해야 합니다.

브라우저의 보안 설정이 혼합 콘텐츠 또는 비보안(HTTP) 콘텐츠가 보안(HTTPS) 페이지 또는 프레임(예: VEC)으로 로드되는 것을 차단할 수 있습니다. 브라우저의 보안 설정을 비활성화하지 않으려면 HTTPS 웹 사이트가 있어야 합니다.

웹 사이트가 비보안(HTTP) 도메인에서 실행 중인 경우 VEC가 활성 혼합 콘텐츠를 로드하도록 허용해야 합니다.

노트

혼합 콘텐츠 허용은 사용자의 라이브 웹 사이트에는 영향을 주지 않고 VEC에만 영향을 줍니다.

자세한 내용은 Mozilla Developer Network(MDN) 웹 사이트의 혼합 콘텐츠를 참조하십시오.

Google Chrome에서 혼합 콘텐츠 활성화

보안 연결을 통해 사이트를 방문하는 경우 Chrome은 웹 페이지의 콘텐츠가 안전하게 전송되었는지 확인합니다.

Google Chrome 도움말의 “이 페이지에 비보안 콘텐츠가 포함됨”을 참조하십시오.

최신 버전의 Chrome(버전 79.0.3945.117 이상)을 통해 VEC를 사용하는 경우 사이트 설정을 업데이트해야 합니다. 사이트 방문자는 이러한 단계를 수행할 필요가 없습니다.

1. 잠금(경고) 아이콘을 클릭한 다음 사이트 설정​을 클릭합니다.

   

2. 비보안 콘텐츠​로 스크롤한 다음 드롭다운 목록을 사용하여 “차단(기본)”을 “허용”으로 변경합니다.

   

3. VEC 페이지를 다시 로드합니다.

Mozilla Firefox에서 혼합 콘텐츠 활성화

기본적으로 Firebox에서는 보안 및 비보안 콘텐츠를 혼합하는 페이지를 차단합니다. 이 설정을 Target을 사용하도록 영구적으로 변경하는 것이 좋습니다. 사이트 방문자는 이러한 단계를 수행할 필요가 없습니다.

1. Firefox에서 주소 표시줄에 about:config를 입력합니다.

2. Firefox에서 표시되는 경고 메시지를 확인합니다.

   

3. 검색 창에서 block_active를 입력합니다.

   

4. **security.mixed_content.block_active_content**를 더블 클릭합니다.

   값이 "True"에서 "False"로 변경됩니다. 값이 “False”로 표시되면 끝난 것입니다.

   

이 설정을 변경한 후 컴퓨터를 다시 시작합니다.

Microsoft Edge에서 혼합 콘텐츠 활성화

보안 연결을 통해 사이트를 방문하는 경우 Edge는 웹 페이지의 콘텐츠가 안전하게 전송되었는지 확인합니다.

최신 버전의 Edge를 통해 VEC를 사용하는 경우 사이트 설정을 업데이트해야 합니다. 사이트 방문자는 이러한 단계를 수행할 필요가 없습니다.

1. 잠금(경고) 아이콘을 클릭한 다음 사이트 권한​을 클릭합니다.

   

2. 비보안 콘텐츠​로 스크롤한 다음 드롭다운 목록을 사용하여 “차단(기본)”을 “허용”으로 변경합니다.

   

3. VEC 페이지를 다시 로드합니다.