在现在互联网上，大多数的网站都是使用HTTPS协议。如果在HTTPS协议的页面中，请求了HTTP的资源，就被浏览器识别为HTTPS安全内容和HTTP不安全内容混合在一起，这种情况浏览器可能会阻止页面显示或显示一个警告信息。
比较旧版本的浏览器可能只是一个提示，不允许在https页面中使用http资源，但是现在大多数高版本的浏览器都直接报错Mixed Content，这就导致页面内容无法加载和显示。
什么是Mixed Content
首先，我们来了解一下MDN关于Mixed Content的解释：
When a user visits a page served over HTTPS, their connection with the web server is encrypted with TLS and is therefore safeguarded from most sniffers and man-in-the-middle attacks. An HTTPS page that includes content fetched using cleartext HTTP is called a mixed content page. Pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers. That leaves the pages unsafe.
用谷歌翻译一下其意思如下：
当用户访问通过HTTPS提供的页面时，他们与 Web 服务器的连接使用TLS 进行加密，因此可以防止大多数嗅探器和中间人攻击。包含使用明文 HTTP 获取的内容的 HTTPS 页面称为混合内容页面。像这样的页面只是部分加密，使嗅探器和中间人攻击者可以访问未加密的内容。这使页面不安全。
不过也不是页面中所有http资源都被会禁用，大致分为两种：mixed passive content和mixed active content。
| 类型 | 常用的几个使用场景 |
|---|---|
| mixed passive content | <img>、<audio>、<video>、<object> |
| mixed active content | <script>、 <link> 、<iframe> 、XMLHttpquest 、fetch() |
两者不同主要是根据其对用户威胁程度不同：，在mixed passive content威胁较低（页面可能包含误导性内容，或者用户的 cookie 可能被盗）。mixed active content ，威胁可能导致网络钓鱼、敏感数据泄露、重定向到恶意站点等。
大多少浏览器直接阻止mixed active content，有部分浏览器会阻止mixed passive content。
如何解决？
考虑到安全问题，浏览器禁止这样使用是很正常的。为了能正常使用，我们还是需要把网站中的所有资源都升级到https。但是，有些资源是第三方提供，我们无法控制时，这种情况我们怎么处理呢。
以下将结合网上的一些解决办法对这种情况进行说明。
1. 页面中添加meta
在html页面头部添加以下meta信息
1 | <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> |
这个meta是用于定义浏览器在本页面中的内容安全策略（CSP），值upgrade-insecure-requests的作用表示对页面中资源请求自动升级为https。比较适合页面中有太多资源的url是http协议。
注意：如果本身js/css等资源不支持https，添加该项meta并不会生效。
2. 浏览器启用Mixed Content混合内容
假如这个第三方资源只提供http的请求，并不支持https进行请求时。我们可以通过浏览器的设置进行允许混入内容，这样就可以支持第三方http资源正常执行和显示。不过不同浏览器设置有所不同，以下根据谷歌浏览器，火狐浏览器和Edge浏览器进行说明。
谷歌浏览器设置方式1
首先，点击地址栏上的小锁，在弹出的小窗选择网站设置
然后，在“不安全内容”配置项选择“允许”，重新刷新页面后就iframe嵌入的页面内容就显示出来。
刷新后结果如下：
大的问题暂时是解决了，起码页面已经显示出来，交互也没有障碍，不过还存在几个小问题需要注意：
- 左上角的绿色小锁已经变成红色叹号警告，说明是不安全
- 控制台输出很多警告，也就是之前错误阻止变成输出警告
- 这个设置仅针对当前网站的页面，如果换另一个网站，还需要再针对那个网站设置一次
谷歌浏览器设置方式2
谷歌浏览器还有另一种设置方式，通过给定谷歌浏览器启动参数进行设置。
首先，退出浏览器，即关闭浏览器的所有窗口。
然后，右击桌面谷歌浏览器图标选择“属性”，并在目标这一项中，追加启动参数--allow-running-insecure-content。
注意：参数与前一项启动参数有空格隔开，而且是追加该参数，如果有其他启动参数也不要删除
如下图所示，图中是没有其他的启动参数的情况
配置完成点击确定后，重新打开网站进入就可以显示出来，也都不需要去网站配置中允许”不安全内容”。因为这一项已经在启动参数中
火狐浏览器
首先，在 Firefox 的地址栏中输入 about:config并回车
然后，在搜索栏中，输入mixed进行过滤，本地没有火狐浏览器，借用一下网上的图
然后双击列表中的写着security.mixed_content.block_active_content的项，让其值显示为false即可。
重新刷新页面就可以显示正常。
Edge浏览器
Edge浏览器的设置方式与谷歌浏览器设置方式1基本类似，选择此网站的权限后，在“不安全内容”配置项选择“允许”即可。
浏览器修改配置固然可以解决https页面中允许http请求，但是浏览器都在用户电脑上，我们不可能让每个用户在访问网站前都按照以上设置操作一遍先。因此，修改浏览器配置可以用作临时方案，但不能作为长久方案。
3. 后台服务器代理
既然不能在浏览器解决，那就只能在服务器端去解决。
我们把第三方资源请求做特殊处理并替换host为本站的host，当这个请求发送到我们的服务器后，再处理url代理转发到第三方站点。这样用户也无须考虑浏览器配置问题，同样页面也不会出现用浏览器方式解决后还出现的几个小问题。
以远程代理服务器使用nginx为例
1 | location /fanyi/ { |
修改页面地址为https://www.panyanbin.com/fanyi/?from=bdmore。
这样总体逻辑是走通了，来看一下页面结果如下：
内容是返回了，不过其他资源却是404失败，这是由于页面内的其他js资源不是使用相对当前页面路径，而是使用网站根路径。
因此不能使用目录/fanyi/进行代理，必须使用根路径/，但是我这个域名本身也有资源，所以最佳方式是换用另一个支持https的域名进行/代理即可，之后就不调试了，大致逻辑是没问题的。
小结
大概总结一下以上几种方式
- meta方式必须资源支持https才行，因为此功能仅是自动升级为https请求
- 浏览器配置方式比较适合解决临时紧急的解决方案，不适应让站点用户来配置使用
- 代理方式比较推荐使用，基本与正常站点访问没差别
无论那种方式都好，最好的解决办法是站点资源和第三方资源都支持https，这样就不会出Mixed Content错误。