Chrome DevTools의 보안 패널 출시

Chrome 보안팀은 HTTP가 없는 미래, 즉 웹에 전송하는 모든 데이터가 사용자와 사용자가 방문하는 사이트 간에만 유지된다는 것을 사용자와 개발자가 확신할 수 있는 미래를 실현하기 위해 노력해 왔습니다 (위 동영상을 다시 시청하여 개요를 확인하세요). 더욱 쉽게 HTTPS로 전환할 수 있도록 DevTools의 핵심 기능으로 보안을 추가했습니다.

새로운 보안 패널

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

'연결 정보' 관련 문제 해결

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

안타깝게도 이 탭에는 몇 가지 문제가 있습니다.

  • 대부분의 사용자에게 너무 복잡함
  • 하지만 대부분의 개발자에게는 너무 기본적입니다.
  • 잠금 아이콘 '다운그레이드'의 원인이 명확하지 않습니다.

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

개요 탭

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

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

이제 사이트에 멋진 녹색 배지가 표시되는 이유를 한눈에 파악할 수 있습니다.

갑자기 혼합 콘텐츠가 표시되나요? 걱정하지 마세요. 요약에 바로 표시되며 클릭하면 필터링된 네트워크 패널 뷰로 이동하여 문제가 되는 요청을 빠르게 확인할 수 있습니다.

혼합 콘텐츠

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

연결 탭

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

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


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