巧用七牛CDN的镜像功能使百度分享支持HTTPS

唉，好懒呀，好久没更新博客了。

最近搞了个 HTTPS 证书，像以前一样给博客添加了个百度分享（http://share.baidu.com/）的组件，但发现百度分享不支持 HTTPS（百度分享图标出不来，console 会提示页面有不安全的脚本元素）。看了其它几家也都不支持，搜索了下发现有人建议把百度分享所需的 js 都保存到自己本地就行了。这也是个办法，分享功能大多是抓取这个页面的 title、摘要、图片等然后起调一个页面完成分享，这些都是本地 js 文件能完成的。

看了下从百度分享获取的代码，里面主要加载了这个：http://bdimg.share.baidu.com/static/api/js/share.js，访问了一下果然还是不支持 HTTPS。然后我就天真的把 share.js 上传到了七牛 CDN（七牛是支持 HTTPS的，在空间设置-域名配置里面设置下就行），然而百度分享的图标还是没出来。看了下控制台，卧槽，又加载了一堆 js，作为一个全栈工程师，我非常灵性的瞅了眼代码里面有一段：domain:{staticUrl:”http://bdimg.share.baidu.com/”}，原来是模块化加载，把链接替换成七牛 CDN  的链接后有些请求 404 了，我又天真的以为把这几个 js 文件补全就行，但是补完几个，又有几个文件 404 了，我可没耐心一个个文件补齐呀。

作为一个灵性码农，我马上想到七牛不是有个镜像存储功能嘛，设置一发：

故事就这么结束了吗？怎么可能。百度“幺蛾子”还是比较多。百度分享不光是分享功能，还有分享的数据分析。数据哪里来呢？前端埋点统计的呀，原理简单说就是监控分享时的点击事件，发送数据到后台。这其中的核心就是 http://nsclick.baidu.com/v.gif，需要统计的参数和值都以 GET 参数的形式附在链接后面。然后后端再清洗请求日志或者获取请求的时候就直接把数据入库了。但这个统计小图片也不支持 HTTPS。没办法，只能去掉了，方法也很简单，static/api/js/trans/logger.js 文件为空就行（上传个空文件、占个位）。到此才算大功告成。

上面是授之以渔，不想自己弄的，可以直接抓鱼，当然希望你也能明白其中的风险，文件是我这边的（可能有后门，当然我没有），而且哪天我流量没了可能会把文件删了。

<divclass="bdsharebuttonbox"><ahref="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><ahref="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><ahref="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a><ahref="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><ahref="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a></div>

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='https://example.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

update：2016-05-24，七牛账单已经超支，上面的代码地址已经失效，还请见谅。其实了解原理之后自己设置一个即可，或者自己 Nginx 反代一下。

一点后话：一直感觉百度分享没人维护了，在群里打听了下。应该是有人（部门）维护着（至于不支持 HTTPS 那是百度 CDN 的锅），但是现在不流行打社交牌了，公司也不重视这块了，还是 200 亿糯米 O2O 更实在，而且百度首页貌似也不显示搜索结果页面的分享次数了。

via。https://iyaozhen.com/use-qiniu-image-storage-allow-baidu-share-support-https.html