https页面加载http资源的解决方案

      http协议首部字段  Content-Security-Policy （csp）中的block-all-mixed-content指令在当前页面为通过https协议加载的情况下禁止通过http渠道加载任何资源，任何混合类型的资源请求都是被禁止的，包括混合活动内容和混合被动内容，这条也适用于<iframe>中的文档，确保整体页面都不包括混合内容

      https是http over secure socket layer以安全为目标的http通道，所以https的页面上不允许出现http请求，如果在https的页面需要加载http的资源，浏览器会认为这是不安全的资源，将会默认阻止，导致js不加载页面出现报错，样式不加载，图片不展示等问题， 

 

https页面加载http资源解决办法：

• 将http自动升级为https

               https页面加载http资源被称为混合内容，所以在https页面访问http资源，可以在页面的header中加入：

               <meta  http-equiv = 'Content-Security-Policy'  content = 'upgrade-insecure-requests'>

               Upgrade Insecure Requests 是用来解决让浏览器自动升级请求，upgrade-insecure-requests 指令指示客户端将该站点的所有不安全URL（通过HTTP提供的URL）视为已被替换为安全URL（通过HTTPS提供的URL），该指令适用于需要重写大量不安全的旧版URL的网站，会在block-all-mixed-content之前执行，如果前者执行成功后者就不再发挥任何作用，推荐的做法是设置二者之一，不能同时设置

 

• 使用资源协议自适配 

               不指定具体协议，使用资源协议自适配，删除链接中的http:  如，当前为https页面，那么就是https资源，如果是http页面，那么就是http资源

               <script  src = '//cdn.xxx/xxx.min.js'></script>

 

 

• 使用iframe嵌入到https页面

               使用iframe的方式引入http资源，如：在https里面播放视频，可以现在一个http的页面里面播放，然后将这个页面嵌入到https里面

               或者：在https页面里面通过ajax的方式请求http资源，Chrome浏览器是不允许直接ajax请求的，如果两个页面的内容可以控制的话，当前窗口可以通过iframe进行通信

               <iframe  height = 148  width = 220  src = "http://xxx/xxx.mp4"  frameborder = 0  allowfullscreen></iframe>