让多说评论框完美支持HTTPS

使用多说评论框一段时间了,刚开始的时候就发现它并不是完美支持HTTPS,部分静态资源还是用的HTTP。经过了几个版本的迭代,多说自身的静态资源已经全部使用了HTTPS。但是评论框中引用的第三方资源如头像插图等都是HTTP资源,看来这部分是要自己手动支持一下了。

目前官方最新的稳定版本是15.4.27(查看embed.js中的j.version)。分析一下目前页面上的非HTTPS资源,主要是评论的作者头像评论中的表情。由于这些图片的服务器本身不一定支持HTTPS,所以我们需要自建一个支持HTTPS的代理服务器。

 

代理服务器的搭建

我的博客使用的是 Nginx,它本身就能提供代理的功能,也不用安装其他服务了。代理地址也有两种选择:

  • 二级域名代理,即 https://proxy.yourwebsite.com/xxx
  • 二级目录代理,即 https://yourwebsite.com/proxy/xxx

xxx为源地址。两种代理本质上没什么区别,但使用第一种的前提是网站的 SSL 证书是Wildcard,即证书上的二级域名为通配符,如下图。

1

而目前市面上能免费申请的 SSL 证书一般只支持顶级域名,所以选择第二种方式。

由于我们的代理只需要访问资源页面,所以反代的配置不用太复杂:

server {
    listen 443 ssl;

<span class="kn">...</span>
<span class="s">...</span>
<span class="s">...</span>

<span class="s">location</span> <span class="p">~</span> <span class="sr">&quot;^/proxy/(.*)$&quot;</span> <span class="p">{</span>
    <span class="kn">resolver</span> <span class="mi">8</span><span class="s">.8.8.8</span><span class="p">;</span>
    <span class="kn">proxy_pass</span> <span class="s">http://</span><span class="nv">$1</span><span class="p">;</span>
    <span class="kn">proxy_redirect</span> <span class="no">off</span><span class="p">;</span>
    <span class="kn">proxy_set_header</span> <span class="s">X-Real-IP</span> <span class="nv">$remote_addr</span><span class="p">;</span>
    <span class="kn">proxy_set_header</span> <span class="s">X-Forwarded-For</span> <span class="nv">$remote_addr</span><span class="p">;</span>
    <span class="kn">expires</span> <span class="s">7d</span><span class="p">;</span>

}

把这段代码中的location部分放到nginx配置文件中相应的位置。

修改完成后,当我们访问

https://yourwebsite.com/proxy/www.baidu.com/robots.txt

服务器接收后就会去请求

http://www.baidu.com/robots.txt

并把内容返回给我们,实现了把HTTP链接转换成HTTPS链接的需求。

修改 embed.js

搞定了代理服务器,接下来就是把评论框中的HTTP链接替换成我们的代理链接。embed.js是博客中唯一引用的多说文件,上面提到的非 HTTPS 资源都是由它插入到 DOM 树中的。

首先从多说服务器下载embed.js到网站目录,然后进行编辑。先找头像地址变量avatar_url

return e.avatar_url || nt.data.default_avatar_url

return前面插入:

if (e.avatar_url) {
    e.avatar_url = (document.location.protocol == "https:") ? e.avatar_url.replace(/^http:\/\//, "https://yourwebsite.com/proxy/") : e.avatar_url
} else {
    nt.data.default_avatar_url = (document.location.protocol == "https:") ? nt.data.default_avatar_url.replace(/^http:\/\//, "https://yourwebsite.com/proxy/") : nt.data.default_avatar_url
}
return e.avatar_url || nt.data.default_avatar_url

然后是表情链接,它存放在多说 API 接口中的message字段,所以需要对整个message进行替换。找到 713 行中的s.message,把它替换为:

((s.message.indexOf("src=&quot;http:\/\/") == -1) ? s.message : ((document.location.protocol == "https:") ? s.message.replace(/src=&quot;http:\/\//, "src=&quot;https://hack0nair.me/proxy/") : s.message))

最后把多说评论框中ds.src路径改为你的本地路径,就大功告成了。

« 返回