修复混合内容

Jo-el van Bergen
Jo-el van Bergen
X - Web开发指南
Rachel Andrew

为您的网站支持 HTTPS 是保护您的站点和用户免受攻击的重要步骤，但混合内容可能会使这种保护措施失效。正如什么是混合内容？中所解释的，浏览器将越来越多地阻止不安全的混合内容。

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

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

在 Google Chrome 中访问 HTTPS 页面时，浏览器会在 JavaScript 控制台中将混合内容作为错误和警告提醒您。

在什么是混合内容？中，您可以找到许多示例，并了解这些问题在 Chrome DevTools 中的报告方式。

被动混合内容的示例将给出以下警告。如果浏览器能够在 https URL 找到内容，它会自动升级，然后显示一条消息。

Chrome DevTools showing the warnings displayed when mixed content is detected and upgraded

主动混合内容被阻止并显示警告。

Chrome DevTools showing the warnings displayed when active mixed content is blocked

如果您在您的网站上发现类似这些关于 http:// URL 的警告，您需要在您网站的源代码中修复它们。创建一个这些 URL 的列表以及您在哪个页面上找到它们的页面，以便在修复它们时使用，这将很有帮助。

在您的站点中查找混合内容

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

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

修复混合内容

一旦您在您网站的源代码中找到混合内容，您可以按照以下步骤修复它。

如果您收到一条控制台消息，指出资源请求已从 HTTP 自动升级到 HTTPS，您可以安全地将代码中资源的 http:// URL 更改为 https://。您还可以通过在浏览器 URL 栏中将 http:// 更改为 https:// 并尝试在浏览器选项卡中打开 URL 来检查资源是否安全可用。

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

  • 如果可以从不同的主机获取资源，则从不同的主机包含资源。
  • 如果您在法律上被允许这样做，则直接下载内容并将其托管在您的站点上。
  • 完全从您的站点中排除资源。

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

注意非标准标签用法

注意您站点上的非标准标签用法。例如，锚 (<a>) 标签 URL 不会导致混合内容错误，因为它们会导致浏览器导航到新页面。这意味着它们通常不需要修复。但是，某些图像库脚本会覆盖 <a> 标签的功能，并将 href 属性指定的 HTTP 资源加载到页面上的灯箱显示中，从而导致混合内容问题。

大规模处理混合内容

上述手动步骤对于较小的网站效果很好；但对于大型网站或具有许多独立开发团队的网站，跟踪所有正在加载的内容可能很困难。为了帮助完成这项任务，您可以使用内容安全策略来指示浏览器通知您有关混合内容的信息，并确保您的页面永远不会意外加载不安全资源。

内容安全策略

内容安全策略 (CSP) 是一项多用途浏览器功能，您可以使用它来大规模管理混合内容。CSP 报告机制可用于跟踪您站点上的混合内容，并提供强制策略，通过升级或阻止混合内容来保护用户。

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

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

您可以使用内容安全策略来收集您站点上混合内容的报告。要启用此功能，请通过将 Content-Security-Policy-Report-Only 指令添加为您站点的响应标头来设置它。

响应标头

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

每当用户访问您站点上的页面时，他们的浏览器都会将 JSON 格式的报告发送到 https://example.com/reportingEndpoint，其中包含有关任何违反内容安全策略的内容。在这种情况下，每当通过 HTTP 加载子资源时，都会发送一份报告。这些报告包括发生策略违规的页面 URL 和违反策略的子资源 URL。如果您配置您的报告端点来记录这些报告，您可以跟踪您站点上的混合内容，而无需自己访问每个页面。

对此有两点需要注意

  • 用户必须在理解 CSP 标头的浏览器中访问您的页面。大多数现代浏览器都是如此。
  • 您只会收到用户访问的页面的报告。因此，如果您有流量不大的页面，可能需要一段时间才能收到您整个站点的报告。

内容安全策略指南包含更多信息和一个示例端点。

CSP 报告的替代方案

如果您的站点是由 Blogger 等平台为您托管的，您可能无权修改标头并添加 CSP。相反，一个可行的替代方案可能是使用网站抓取工具来为您查找您站点上的问题，例如 HTTPSChecker 或 Mixed Content Scan。

升级不安全请求

浏览器支持

  • Chrome: 44.
  • Edge: 17.
  • Firefox: 48.
  • Safari: 10.1.

来源

浏览器开始升级和阻止不安全请求。您可以使用 CSP 指令来强制自动升级或阻止这些资源。

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

例如，如果页面包含带有 HTTP URL 的图像标记，例如 <img src="http://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> 文档中，确保整个页面都受到保护。