解决网页中Mixed Content问题

野性酷女 2023-10-04 23:54 20阅读 0赞

在Web开发中，作为开发者我们无可避免地需要引入资源文件，或者需要发起Ajax请求。在这个过程中，浏览器的开发者工具有时候会提醒我们当前网页中存在 Mixed Content，如图所示：

![5edd0295201c57773f1b40bec7980075.png][]

上图中显示的是警告信息，而资源还是被浏览器成功引入了，所以不是特别大的问题。

而如果出现了如下报错信息，则情况则没那么乐观了：

![ea7c002c45b11db4aed9642762b040b4.png][]

红色报错信息告诉我们资源加载失败了，它们不会被浏览器加载并处理。当发生这种情况时，意味着你的网站或者Web应用不能正常运行了，必须马上处理。

#### 什么是Mixed Content？ ####

Mixed Content（混合内容）出现于如下场景：HTML页面是通过HTTPS加载的，但是其他资源文件（如图片，视频，样式表文件，脚本）是使用HTTP方式加载的。之所以称为混合内容，是因为在一个网页中同时使用了HTTP和HTTPS，而最初的请求方式为 HTTPS。

现代浏览器可能会阻止此类内容，或者显示关于此类内容的警告，提醒用户此页面包含不安全的内容。阻止混合内容的浏览器可能会首先尝试将该内容的连接从HTTP “升级”到HTTPS。

#### Mixed Content 分类 ####

混合内容可以划分为两种：主动混合内容和被动混合内容

被动混合内容指的是不与页面其余部分进行交互的内容，从而使中间人攻击在拦截或更改该内容时能够执行的操作受限。被动混合内容包括图像、视频和音频内容，以及无法与页面其余部分进行交互的其他资源。

例如：

img 标签的 src 属性

audio 标签的 src 属性

video 标签的 src 属性

object 标签

主动混合内容作为整体与页面进行交互，并且几乎允许攻击者对页面进行任何操作。 主动混合内容包括浏览器可下载和执行的脚本、样式表、iframe、flash 资源及其他代码。

例如：

script 标签的 src 属性

link 标签的 href 属性

iframe 的 src 属性

XMLHttpRequest 请求

fetch() 请求

在CSS中可以使用url的情况（如 @font-face,cursor,background-image等）

object 标签的 data 属性

navigator.sendBeacon() 请求

#### 如何解决混合内容问题？ ####

借助于现代浏览器的开发者工具，我们可以快速定位出有问题的混合内容。例如，在Chrome浏览器中打开开发者工具，然后切换到 Console 即可看到页面中的警告或者报错信息。

在找出混合内容在网站源代码中的位置后，按照下面的步骤进行修正。

将 Chrome 中的以下混合内容错误用作示例：

![62efd0479ce9d6aed97b0f48ad7b70df.png][]

下面是在源代码中找到的内容：

![690fe0cc25e1bb46982573189396711e.png][]

**第 1 步**

通过在您的浏览器中打开一个新标签，在地址栏中输入网址，然后将 http:// 更改为 https://，检查该网址是否可通过 HTTPS 提供。

如果通过 HTTP和 HTTPS 显示的资源相同，则一切正常。 继续执行第 2 步。

如果您看到证书警告，或内容无法通过 HTTPS显示，则意味着无法安全地获取资源。

![9a8e0625b0a725bd9ce7d2c5062f6d0a.png][]

![55c34f74ae5c100cceae3c33120b8acf.png][]

这种情况下，你应考虑以下其中一个方案：

1.从另一个主机添加此资源文件。

2.在你自己的网站存放该资源文件。

3.将此资源从网站上完全删除。

**第 2 步**

将网址从 http:// 更改为 https://，保存源文件，并在必要时重新部署更新文件。

**第 3 步**

查看最初发现错误的页面，验证并确保该错误不再出现。

[5edd0295201c57773f1b40bec7980075.png]: https://img-blog.csdnimg.cn/img_convert/5edd0295201c57773f1b40bec7980075.png
[ea7c002c45b11db4aed9642762b040b4.png]: https://img-blog.csdnimg.cn/img_convert/ea7c002c45b11db4aed9642762b040b4.png
[62efd0479ce9d6aed97b0f48ad7b70df.png]: https://img-blog.csdnimg.cn/img_convert/62efd0479ce9d6aed97b0f48ad7b70df.png
[690fe0cc25e1bb46982573189396711e.png]: https://img-blog.csdnimg.cn/img_convert/690fe0cc25e1bb46982573189396711e.png
[9a8e0625b0a725bd9ce7d2c5062f6d0a.png]: https://img-blog.csdnimg.cn/img_convert/9a8e0625b0a725bd9ce7d2c5062f6d0a.png
[55c34f74ae5c100cceae3c33120b8acf.png]: https://img-blog.csdnimg.cn/img_convert/55c34f74ae5c100cceae3c33120b8acf.png