Chrome DevTools의 Security 패널을 사용하여 HTTPS가 페이지에 올바르게 구현되었는지 확인합니다. HTTPS가 중요한 이유에서 민감한 사용자 데이터를 처리하지 않는 사이트를 포함한 모든 웹사이트를 HTTPS로 보호해야 하는 이유를 알아보세요.
보안 패널 열기
Security 패널은 DevTools에서 페이지의 보안을 검사하는 기본 위치입니다.
- DevTools를 엽니다.
보안 탭을 클릭하여 보안 패널을 엽니다.
그림 1. Security 패널
일반적인 문제
비보안 기본 출처
페이지의 기본 출처가 안전하지 않으면 보안 개요에 이 페이지는 안전하지 않습니다라고 표시됩니다.
그림 2. 안전하지 않은 페이지
이 문제는 방문한 URL이 HTTP를 통해 요청되었을 때 발생합니다. 보안을 강화하려면
HTTPS를 통해 요청해야 합니다. 예를 들어 주소 표시줄에 표시되는 URL은 http://example.com와 유사할 수 있습니다. 보안을 강화하려면 URL이 https://example.com이어야 합니다.
서버에 이미 HTTPS가 설정된 경우 이 문제를 해결하려면 모든 HTTP 요청을 HTTPS로 리디렉션하도록 서버를 구성하기만 하면 됩니다.
서버에 HTTPS가 설정되어 있지 않은 경우 Let's Encrypt를 사용하면 프로세스를 시작할 수 있는 상대적으로 쉬운 무료 방법이 제공됩니다. 또는 CDN에 사이트를 호스팅할 수도 있습니다. 대부분의 주요 CDN은 기본적으로 HTTPS를 통해 사이트를 호스팅합니다.
팁 Lighthouse에서 HTTP 트래픽을 HTTPS로 리디렉션 감사를 사용하면 모든 HTTP 요청이 HTTPS로 리디렉션되는지 확인하는 프로세스를 자동화할 수 있습니다.
혼합 콘텐츠
혼합 콘텐츠는 페이지의 기본 출처는 안전하지만 페이지가 안전하지 않은 출처의 리소스를 요청했음을 의미합니다. 혼합 콘텐츠 페이지는 스니퍼에 액세스할 수 있고 중간자 공격에 취약하므로 부분적으로만 보호됩니다.
그림 3. 혼합 콘텐츠
위의 그림 3에서 네트워크 패널에서 요청 1 보기를 클릭하면 네트워크 패널이 열리고 mixed-content:displayed 필터가 적용되어 네트워크 로그에 비보안 리소스만 표시됩니다.
그림 4. 네트워크 로그에 혼합된 리소스
세부정보 보기
기본 출처 인증서 보기
Security Overview(보안 개요)에서 View certificate를 클릭하여 기본 출처의 인증서를 빠르게 검사할 수 있습니다.
그림 5. 기본 출처 인증서
출처 세부정보 보기
출처의 세부정보를 보려면 왼쪽 탐색 메뉴에서 항목 중 하나를 클릭합니다. 세부정보 페이지에서 연결 및 인증서 정보를 볼 수 있습니다. 인증서 투명성 정보도 표시됩니다.
그림 6. 기본 출처 세부정보