安全 修改图片引用地址,把 https 地址栏的叹号改为绿锁

VICTOR-LUO · 2017年02月21日 · 最后由 VICTOR-LUO 回复于 2017年02月22日 · 2026 次阅读

今年,苹果应用全面推行 https 协议的 app api,虽然并非强制,可以通过设置例外依然使用 http 协议,但是毕竟是大势所趋,全面强制推行势在必行。所以,在前期刚刚开发上线的 Rails 网站上,使用了 ssl 证书。当一切设置好后,发现 chrome 浏览器地址栏没有出现期待的绿色小锁,而是一个叹号,如下图所示:

点击叹号后,如果是 mac 版的 chrome 浏览器,并没有更加详细的说明(也许是版本问题),只是提示当前 ssl 链接不安全。

改用平板上安装的 android 版 chrome 浏览器后,点击叹号会出现如下说明信息:

继续点击「详细信息」,可以看到如下内容:

这个黄色的锁后面的内容已经可以说明问题了,出现叹号的原因是:网页中引用了非 http:// 地址的资源的资源。正好当前的网页是静态网页,里面引用了几个存储的阿里云 oss 上的图片,地址的模式是:

http://bucket.oss....

于是,把网页上引用的图片资源地址都改成https后:

https://bucket.oss....

再刷新网页,可以看到地址栏前面出现的期望的绿锁,如下图:

点击绿锁,可以看到第二条信息前面的黄锁已经变成了绿色,如下图:

共收到 6 条回复

图片的事好说,国内视频站的嵌入视频目前无解

#1楼 @jasl 我一开始以为是证书问题,而且mac版浏览器看不到说明。发现搜狐网站也有这个问题。

这个其实算是个基础知识啦,关键字是 Mixed Content(混合内容),总之尽量不要在 HTTPS 页面出现混合内容,国内的视频站的嵌入视频目前还是无解的。

参考一些资源(当然你 google 也能搜的到...)

另外得感谢国内各家 CDN 服务商还有搜索引擎开始提升 HTTPS 的支持了,你简单的给 http 后边加了个 s 就可以了就是他们的功劳啊(他们终于跟上世界步伐了)...

#3楼 @jasl 是要好好学习下,感觉学不完的东西。

#4楼 @VICTOR-LUO 还有一些可能会遇到的浏览器端安全知识,看 https://github.com/twitter/secureheaders 这项目,看它 configuration 里的每一项设置,把名字当成关键字去 google (记得去掉下划线),撸一遍,浏览器端的安全大致概念上大致就差不多了

SSL 的配置安全性检测用这个 https://www.ssllabs.com/ssltest/

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册