Chrome DevTools의 Security 패널을 사용하여 페이지에 HTTPS가 올바르게 구현되었는지 확인합니다. 민감한 사용자 데이터를 처리하지 않는 사이트를 포함하여 모든 웹사이트를 HTTPS로 보호해야 하는 이유를 알아보려면 HTTPS가 중요한 이유를 참조하세요.
개요
Security 패널은 DevTools에서 페이지의 보안을 검사하는 기본 위치입니다. 보안 패널에는 HTTP 보안 경고, 출처 세부정보, 인증서를 포함하여 페이지의 출처에 대한 개요가 표시됩니다.
보안 패널 열기
보안 패널을 열려면 다음 단계를 따르세요.
- DevTools를 엽니다.
- 다음을 눌러 명령어 메뉴를 엽니다.
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
security를 입력하고 보안 패널 표시를 선택한 다음 Enter 키를 누릅니다.
그림 1. 보안 패널
또는 오른쪽 상단에서 more_vert 옵션 더보기 > 도구 더보기 > 보안을 선택합니다.
일반적인 문제
안전하지 않은 기본 출처
페이지의 기본 출처가 안전하지 않으면 보안 개요에 이 페이지는 안전하지 않습니다라고 표시됩니다.
그림 2. 안전하지 않은 페이지
이 문제는 방문한 URL이 HTTP를 통해 요청되는 경우 발생합니다. 안전하게 하려면 HTTPS를 통해 요청해야 합니다. 예를 들어 주소 표시줄의 URL을 보면 http://example.com과 유사할 것입니다. 보안을 강화하려면 URL이 https://example.com이어야 합니다.
서버에 이미 HTTPS를 설정한 경우 이 문제를 해결하려면 모든 HTTP 요청을 HTTPS로 리디렉션하도록 서버를 구성하기만 하면 됩니다.
서버에 HTTPS가 설정되어 있지 않은 경우 Let's Encrypt를 사용하면 비교적 간단하고 무료로 프로세스를 시작할 수 있습니다. 또는 CDN에서 사이트를 호스팅하는 것이 좋습니다. 현재 대부분의 주요 CDN은 기본적으로 HTTPS에서 사이트를 호스팅합니다.
혼합 콘텐츠
혼합 콘텐츠는 페이지의 기본 출처는 안전하지만 페이지가 안전하지 않은 출처에서 리소스를 요청했음을 의미합니다. 혼합 콘텐츠 페이지는 HTTP 콘텐츠가 스니퍼에 액세스할 수 있고 중간자 공격에 취약하므로 부분적으로만 보호됩니다.
그림 3. 혼합 콘텐츠
그림 3에서 네트워크 패널의 요청 1개 보기를 클릭하면 네트워크 패널이 열리고 mixed-content:displayed 필터가 적용되어 네트워크 로그에 비보안 리소스만 표시됩니다.
그림 4. 네트워크 로그의 혼합 리소스
세부정보 보기
기본 출처 인증서 보기
보안 개요에서 인증서 보기를 클릭하여 기본 출처의 인증서를 빠르게 검사합니다.
그림 5. 기본 출처 인증서
출처 세부정보 보기
출처의 세부정보를 보려면 왼쪽 탐색 메뉴에서 항목 중 하나를 클릭합니다. 세부정보 페이지에서 연결 및 인증서 정보를 볼 수 있습니다. 인증서 투명성 정보도 사용 가능한 경우 표시됩니다.
그림 6. 주요 출처 세부정보