如何解决Gravatar引发的登录状态下SSL混合内容问题？

这个问题我碰到过好多次，本质就是混合内容触发了浏览器的安全机制：你的网站是HTTPS加密的，但登录状态下加载了HTTP协议的Gravatar头像，浏览器直接判定页面不安全，所以绿色SSL锁就消失了；退出登录后不加载用户头像，自然就没这个问题。

最快的修复方法：强制HTTPS请求Gravatar #

直接把你代码里Gravatar的URL从 http://gravatar.com/avatar/... 改成下面两种形式之一：

• 固定HTTPS：https://gravatar.com/avatar/...
• 协议相对URL：//gravatar.com/avatar/...（推荐，会自动适配当前页面的协议，不管是HTTPS还是HTTP都能用）

举个实际代码的修改例子：
原来的头像代码可能是这样：

<img src="http://gravatar.com/avatar/b87daeb6292d165f7bd8db0dbb2e0a8b?s=400&d=identicon" alt="用户头像">

改成协议相对URL后：

<img src="//gravatar.com/avatar/b87daeb6292d165f7bd8db0dbb2e0a8b?s=400&d=identicon" alt="用户头像">

如果用了CMS/框架，直接改配置就行 #

要是你用的是WordPress、Drupal这类CMS，或者Laravel、Rails这类框架，大概率有现成的配置项可以开启HTTPS头像：

• WordPress：可以在主题设置里找「头像设置」，或者加一段代码到functions.php强制转换：

  add_filter('get_avatar_url', function($url) {
      return preg_replace('/^http:/', 'https:', $url);
  });
  

• 其他框架：查一下官方文档里关于Gravatar的配置，一般都有secure或https开关，打开就行。

彻底解决：本地缓存头像（可选） #

如果你不想依赖第三方资源，或者担心Gravatar服务不稳定影响网站，可以把用户的Gravatar头像下载到自己的服务器，从本地HTTPS路径加载。不过这个需要写点代码处理头像的下载和更新，适合有一定开发能力的同学。

验证是否修复成功 #

改完之后按F12打开浏览器开发者工具，切到「控制台」标签，刷新页面，如果看不到「混合内容」的警告，地址栏的绿色SSL锁也回来了，那就搞定了！

内容的提问来源于stack exchange，提问作者Femi