Chrome DevTools의 보안 패널 출시

폴 바카우스
폴 바카우스

Chrome 보안팀은 HTTP가 없는 미래를 실현하기 위해 노력해 왔습니다 (위 동영상에서 더 자세히 보기). 이제 여러분이 웹으로 전송하는 데이터가 사용자와 사용자가 보고 있는 사이트에 머무르게 되는 미래는 HTTP가 없는 미래입니다. 또한 멋진 HTTPS의 미래에 더욱 쉽게 순조롭게 진출할 수 있도록 보안을 DevTools의 핵심 기능으로 만들었습니다.

새로운 보안 패널

Chrome 48에 도입된 새로운 보안 패널을 사용하면 인증서 및 혼합 콘텐츠 관련 문제를 훨씬 더 쉽게 확인할 수 있습니다. DevTools에서 바로 이동할 수도 있고, URL 표시줄의 자물쇠 아이콘을 클릭한 다음 '세부정보' 링크를 클릭할 수도 있습니다.

'연결 정보'의 문제 해결

페이지 보안에 대한 데이터를 원하는 사용자를 위한 현재 솔루션은 URL 옆에 있는 작은 자물쇠 아이콘을 클릭한 다음 '연결' 탭에서 제공되는 정보를 파싱하는 것입니다.

하지만 이 탭에는 다음과 같은 몇 가지 문제가 있습니다.

  • 대부분의 사용자에게는 너무 복잡함
  • 하지만 대부분의 개발자에게는 너무 기초적인
  • 자물쇠 아이콘이 '다운그레이드'되는 원인을 불명확하게 합니다.

개요: 자물쇠 아이콘 및 표면 혼합 콘텐츠 설명

개요 탭

자물쇠 아이콘은 페이지의 보안 상태를 나타내므로 아이콘이 표시되는 시점과 이유를 아는 것이 매우 중요합니다. 새로운 보안 패널의 개요 화면에는 보안 페이지를 구성하는 주요 요소가 설명되어 있습니다.

  • ID (인증서)
  • Connection (프로토콜, 암호화 스위트)
  • 하위 리소스

이제 사이트에 훌륭하다는 작은 녹색 배지가 표시되는지 여부를 한 눈에 파악할 수 있습니다.

혼합 콘텐츠가 갑자기 표시되는 경우 그래도 괜찮습니다. 개요에 바로 표시되며, 클릭 한 번으로 네트워크 패널의 필터링된 보기가 표시되므로 문제가 되는 요청을 빠르게 확인할 수 있습니다.

콘텐츠가 혼합되어 있습니다.

출처 뷰: 연결 유형 및 인증서 세부정보

연결 탭

특정 TLS 연결에 대한 정보가 필요한 경우 출처 보기가 도움이 됩니다. 페이지를 새로고침하면 왼쪽 탐색 메뉴에 모든 리소스의 모든 개별 출처가 표시됩니다.

여기에서 사용된 인증서연결 유형에 관한 모든 정보를 확인할 수 있습니다. 또한, 네트워크 패널을 통해 해당 출처에서 오는 모든 리소스를 검사하기 위해 더 자세히 상세히 살펴볼 수 있는 기능도 제공합니다.


새로운 보안 패널을 사용해 보고 트위터 또는 버그/기능 티켓을 통해 의견을 공유해 주세요.