安全面板

前端/谷歌开发者工具/安全面板/为什么说 HTTPS 很重要.md

@@ -0,0 +1,27 @@
+# 为什么说 HTTPS 很重要
+
+您应始终使用 HTTPS 保护您的所有网站，即使这些网站并不处理敏感的通信。 除了为网站和用户的个人信息提供关键的安全性和数据完整性外，许多新的浏览器功能，特别是 [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) 所需的那些功能也要求使用 HTTPS。
+
+### TL;DR
+
+- 善意的或恶意的入侵者会利用您的网站和用户之间传输的每个未受保护的资源。
+- 许多入侵者都会查看汇总的行为以识别您的用户。
+- HTTPS 不仅可阻止您的网站被滥用，也是许多先进功能不可或缺的一部分，可作为类似应用功能（如服务工作线程）的实现技术。
+
+## HTTPS 可保护您的网站的完整性。
+
+HTTPS 有助于防止入侵者篡改您的网站和用户浏览器之间的通信。 入侵者包括故意进行恶意攻击的攻击者，以及合法但具有侵犯性的公司，如将广告注入网页的 ISP 或酒店。
+
+入侵者会利用未受保护的通信欺骗您的用户提供敏感信息或安装恶意软件，或将他们自己的广告插入您的资源中。例如，有些第三方向网站注入可能会损害用户体验和产生安全漏洞的广告。
+
+入侵者会利用您的网站和用户之间传输的每个未受保护的资源。 图像、Cookie、脚本、HTML 等都会被利用。 入侵在网络中随时都会发生，包括入侵用户的电脑、Wi-Fi 热点或已泄露的 ISP 等。
+
+## HTTPS 可保护您的用户的隐私和安全
+
+HTTPS 可防止入侵者能够被动地侦听您的网站和您的用户之间的通信。
+
+人们对 HTTPS 有一个普遍的错误认识，认为只有处理敏感通信的网站才需要 HTTPS。 每个未受保护的 HTTP 请求都可能暴露与您的用户行为和身份有关的信息。尽管访问一次未受保护的网站可能看上去无害，但一些入侵者会查看汇总的用户浏览活动，以推断他们的行为和意图，从而进行[去匿名化](https://en.wikipedia.org/wiki/De-anonymization)攻击，查出匿名用户的身份。例如，员工可能在阅读未受保护的医疗文章时不经意地向其雇主泄露敏感的健康信息。
+
+## HTTPS 是网络的未来发展方向
+
+强大的全新网络平台功能，如拍照或使用 `getUserMedia()` 录制音频，或通过服务工作线程启用离线应用体验，或构建 Progressive Web App，在执行前均需要用户的明确许可。还将更新许多较旧的 API，以要求执行权限，如 [geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation)API。HTTPS 是这些新功能和更新的 API 的权限工作流的一个关键组件。

前端/谷歌开发者工具/安全面板/了解安全问题.md

@@ -0,0 +1,50 @@
+# 了解安全问题
+
+HTTPS 为您的网站和将个人信息委托给您的网站的人提供了[重要的安全性和数据完整性](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)。在 Chrome DevTools 中使用 Security 面板调试安全问题，确保您已在自己的网站上恰当地实现 HTTPS。
+
+### TL;DR
+
+- 使用 Security Overview 可以立即查看当前页面是否安全。
+- 检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。
+
+## Security Overview
+
+要查看页面的整体安全性，请打开 DevTools，然后转至 Security 面板。
+
+您首先会看到 Security Overview。Security Overview 会一目了然地告诉您页面是否安全。 安全页面会通过消息 `This page is secure (valid HTTPS).` 指示
+
+![Security Overview，安全页面](https://developers.google.com/web/tools/chrome-devtools/images/overview-secure.png)
+
+点击 **View certificate** 查看[主源](https://en.wikipedia.org/wiki/Same-origin_policy)的服务器证书。
+
+![查看证书](https://developers.google.com/web/tools/chrome-devtools/images/view-certificate.png)
+
+非安全页面会通过消息 `This page is not secure.` 指示
+
+Security 面板可以区分两种非安全页面。 如果请求的页面通过 HTTP 提供，则主源会被标记为不安全。
+
+![Security Overview，非安全主源](https://developers.google.com/web/tools/chrome-devtools/images/overview-non-secure.png)
+
+如果请求的页面通过 HTTPS 检索，但页面会继续使用 HTTP 检索其他源的内容，然后页面仍然会被标记为不安全。这称为[混合内容](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content)页面。 混合内容页面仅受部分保护，因为 HTTP 内容可以被嗅探器获取到且易受到中间人攻击。
+
+![Security Overview，混合内容](https://developers.google.com/web/tools/chrome-devtools/images/overview-mixed.png)
+
+点击 **View request in Network Panel** 打开 Network 面板的过滤视图，然后查看具体是哪些请求通过 HTTP 提供。 这将显示来自所有源的所有未受保护的请求。
+
+![Network 面板，非安全资源，所有源](https://developers.google.com/web/tools/chrome-devtools/images/network-all.png)
+
+## 检查源
+
+使用左侧面板可以检查各个安全或非安全源。
+
+点击安全源查看该源的连接和证书详情。
+
+![源详情，安全](https://developers.google.com/web/tools/chrome-devtools/images/origin-detail-secure.png)
+
+如果您点击非安全源，Security 面板会提供 Network 面板过滤视图的链接。
+
+![源详情，非安全](https://developers.google.com/web/tools/chrome-devtools/images/origin-detail-non-secure.png)
+
+点击链接可以查看具体是源的哪些请求通过 HTTP 提供。
+
+![Network 面板，非安全资源，一个源](https://developers.google.com/web/tools/chrome-devtools/images/network-one.png)