修正混合内容

Jo-el van Bergen

Rachel Andrew Technical Writer

为网站提供 HTTPS 支持是保护网站和用户免受攻击的重要一步，但混合内容可能会使这种保护失效。 浏览器会屏蔽越来越多的不安全混合内容，如什么是混合内容？中所述

在本指南中，我们将演示用于修复现有混合内容问题和防止新问题发生的技术和工具。

通过访问您的网站查找混合内容

在 Google Chrome 中访问 HTTPS 网页时，浏览器会在 JavaScript 控制台中以错误和警告的形式提醒您注意混合内容。

在什么是混合内容？中，您可以找到许多示例，并了解 Chrome 开发者工具如何报告这些问题。

被动混合内容示例会发出以下警告。 如果浏览器能够在 https 网址中找到内容，则会自动升级该内容，然后显示一条消息。

系统会屏蔽主动混合内容并显示警告。

如果您发现网站上的 http:// 网址存在此类警告，则需要在网站的源代码中进行修正。 建议您列出这些网址以及您发现这些网址的页面，以便在修正时使用。

注意：系统只会显示您当前正在查看的网页的混合内容错误和警告，并且每次您前往新网页时，JavaScript 控制台都会被清空。这意味着，您必须逐个查看网站的每个网页，才能找到这些错误。

在网站中查找混合内容

您可以直接在源代码中搜索混合内容。 在源代码中搜索 http://，并查找包含 HTTP 网址属性的标记。 请注意，锚标记 (<a>) 的 href 属性中包含 http:// 通常不是混合内容问题，但也有一些值得注意的例外情况，我们将在下文中讨论。

如果您的网站是使用内容管理系统发布的，则在发布网页时可能会插入指向不安全网址的链接。例如，图片可能包含完整网址，而不是相对路径。 您需要在 CMS 内容中找到并修正这些问题。

修正混合内容

在网站源代码中找到混合内容后，您可以按照以下步骤进行修复。

如果您收到一条控制台消息，指出资源请求已自动从 HTTP 升级到 HTTPS，则可以放心地将代码中资源的 http:// 网址更改为 https://。您还可以通过在浏览器网址栏中将 http:// 更改为 https://，并尝试在浏览器标签页中打开该网址，来检查资源是否可以安全访问。

如果无法通过 https:// 访问资源，您应考虑以下选项之一：

• 添加来自其他主机的资源（如果有）。
• 在法律允许的情况下，直接下载内容并将其托管在您的网站上。
• 从您的网站中完全排除该资源。

解决问题后，请查看最初发现错误的页面，并验证错误是否不再出现。

注意非标准代码的使用

请注意网站上的非标准代码使用情况。 例如，锚标记 (<a>) 网址不会导致混合内容错误，因为它们会使浏览器导航到新网页。这意味着这些问题通常不需要修正。 不过，某些图片库脚本会替换 <a> 标记的功能，并将 href 属性指定的 HTTP 资源加载到网页上的灯箱显示中，从而导致混合内容问题。

大规模处理混合内容

上述手动步骤非常适合小型网站；但对于大型网站或拥有许多独立开发团队的网站，可能很难跟踪所有正在加载的内容。 为了帮助完成此任务，您可以使用内容安全政策来指示浏览器通知您混合内容，并确保您的网页绝不会意外加载不安全的资源。

内容安全政策

内容安全政策 (CSP) 是一项多用途浏览器功能，可用于大规模管理混合内容。CSP 报告机制可用于跟踪网站上的混合内容，并提供违规处置政策，通过升级或屏蔽混合内容来保护用户。

您可以在服务器发送的响应中添加 Content-Security-Policy 或 Content-Security-Policy-Report-Only 标头，从而为网页启用这些功能。 此外，您还可以使用网页 <head> 部分中的 <meta> 标记来设置 Content-Security-Policy（但不能设置 Content-Security-Policy-Report-Only）。

注意：现代浏览器会强制执行其收到的所有内容安全政策。浏览器在响应标头或 <meta> 元素中收到的多个 CSP 标头值会合并并作为单个政策强制执行；报告政策也会同样合并。政策会通过取交集的方式进行合并；也就是说，第一项政策之后的每项政策只能进一步限制允许的内容，而不能扩大允许的内容。

使用内容安全政策查找混合内容

您可以使用内容安全政策来收集网站上的混合内容报告。 如需启用此功能，请将 Content-Security-Policy-Report-Only 指令添加为网站的响应标头。

响应标头：

Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint

注意：report-uri 响应标头已被弃用，取而代之的是 report-to。

Browser Support

• 70
• 79
• 149
• 16.4

Source

您可以同时提供这两个标头，在这种情况下，如果浏览器支持 report-to，系统会忽略 report-uri。

每当用户访问您网站上的某个网页时，其浏览器都会向 https://example.com/reportingEndpoint 发送 JSON 格式的报告，其中包含违反内容安全政策的所有内容。在这种情况下，只要通过 HTTP 加载子资源，系统就会发送报告。 这些报告包含发生违规行为的网页网址以及违反政策的子资源网址。 如果您将报告端点配置为记录这些报告，则无需亲自访问每个页面，即可跟踪网站上的混合内容。

对此，请注意以下两点：

• 用户必须在能够识别 CSP 标头的浏览器中访问您的网页。大多数现代浏览器都是如此。
• 您只会收到用户访问过的网页的报告。 因此，如果您的某些网页流量较少，您可能需要等待一段时间才能获得整个网站的报告。

内容安全政策指南提供了更多信息和示例端点。

使用 CSP 报告的替代方案

如果您的网站由 Blogger 等平台托管，您可能无法修改标头和添加 CSP。相反，一个可行的替代方案是使用网站抓取工具为您查找整个网站中的问题，例如 HTTPSChecker 或混合内容扫描。

升级不安全的请求

Browser Support

• 44
• 17
• 48
• 10.1

Source

浏览器开始升级并拦截不安全的请求。 您可以使用 CSP 指令强制自动升级或屏蔽这些资源。

upgrade-insecure-requests CSP 指令会指示浏览器在发出网络请求之前升级不安全的网址。

例如，如果某个网页包含一个带有 HTTP 网址的图片标记，如 <img src="https://example.com/image.jpg">

浏览器会改为针对 https://example.com/image.jpg 发出安全请求，从而避免用户遇到混合内容。

您可以通过发送包含以下指令的 Content-Security-Policy 标头来启用此行为：

Content-Security-Policy: upgrade-insecure-requests

或者，使用 <meta> 元素将同一指令嵌入到文档的 <head> 部分：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

与浏览器自动升级一样，如果资源无法通过 HTTPS 访问，升级后的请求会失败，并且资源不会加载。 这有助于维护网页的安全性。upgrade-insecure-requests 指令比自动浏览器升级更进一步，会尝试升级浏览器当前未升级的请求。

upgrade-insecure-requests 指令会级联到 <iframe> 文档中，从而确保整个网页都受到保护。