如何在HTTPS 网页中引入HTTP资源： Mixed Content？

发布于
2016-07-04

HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。

参考了这篇文章：https页面中引入http资源的解决方式，但依然没有解决问题。

方法1：相对协议。
对于同时支持HTTPS和HTTP的资源，引用的时候要把引用资源的URL里的协议头去掉，浏览器会自动根据当前是HTTPS还是HTTP来给资源URL补上协议头的，可以达到无缝切换。
方法2：iframe方式
使用iframe的方式引入HTTP资源，然后将这个页面嵌入到HTTPS页面里就可以了，

PS..我的博客是用的github+hexo搭建的,博客地址默认为https://开头，引用的http资源，没有https型。

问题1：
在博客中引入优酷视频，采用的是iframe形式，如下：

<div class="video_content">
    <iframe height=148 width=220 src="http://player.youku.com/embed/XMTU4MTY4OTg5Mg==" frameborder=0 allowfullscreen></iframe>
</div>

但无法打开这个视频，chrome浏览器下提示错误：

Mixed Content: The page at 'https://xifengxx.github.io/web-demo/imooc/index.html' was loaded over HTTPS, but requested an insecure resource 'http://player.youku.com/embed/XMTU4MTY4OTg5Mg=='. This request has been blocked; the content must be served over HTTPS.

问题2：
博客中,通过Ajax引入了http资源，也是无法顺利访问，chrome浏览器下提示错误：

jquery.min.js:4 Mixed Content: The page at 'https://xifengxx.github.io/web-demo/music-APP/index.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.jirengu.com/fm/getChannels.php'. This request has been blocked; the content must be served over HTTPS.

这样的问题，如何解决呢？

https mixed-content

阅读 243.5k

6 个回答

得票最新

a651523696

12821

发布于
2016-07-19

可以在相应的页面的<head>里加上这句代码，意思是自动将http的不安全请求升级为https

详情可以参考这里：http://thehackernews.com/2015/04/disable-mixed-content-warning.html

skycyclone

221

发布于
2019-01-18

如果目标有https资源,就是用https方式能打开连接，可以直接用相对路径例如//baidu.com，如果不想改，而且确定连接有https资源，也可以用楼上的<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">，不过如果目标本身没有https资源，无论你用jsonp还是meta标签还是相对路径都无法解决的，唯一能解决的方法是自己在后端抓取目标页面的内容然后以https形式输出给前端，就像代理页一样，不过这样影响效率，如果是api接口类可以尝试，如果是图片视频类恐怕比较慢