혼합 콘텐츠
======

사용자가 HTTPS를 통해 제공되는 페이지를 방문하면, 웹 서버와의 연결이 TLS로 암호화되므로 대부분의 스니퍼와 중간자 공격으로부터 보호됩니다. 일반 텍스트 HTTP를 사용하여 가져온 콘텐츠가 포함된 HTTPS 페이지를 혼합 콘텐츠 페이지라고 합니다. 이러한 페이지는 부분적으로만 암호화되므로 스니퍼와 중간자 공격자가 암호화되지 않은 콘텐츠에 접근할 수 있습니다. 따라서 페이지는 안전하지 않습니다.

혼합 콘텐츠의 종류
----------

혼합 콘텐츠에는 **혼합 패시브/디스플레이 콘텐츠**와 **혼합 액티브 콘텐츠**의 두 가지 범주가 있습니다. 둘의 차이점은 중간자 공격의 일환으로 콘텐츠가 재작성된 경우, 최악의 시나리오의 위협 수준에 있습니다. 패시브 콘텐츠의 위협은 더 낮습니다(페이지에 오해의 소지가 있는 콘텐츠가 포함되어 있거나 사용자의 쿠키가 도난당할 수 있음). 액티브 콘텐츠의 경우, 피싱, 민감한 데이터 공개, 악성 사이트로의 리디렉션 등의 위험이 발생할 수 있습니다.

### 혼합 패시브/디스플레이 콘텐츠

혼합 패시브/디스플레이 콘텐츠는 HTTPS 웹페이지에 포함되지만, 웹페이지의 다른 부분은 변경할 수 없는 HTTP를 통해 제공되는 콘텐츠입니다. 예를 들어, 공격자는 HTTP를 통해 제공되는 이미지를 부적절한 이미지나 메시지로 대체하여 사용자에게 보낼 수 있습니다. 또한 공격자는 사용자에게 어떤 이미지가 제공되는지 관찰하여 사용자의 활동에 대한 정보를 유추할 수도 있습니다. 이미지가 웹사이트 내의 특정 페이지에만 사용되는 경우가 많습니다. 공격자가 특정 이미지에 대한 HTTP 요청을 관찰하면 사용자가 어떤 웹 페이지를 방문하고 있는지 파악할 수 있습니다.

#### 패시브 콘텐츠 목록

이 구획은 패시브 콘텐츠로 간주되는 모든 유형의 HTTP 요청을 나열합니다.

* `<img>` (`src` 속성)
* `<audio>` (en-US) (`src` 속성)
* `<video>` (`src` 속성)
* `<object>` 하위 리소스 (`<object>`가 HTTP 요청을 수행하는 경우)
### 혼합 액티브 콘텐츠

**혼합 액티브 콘텐츠**는 HTTPS 페이지의 문서 객체 모델 전체 또는 일부에 접근할 수 있는 콘텐츠입니다. 이러한 유형의 혼합 콘텐츠는 HTTPS 페이지의 동작을 변경하고 잠재적으로 사용자의 민감한 데이터를 탈취할 수 있습니다. 따라서 위의 혼합 디스플레이 콘텐츠에 대해 설명한 위험 외에도 혼합 액티브 콘텐츠는 몇 가지 다른 공격 벡터에 대해 취약합니다.

혼합 액티브 콘텐츠의 경우, 중간자 공격자가 HTTP 콘텐츠에 대한 요청을 가로챌 수 있습니다. 또한 공격자는 악성 JavaScript 코드를 포함하도록 응답을 재작성할 수도 있습니다. 악성 액티브 콘텐츠는 사용자의 자격 증명을 훔치거나, 사용자의 민감한 데이터를 획득하거나, 브라우저 또는 플러그인의 취약점을 활용하여 사용자 시스템에 멀웨어 설치를 시도할 수 있습니다(예: 브라우저 또는 플러그인의 취약점 활용).

혼합 콘텐츠와 관련된 위험은 사용자가 방문하는 웹사이트의 유형과 해당 사이트에 노출된 데이터가 얼마나 민감한지에 따라 달라집니다. 웹페이지에는 온 세상이 볼 수 있는 공개 데이터가 있거나 인증된 경우에만 볼 수 있는 비공개 데이터가 있을 수 있습니다. 웹페이지가 공개되어 있고 사용자에 대한 민감한 데이터가 없는 경우라도, 혼합 액티브 콘텐츠를 사용하면 공격자가 사용자를 다른 HTTP 페이지로 리디렉션하고 해당 사이트에서 HTTP 쿠키를 훔칠 수 있습니다.

#### 활성 콘텐츠 예시

이 구획은 액티브 콘텐츠로 간주되는 몇 가지 유형의 HTTP 요청을 나열합니다.

* `<script>` (`src` 속성)
* `<link>` (`href` 속성) (CSS 스타일 시트 포함)
* `<iframe>` (en-US) (`src` 속성)
* `XMLHttpRequest` 요청
* `fetch()` 요청
* `url()` 값이 사용되는 CSS의 모든 경우(`@font-face`, `cursor`, `background-image` 등).
* `<object>` (`data` 속성)
* `Navigator.sendBeacon` (`url` 속성)

웹 글꼴과 워커와 같은 다른 리소스 유형은 Chrome에서와 마찬가지로 액티브 혼합 콘텐츠로 간주될 수 있습니다.

혼합 콘텐츠 불러오기
-----------

대부분의 브라우저는 혼합 액티브 콘텐츠를 불러오는 것을 막으며, 일부 브라우저는 혼합 디스플레이 콘텐츠도 차단합니다.

### 로컬에서 전달된 혼합 리소스 불러오기

브라우저는 로컬에서 전달된 혼합 리소스를 불러오는 것을 허용할 수 있습니다. 여기에는 루프백 주소(예: `http://127.0.0.1/`)에서 접근되는 `file:` URL과 콘텐츠가 포함됩니다.

* Firefox 55 이상에서는 루프백 주소 `http://127.0.0.1/`에서 혼합 콘텐츠를 불러오는 것을 허용합니다. (Firefox bug 903966 참고)
* Firefox 84 이상에서는 이제 루프백 주소에 매핑된 `http://localhost/`와 `http://*.localhost/` URL에서 혼합 콘텐츠를 불러올 수 있습니다. (Firefox bug 1220810 참고)
* Chrome도 `http://127.0.0.1/`과 `http://localhost/`의 혼합 콘텐츠를 허용합니다.
* Safari는 혼합 콘텐츠를 허용하지 않습니다.
### 혼합 디스플레이 리소스 업그레이드

브라우저는 보안 페이지에서 디스플레이/미디어 콘텐츠 요청을 HTTP에서 HTTPS로 자동 업그레이드하는 기능을 지원할 수 있습니다(일부 콘텐츠는 안전하게 로드되는 반면 다른 콘텐츠는 안전하지 않게 로드되는 혼합 콘텐츠 상태를 막습니다).

Firefox는 이 기능을 실험적인 기능으로 지원합니다. `security.mixed_content.upgrade_display_content` 설정을 사용하여 활성화할 수 있습니다.

* 업그레이드에 실패하면(미디어의 호스트가 HTTPS를 지원하지 않아서) 미디어가 로드되지 않습니다.
* 콘텐츠가 성공적으로 업그레이드되면 콘솔 경고가 표시됩니다.
* 자세한 내용은 Firefox의 실험적 기능 > 혼합 표시 콘텐츠 업그레이드 (en-US)를 참조하세요.
Firefox 웹 콘솔의 경고
----------------

웹사이트의 페이지에 이 문제가 있는 경우 Firefox 웹 콘솔은 Net 패널에 혼합 콘텐츠 경고 메시지를 표시합니다. HTTP를 통해 불러온 혼합 콘텐츠 리소스는 "mixed content"라는 텍스트와 함께 해당 콘텐츠 페이지로 연결되는 빨간색 링크가 표시됩니다.

![혼합 콘텐츠 경고를 표시하는 웹 콘솔의 스크린샷입니다.](/ko/docs/Web/Security/Mixed_content/mixed_content_-_net_pane.png)

웹 콘솔에서 이러한 경고를 찾을 수 있을 뿐만 아니라, 콘텐츠 보안 정책(CSP)을 사용하여 문제를 보고할 수도 있습니다. 웹사이트를 재귀적으로 검사하여 안전하지 않은 콘텐츠의 링크를 찾아주는 SSL-check나 Missing Padlock과 같은 온라인 크롤러를 사용할 수도 있습니다.

Firefox 23부터 혼합 액티브 콘텐츠는 기본적으로 차단됩니다(환경설정을 통해 혼합 디스플레이 콘텐츠도 차단할 수 있음). 웹 개발자가 혼합 콘텐츠 오류를 쉽게 찾을 수 있도록 차단된 모든 혼합 콘텐츠 요청은 아래와 같이 웹 콘솔의 보안 창에 기록됩니다.

![웹 콘솔의 보안 창의 차단된 혼합 콘텐츠 오류 스크린샷](/ko/docs/Web/Security/Mixed_content/mixed_content_webconsole.png)

이 유형의 오류를 해결하려면, HTTP 콘텐츠에 대한 모든 요청을 제거하고 HTTPS를 통해 제공되는 콘텐츠로 대체해야 합니다. 몇 가지 일반적인 혼합 콘텐츠의 예로는 JavaScript 파일, 스타일 시트, 이미지, 동영상, 기타 미디어 등이 있습니다.

**참고:** 콘솔에는 혼합 표시 콘텐츠가 성공적으로 HTTP에서 HTTPS로 업그레이드되고 있는지 여부를 나타내는 메시지가 표시됩니다("Loading mixed (insecure) display content"이라는 경고 대신).

같이 보기
-----

* 혼합 콘텐츠 - W3C Editor's Draft
* 혼합 콘텐츠가 있는 웹사이트를 고치는 방법