混合内容

当网页从安全来源加载，通过安全通道（例如 HTTPS）时，与 Web 服务器的连接会被加密，因此受到保护，不会被中间人攻击窃听或修改。如果安全加载的网页仅包含也托管在安全来源上的图像、脚本和其他资源，则用户可以确信整个页面都免受此类攻击。

“混合内容”指的是安全加载的网页使用通过 HTTP 或其他不安全协议获取的资源。这种网页可能不安全，因为任何以不安全方式发送的资源都可能被查看，可能会泄露敏感信息，并且/或者被攻击者修改。脚本特别危险，因为它们可以修改页面的任何方面，但所有类型的资源都存在一定的风险。例如，可以修改图像以向用户提供虚假或误导性信息，或更改按钮的明显功能。

“混合下载”指的是从安全上下文中启动，但通过不安全连接获取的资源下载。这些与混合内容具有相同的风险：下载似乎来自安全来源，但可能在传输过程中已被修改或查看。

您应该避免在您的网站中使用混合内容和混合下载！浏览器通过自动将图像、视频和音频混合内容请求从 HTTP 升级到 HTTPS 来降低混合内容的风险，并阻止所有其他资源类型的不安全请求。默认情况下，它们还应阻止混合下载。

混合内容的类型

网页中的混合内容分为两类：“可升级内容”和“可阻止内容”。浏览器应自动将可升级内容的请求从 HTTP 升级到 HTTPS，并阻止可阻止内容的请求。

这种方法确保安全上下文中的所有内容要么通过安全通道加载，要么被阻止，这比显示安全和不安全内容的混合更安全，并且比通过阻止所有不安全内容来破坏网页的干扰更小。

注意：早期版本的规范将混合内容分为“可阻止”和“可选阻止”类别

可阻止内容类型，也称为“活动混合内容”，是指可以修改网页其他部分的内容，例如脚本和样式表。如果这些文件被修改，潜在的风险非常高，浏览器需要阻止它们。
可选阻止内容类型，也称为“被动混合内容”，是指不能修改网页中其他内容的内容，例如图像、视频和音频文件。允许这些文件的潜在风险较低，因此浏览器可以选择阻止或显示它们，或者将决定权交给用户。

构成“可升级内容”的资源类型集是从“可选阻止”混合内容集中提取的。预期任何新的文件类型都将被定义为可阻止内容，并且某些可升级内容将来可能会变成可阻止内容。

可升级内容

可升级内容请求是指不安全的请求将通过将源方案从http修改为https自动升级为安全请求。远程服务器将响应资源，或响应状态代码指示未找到资源。

此类别中的资源类型是阻止请求会冒着破坏 Web 大部分内容的风险的资源类型。这些目前对应于以前“可选阻止”的混合内容类型，因为这些类型仍在某些网站上使用。

以下元素是可升级的（除非 URL 主机被指定为 IP 地址 - 请参阅下一节）

<img> 其中源通过src属性设置，包括 SVG 文档（但不在使用srcset或<picture>设置资源时）。
CSS 图像元素，例如：background-image、border-image等。
<audio> 其中源通过src属性设置。
<video> 其中源通过src属性设置
<source> 其中设置了视频或源资源。

可阻止内容

可阻止内容被定义为“所有不可升级的混合内容”。

这包括以下元素产生的 HTTP 请求（此列表不详尽）

<script> 其中源通过src属性设置
<link> 其中源在href属性中设置，并包含样式表
<iframe> 其中源通过src属性设置
fetch() 请求
XMLHttpRequest 请求
CSS 中所有使用url()值的情况（@font-face、cursor、background-image等）。
<object>（data属性）
Navigator.sendBeacon（url属性）
<img> 其中源通过srcset或<picture>设置。
网页字体

如果 URL 的主机是 IP 地址而不是域名，则会阻止原本可升级的混合内容请求。因此，<img src="http://example.com/image.png">将被升级，但<img src="http://93.184.215.14/image.png">会被阻止。

混合内容请求示例

混合内容请求是从安全上下文发出的不安全资源请求

以下示例演示了安全、不安全和混合内容请求

http://insecure.com 加载 http://also.insecure.com - 不是混合内容请求，因为两个源都是不安全的。
https://secure.com 加载 http://insecure.com - 是混合内容请求，因为不安全资源http://insecure.com被加载到安全上下文https://secure.com中。
http://insecure.com 在<iframe>中加载https://secure.com，后者又加载http://also.insecure.com - 将https://secure.com加载到http://insecure.com中不是混合内容请求（加载安全上下文到不安全上下文中没有限制）。但是，将http://also.insecure.com加载到安全框架https://secure.com中是混合内容请求。
https://secure.com 嵌套一个data: URL，该 URL 加载http://insecure.com - 这是一个混合内容请求，因为https://secure.com（以及data:）被安全加载，而http://insecure.com是不安全的。

混合上下文请求也可以从安全上下文（如插件或工作线程）发出，并且将以相同的方式进行升级/阻止。

但是请注意，从安全上下文发出的导航请求，其目标是不安全的目标顶级浏览上下文，不被视为混合内容，因为它们会创建一个新的上下文，该上下文将是安全的或不安全的，独立于请求的来源。

加载本地交付的混合资源

本地资源被视为来自安全来源，就像 HTTPS 来源一样。这包括file: URL 和从环回地址（如http://127.0.0.1/或https://127.0.0.1/）访问的内容。

您可以从安全上下文中加载这些文件，并且您仍然拥有安全上下文。但是，如果本地文件通过http:加载不安全资源，则将是一个混合内容请求。

可以在浏览器兼容性部分中检查对加载本地内容的支持。

混合下载

混合下载是从安全上下文通过不安全连接进行的资源下载。它们与混合内容存在相同的问题 - 内容可能会被攻击者拦截和/或修改，并且用户不清楚在安全站点上可能会发生这种情况。

例如，以下代码定义了一个<a>元素，可用于下载不安全来源http://example.com/上的页面。如果此代码位于通过 HTTPS 提供服务的页面中，则保存链接会导致混合下载。

html

<a href="http://example.com/" download>Download</a>

浏览器应该阻止混合下载，并且安全站点不应包含它们。

注意：浏览器通常默认阻止混合下载，但会通知用户风险并允许他们保留或放弃下载。

开发者控制台

当混合内容被升级或阻止时，开发者控制台会显示警告。这些可以用来调试和修复网站中的混合内容。

下面的屏幕截图显示了在 Firefox 上升级图像时控制台的警告（Chrome 也有类似的警告）。

Screen shot of the web console displaying upgrade warning for mixed content image.

在仍然显示“可选可阻止”内容的浏览器版本中，会使用一个图标来指示显示内容中存在混合内容，同时也会显示控制台警告。下面的屏幕截图显示了 Firebox 开始支持可升级混合内容时的图标和控制台警告。

Screen shot of the web console displaying display warning for mixed content image.

修复混合内容问题

避免混合内容问题最佳策略是将所有内容都作为 HTTPS 提供。

将您域名下的所有内容都作为 HTTPS 提供。
将对您域名下托管的资源的所有引用都更改为相对链接或 HTTPS 链接，包括下载链接。
如果使用其他网站上的资源，请使用 HTTPS 版本（如果可用）。大多数网站都提供共享资源的 HTTPS 版本。通常，最简单的方法是将所有 http:// 链接替换为 https://，然后使用诸如 linkchecker 之类的工具来验证所有链接是否都能正常工作。

有多种方法可以验证您的网站是否没有混合内容，包括

导航到您的网站，并检查浏览器的开发者控制台中是否存在混合内容警告。
禁用浏览器中的所有混合内容，并测试页面是否按预期工作。这是 Safari 的默认设置，但大多数浏览器都支持某种阻止所有混合内容的机制（请参阅兼容性数据）。
使用基于桌面的网络爬虫，如 HTTPSChecker，或 CLI 工具，如 mcdetect，递归检查您的网站并查找指向不安全内容的链接。
使用在线工具，如 Mixed Content Checker 来检查您的网站。

规范

规范
混合内容 # 简介

浏览器兼容性

BCD 表格仅在启用

另请参阅

CSP: upgrade-insecure-requests 将所有请求升级到 HTTPS，包括可阻止的混合内容