百度嵌入式站内搜索https化实践分享

百度站内嵌入式搜索,相信很多网站都已经用了有一段时间了。可惜在百度自己大力提倡网站 https 化的同时,百度的周边产品却自己打脸了,完全跟不上进度。百度嵌入式站内搜索https化实践分享

不得不说,百度这个嵌入式站内搜索给了网站更多的 DIY 遐想,让搜索更加贴合各种主题,原汁原味:百度嵌入式站内搜索https化实践分享

Ps:预览地址:https://zhangge.net/search.html ,怎么制作这里就不赘述了,请参考本站历史教程

这玩意好是好,但是不支持 https!不过,我们可以有多种办法来变相实现。比如,利用七牛将百度分享 https 化、利用七牛将百度打赏 https 化,貌似七牛无所不能哦?

这里,当然也是可以利用七牛来解决问题,但是我并不想“邯郸学步”,所以这里打算用 Nginx 来实现。

一、改造原理

Ps:只求结果,不求过程的朋友请忽略此段啰嗦内容!

由于百度站内嵌入式搜索不支持 https,那么就算把主 js(iframe.js)本地化或者七牛化,也只是这一个文件实现了 https!从这个 js 加载出来的图片等各种资源却还是调用的百度的 http 资源!因此,我们得分析这个 js 会调用的资源,然后全部 https 化。

百度嵌入式搜索其实就一个主 js:http://zhannei.baidu.com/static/js/iframe.js,我们把它下载到本地,然后将其中的百度静态域名全部清空,只保留相对路径。比如:http://zhannei.baidu.com/customer_search/***,我们需要删除协议和域名部分,改成 /customer_search/*** 这种相对路径,这样我们才可以实现 Nginx 反代,七牛也是一样原理。

可能,光从肉眼去看 js 具体调用了哪些静态资源是比较困难苦逼的,这是我们可以将 js 上传到本地,然后将百度嵌入式代码改成本地 js,刷新前台的时候就可以在 F12 控制台去看某某资源因为不是 https 被拦截了,这样就知道哪些资源还需要继续改造了!

二、改造代码

既然分享,说明第一步的苦逼工作也已经做过了,直接分享代码:

将以上代码保存为 js 文件,比如 baidusearch.js ,然后上传到服务器网站目录,(推荐放于主题下,比如:/wp-content/themes/begin/js/baidusearch.js)

然后,将百度站内嵌入式搜索代码中的 iframe.js 地址替换为以上 js 地址,到此完成网站代码部分改造:

Ps:更多内容,请参考本站历史教程

三、反向代理

第二步还只是将相关资源全部指向了本地,所以下面需要改造 Nginx,将这些指向全部反代到百度站内搜索,修改很简单,将以下 Nginx 代码添加到网站 Nginx 配置的 location / { 之前:

如果,Nginx 集成了 ngx_cache_purge 缓存模块,那么可以将上述代码中的缓存规则打开,避免每次搜索还要到百度去请求资源【相关教程】!

规则添加后,重启或重载 Nginx 即可生效。这时候,https 前台就能正常使用百度嵌入式站内搜索了!

四、更多花絮

https 实现了,但是还是有些瑕疵,那就是搜索结果中缩略图默认使用 https 协议,可能会被浏览器拦截。在张戈博客应用这个改造后,发现大部分缩略图居然返回 403 禁止了,仔细看了下,大部分如下形式:

http://i8.baidu.com/it/u=1582249672,3936911246&fm=85&s=6BAAA3475C1300C649B5710B0100E09

看来是百度站内搜索 zhannei.baidu.com开启了防盗链机制,自己不支持 https,还不让别人改造么?于是直接给站内搜索管理员发了一份邮件:百度嵌入式站内搜索https化实践分享

目前,站内搜索确实取消防盗链了,虽然管理员牛逼哄哄的也没回我邮件。。。

虽然不再禁止访问了,但里面的图片依然是 http 协议的,严格的浏览器还是会禁止加载,不过对于完全不能用来说,这个瑕疵还算可以忍受!

评论已关闭!