解决网页中Mixed Content问题
小象Web开发2020-07-27 18:06
在Web开发中，作为开发者我们无可避免地需要引入资源文件，或者需要发起Ajax请求。在这个过程中，浏览器的开发者工具有时候会提醒我们当前网页中存在 Mixed Content，如图所示：
上图中显示的是警告信息，而资源还是被浏览器成功引入了，所以不是特别大的问题。
而如果出现了如下报错信息，则情况则没那么乐观了：
红色报错信息告诉我们资源加载失败了，它们不会被浏览器加载并处理。当发生这种情况时，意味着你的网站或者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 中的以下混合内容错误用作示例：
下面是在源代码中找到的内容：
第 1 步
通过在您的浏览器中打开一个新标签，在地址栏中输入网址，然后将 http:// 更改为 https://，检查该网址是否可通过 HTTPS 提供。
如果通过 HTTP和 HTTPS 显示的资源相同，则一切正常。 继续执行第 2 步。
如果您看到证书警告，或内容无法通过 HTTPS显示，则意味着无法安全地获取资源。
无法通过HTTPS获取
证书警告这种情况下，你应考虑以下其中一个方案：
从另一个主机添加此资源文件。在你自己的网站存放该资源文件。将此资源从网站上完全删除。第 2 步
将网址从 http:// 更改为 https://，保存源文件，并在必要时重新部署更新文件。
第 3 步
查看最初发现错误的页面，验证并确保该错误不再出现。
举报/反馈
0
0
收藏
分享
