浏览器报错 Mixed Content

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

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

Mixed Content 分类（主动混合内容和被动混合内容）

主动混合

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

例如：
　　script 标签的  src 属性
　　link   标签的  href 属性
　　iframe    的  src 属性
　　XMLHttpRequest  请求
   fetch()         请求
   在CSS中可以使用url的情况（如 @font-face,cursor,background-image等）
   object 标签的 data 属性
   navigator.sendBeacon() 请求

被动混合

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

例如：

img 标签的 src 属性
audio 标签的 src 属性
video 标签的 src 属性
object 标签

解决Mixed Content问题办法

第一种：修改报错页的头部

代码的head头中，加入如下配置：
<meta http-equiv='Content-Security-Policy' content='upgrade-insecure-requests'>

## 这行代码的作用是，告诉浏览器，网页中所有的HTTP链接，都自动升级成为HTTPS去访问。至于是否能够访问成功，就要看对方服务器的支持程度了。就算浏览器采用HTTPS的方式去访问失败，最多也只是对应的内容不能使用或显示，再业不会出现三角形告警了。

第二种：修改响应头

添加在响应头中，add_header Content-Security-Policy "upgrade-insecure-requests"