Chrome DevTools의 보안 패널을 사용하여 HTTPS가 페이지에 올바르게 구현되었는지 확인합니다. 민감한 사용자 데이터를 처리하지 않는 사이트를 포함하여 모든 웹사이트를 HTTPS로 보호해야 하는 이유를 알아보려면 HTTPS가 중요한 이유를 참조하세요.
보안 패널 열기
Security 패널은 DevTools에서 페이지의 보안을 검사하는 기본 위치입니다.
- DevTools를 엽니다.
보안 탭을 클릭하여 보안 패널을 엽니다.
그림 1. 보안 패널
일반적인 문제
안전하지 않은 기본 출처
페이지의 기본 출처가 안전하지 않은 경우 보안 개요에 이 페이지는 안전하지 않습니다라고 표시됩니다.
그림 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로 리디렉션되는 프로세스를 자동화할 수 있습니다.
혼합 콘텐츠
혼합 콘텐츠는 페이지의 기본 출처는 안전하지만 페이지가 안전하지 않은 출처에서 리소스를 요청했음을 의미합니다. 혼합 콘텐츠 페이지는 HTTP 콘텐츠가 스니퍼에 액세스할 수 있고 중간자 공격에 취약하므로 부분적으로만 보호됩니다.
그림 3. 혼합 콘텐츠
위의 그림 3에서 네트워크 패널의 요청 1개 보기를 클릭하면 네트워크 패널이 열리고 mixed-content:displayed 필터가 적용되어 네트워크 로그에 비보안 리소스만 표시됩니다.
그림 4. 네트워크 로그의 혼합 리소스
세부정보 보기
기본 출처 인증서 보기
보안 개요에서 인증서 보기를 클릭하여 기본 원본의 인증서를 빠르게 검사합니다.
그림 5. 기본 출처 인증서
출처 세부정보 보기
출처의 세부정보를 보려면 왼쪽 탐색 메뉴에서 항목 중 하나를 클릭합니다. 세부정보 페이지에서 연결 및 인증서 정보를 볼 수 있습니다. 사용 가능한 경우 인증서 투명성 정보도 표시됩니다.
그림 6. 주요 출처 세부정보