让您的网站支持 HTTPS 是保护您的网站和用户免受攻击、 但混合内容会使这项保护措施变得毫无用处。 浏览器会屏蔽越来越不安全的混合内容,如什么是混合内容?中所述。
在本指南中,我们将介绍解决现有混合内容问题的技术和工具 并防止出现新问题
通过访问您的网站查找混合内容
在 Google Chrome 中访问 HTTPS 网页时, 浏览器会在 JavaScript 控制台中以错误和警告的形式提醒您存在混合内容。
在什么是混合内容?部分, 您可以找到许多示例,并了解 Chrome 开发者工具中的问题报告方式。
被动混合内容示例将显示以下警告。
如果浏览器能够在 https
网址中找到相关内容,它会自动升级该内容,然后显示一条消息。
![Chrome 开发者工具在检测到混合内容并进行升级时显示警告](https://web.developers.google.cn/static/articles/fixing-mixed-content/image/passive-mixed-content.jpeg?authuser=0000&hl=sk)
主动混合内容会被屏蔽,并显示警告。
![Chrome 开发者工具在主动混合内容被屏蔽时显示警告](https://web.developers.google.cn/static/articles/fixing-mixed-content/image/chrome-devtools-showing-7a65755cae4b8.jpg?authuser=0000&hl=sk)
如果您在自己的网站中发现针对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
标头。
此外,您还可以设置 Content-Security-Policy
在网页的 <head>
部分中使用 <meta>
标记(但不是 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
。
在这种情况下,每当通过 HTTP 加载子资源时,系统都会发送报告。
这些报告包括存在违规问题的网页网址和违反政策的子资源网址。
如果您将报告端点配置为记录这些报告,
您可以跟踪网站上的混合内容,而无需自己访问每个网页。
对此有两点需要注意:
- 用户必须在可识别 CSP 标头的浏览器中访问您的页面。这对于大多数现代浏览器都是如此。
- 您只会获得用户访问的网页的报告。 因此,如果您的某些网页的流量不太高 您可能需要等待一段时间才能获得整个网站的报告。
内容安全政策 指南中提供了更多信息,还提供了一个示例端点。
CSP 报告的替代方案
如果您的网站是由 Blogger 等平台托管, 您可能无权修改标头和添加 CSP。 相反,一种可行的替代方案是使用网站抓取工具为您找出网站中的问题,例如 HTTPSChecker 或 混合内容扫描。
升级不安全的请求
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
浏览器开始升级并阻止不安全的请求。 您可以使用 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
或者,通过内嵌方式将同一指令嵌入到文档的 <head>
中
部分:<meta>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
与浏览器自动升级一样,如果资源无法通过 HTTPS 获得
升级后的请求失败,且未加载资源。
这样做可以保证您网页的安全。upgrade-insecure-requests
指令的适用范围大于浏览器自动升级,
升级请求。
upgrade-insecure-requests
指令级联到 <iframe>
文档中,
确保整个网页都受到保护