修正混合内容

Jo-el van Bergen
Jo-el van Bergen
X
Rachel Andrew

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

在本指南中，我们将演示用于解决现有混合内容问题并防止出现新问题的技术和工具。

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

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

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

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

Chrome 开发者工具，显示在检测到混合内容并进行升级时显示的警告

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

Chrome 开发者工具，其中显示了屏蔽主动混合内容时显示的警告

如果您在网站上发现针对 http:// 网址的警告，则需要在网站的源代码中修正这些警告。列出这些网址及其所在页面有助于您稍后修正它们。

查找网站中的混合内容

您可以在源代码中直接搜索混合内容。在源代码中搜索 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）。

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

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

响应标头：

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

无论用户在何时访问网站上的页面，其浏览器都会向 https://example.com/reportingEndpoint 发送有关任何违背内容安全政策的内容的 JSON 格式报告。在此情况下，任何时候通过 HTTP 加载子资源，浏览器都会发送报告。这些报告包括出现违规问题的网页网址以及违反政策的子资源网址。 如果您将报告端点配置为记录这些报告，则可以跟踪网站上的混合内容，而无需自己访问每个页面。

对此，需要注意以下两点：

  • 用户必须在可识别 CSP 标头的浏览器中访问您的页面。这对于大多数现代浏览器都适用。
  • 您只会获得用户访问的网页的报告。 因此，如果您的某些网页的流量不太高，则可能需要一段时间才能获得整个网站的报告。

如需了解详情和端点示例，请参阅内容安全政策指南。

CSP 报告的替代方案

如果您的网站由某个平台（如 Blogger）代为托管，那么，您可能没有相应权限来修改标头和添加 CSP。一个可行的替代方案是使用 HTTPSChecker 或混合内容扫描等网站抓取工具代您查找您的网站中的问题。

升级不安全的请求

浏览器支持

  • Chrome：44.
  • Edge：17.
  • Firefox：48.
  • Safari：10.1。

来源

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

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

例如，如果某个网页包含一个带有 HTTP 网址（例如 <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> 文档中，确保整个页面受到保护。