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

update 2020-01

百度分享已经彻底凉了,这类工具也没人愿意做,其实也很简单,自己弄一个就行。

各种社交网站的分享接口可以参考:https://github.com/overtrue/share.js,其实国内也就新浪微博和微信值得分享。

其中微信特殊一点,桌面端浏览器访问需要生成一个二维码,让用户扫码分享,对于移动端如果支持navigator.share则可以调起系统分享菜单(https://web.dev/articles/web-share),对于不支持的浏览器提示通过右上角或者底部分享。

---分割线---

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

最近搞了个 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 了,我可没耐心一个个文件补齐呀。

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

20150817003746

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

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

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

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