Chrome DevTools의 보안 패널 출시

Chrome 보안팀은 HTTP 없는 미래를 실현하기 위해 노력해 왔습니다 (위 동영상을 다시 시청). HTTP 없는 미래, 즉 사용자가 웹에 전송하는 모든 데이터가 사용자와 사용자가 보고 있는 사이트 사이에 있다는 것을 합리적으로 확신할 수 있는 미래를 만들어 가고 있습니다. 더욱 수월하게 HTTPS의 미래에 빠르게 적응하고 참여할 수 있도록, 저희는 DevTools의 핵심 기능으로 Security를 만들었습니다.

새 보안 패널

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

“연결 정보”로 문제 해결

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

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

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

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

개요 탭

자물쇠 아이콘은 페이지의 보안 상태를 나타내므로 이 아이콘이 언제, 왜 표시되는지 아는 것이 매우 중요합니다. 새 보안 패널의 개요 화면에서 보안 페이지를 구성하는 중요한 부분을 설명합니다.

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

이제 사이트에 '멋짐'이라는 작은 초록색 배지가 표시되는 이유를 한눈에 알 수 있습니다.

혼합 콘텐츠가 갑자기 나타나나요? 그래도 괜찮습니다. 개요에 바로 표시되며, 클릭하면 네트워크 패널의 필터링된 보기가 표시되어 문제가 되는 요청을 신속하게 확인할 수 있습니다.

혼합 콘텐츠

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

연결 탭

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

여기에서 사용된 인증서연결 유형에 대한 모든 정보를 확인할 수 있습니다. 또한 Network 패널을 통해 해당 출처에서 들어오는 모든 리소스를 더 상세히 살펴볼 수 있는 편리한 기능도 제공합니다.


새로운 보안 패널을 사용해 보고 Twitter 또는 버그/기능 티켓을 통해 의견을 알려주세요.