整站启用 HTTPS 后,如果引入了 HTTP 的资源,该资源将无法正常显示

整站启用 HTTPS 后,如果页面中引入(采用< iframe>方式) 了 HTTP 的资源,该资源将无法正常显示。可能在部分低版本的浏览器还能显示出来,高版本的浏览器就会显示为空白了,范例如下图▼:

整站启用 HTTPS 后,如果引入了 HTTP 的资源,该资源将无法正常显示-正解网

哪些情况下的引用会造成无法显示呢?具体可以看下表:

HTTPS 与 HTTP 资源互相引用时的状态表

page protocolresource protocolresource status
httphttpallowed
httphttpsallowed
httpshttpnot allowed
httpshttpsallowed
httpshttps insecure scriptsnot allowed
httpshttps inscure imagesallowed but the browser will warn

这种情况如何解决

我们在网上找到了 N 种办法,经过一一尝试,发现都不是正解。

从这个测试结果来看,HTTPS 果真是很安全,只要是非安全加密的资源,一律不显示,那就等于说用户看到的页面就是严实无缝的了,中间人攻击也就无从入手了。

但眼下国内支持 HTTPS 的网站还太少,这样很多网站的内容我们就无法引用了(尤其是视频类)。如果我们引用的网站页面一直都没支持 HTTPS ,那我们应该怎么办?

经过分析,发现目前有两个方法是可以尝试的:

方法一

在同类的支持 HTTPS 的网站中寻找替代资源。例如说视频类资源,因为优酷、土豆、爱奇艺等都没支持 HTTPS ,想引用其中的某个视频,那就可以去已整站支持 HTTPS 的腾讯视频找一下有没有同样的视频资源,如果有,就可以引用过来了。

方法二

尝试与对方合作,由对方授权提供资源源文件 URL,然后在页面上使用。例如说视频类资源,由对方提供 .mp4 或 .flv 的源文件资源链接,在我们自己网站上使用 <video> 等方式来播放。使用这种方法的话,对方的贴片广告就无法展示的了,因此一定是要经过对方授权才可以做,否则就是「盗链」侵权行为了,这要承担法律责任的。

范例:

豆瓣电影:https://m.douban.com/movie/trailer/212262,其视频引入方法如下图▼:

整站启用 HTTPS 后,如果引入了 HTTP 的资源,该资源将无法正常显示-正解网

  • 备注说明:整站启用了 HTTPS 之后,如果某个页面上含有 HTTP 的资源,该页在浏览器中就不会显示出正常的 HTTPS 标识。例如,上图▲中 Chrome 浏览器不显示出正常的绿色锁图标,而是显示出一个 ⓘ 图标。

期望

现在网站、APP 频频爆出中间人劫持广告、挂马等恶意行为,用户苦不堪言,开发者也是痛苦不堪,真的很迫切地需要整个行业的企业、开发者共同拥抱 HTTPS 安全连接技术。尤其是拥有大量用户、大量内容资源的大厂,更应该承担起这一份责任。真心期望互联网行业的从业者给予「安全」二字本来应有的重视。

修改