给博客添加一个安全跳转页面

   日期:2024-12-30     作者:035ce       评论:0    移动:http://ljhr2012.riyuangf.com/mobile/news/14727.html
核心提示:更新记录:本教程已弃用,如有需要请移步到重置版教程:​更新记录:本次更新了在twikoo评论区中添加网页跳转的功能点击跳转更新

更新记录:本教程已弃用,如有需要请移步到重置版教程:

更新记录:本次更新了在twikoo评论区中添加网页跳转的功能点击跳转更新内容

前些天,分享了一篇文章,描述了可能会因为网站上出现被他人滥用的链接而导致被封的情况,我对于我的站点还是挺关心的,也很想将其经营下去,所以我决定也给自己的站点添加一个,加强网站的安全性,预防隐患。

首先就是上网找相关的资料了,我依稀记得之前是翻到过的,不过换了很多的关键词,都没有找到一个令人满意的,在上面曾烧到过一个npm插件,但是添加后友链也跳转了,又懒得翻看代码,所以继续寻找了,终于在大量搜索后,在gitee上找到了一个他人分享的开源安全跳转的页面,点开一看还蛮喜欢的,于是准备在它的基础上进行修改。

首先就是按照作者的要求,将其中的go.js引入_config_butterfly.yml,然后将go.html添加到source目录下,实际上这样已经可以使用了,给原作者赞一个!但是由于原作者的个人需要,添加了下载页面跳转的功能,并且经过查看代码,其中的安全页面需要手动添加友链,并且每个页面都跳转了,这当然不行,所以我进行了一点点修改,首先修改go.js最后部分为butterfly文章页的类名,让其只识别文章正文部分的链接,并进行跳转,友链页面不跳转安全页面直接跳转到目标链接:

由于我只需要链接跳转,并没有下载需要验证码并打赏的功能,所以对于go.html进行修改,让其所有都走跳转的这一条线即可,所有的源码如下:

如果只想部署,到这里就可以结束了,下面讲解的是其中的我修改的项,首先就是屏蔽了一堆的下载单独跳转到另外的页面,让他可以功能更加单一(当然如果有需要可以尝试着自己修改为自己的,我这里不需要),如果你们也想要部署需要修改其中的config为你们自己的,如下:

还有网页头的部分信息,这个比较简单所以就不读了,下面,针对于文章部分的内容,我经常使用到朋友们的链接在文章中,但是如果都报不安全,那不是有点离谱了吗,所以我想设置一下友链区域的链接可以识别为安全并直接跳转。我们注意到config中有一个safeurl,这个就是安全页面,当识别到安全页面的时候,链接会自动跳转,如下:

但是经过检查,原作者的友链需要自己手动添加,这对于我一个蓝狗,不可能,绝对不可能!于是我尝试了读取我的友链信息,恰好我的根目录下有一个friend.json,格式如下:

其中是我的友链和相关头像链接信息,这个文件是为了构建友链朋友圈而使用,由于我魔改了友链页导致原有的友链朋友圈无法通过标签爬取到我的友链信息,没办法,只能根据其开发文档使用了第一条通用规则,自行生成json文件并上传,每次刷新从这里面读取最新的内容一个个爬取才能成功获取到大家的最新文章,我太难了~,获取到这个friend.json的文件如下:

创建link.js,放入上面的内容并放到根目录下,根据blogroot/source/_data/link.yml爬取友链信息,所以该方法应该只能用于极少数类butterfly主题!!!

生成了friend.json之后,我们就根据读取并生成新的safeurl列表,首先我使用的是AJAX异步加载:

嗯,没错,我都屏蔽了,因为用不了。。。

其实可以看见,内容是正常的更新了的,如下:

经过我上网查了资料,了解到,异步AJAX会同步新开启一个线程,这个没执行完的时候,下面的代码仍然会继续执行,所以导致还没有刷新列表,就已经跳转了不安全界面。那解决方法也很简单,异步改成同步呗(就是可能会导致加载不出文件一直进行不了下一步,不过加载不出文件导致页面崩溃也不只这一个问题了,多一个又何妨?QAQ),如下:

上面可以看到,我们在数据加载完成后才进行了goInit(config)函数操作,这样就可以确保不会出现先加载页面才加载完数据的问题。

下面就是butterfly的本身问题,应该可以发现我的html代码顶部有一个:

​ 这个是为了防止我们的跳转页面被butterfly渲染而导致下面这个情况:

在与站长交流的过程中,我发现他的博客中的评论区同样被安全跳转所包裹,于是我向他请教,最终实现了twikoo的安全链接跳转页面,其他聊天系统理论上也可以使用该方法进行重定向。

通过上方交谈我们可以了解到,当他加载完成后会执行一个函数,我们只需要知性这个个函数,然后识别其中的a标签,然后替换即可,通过翻找twikoo的issue,最终发现了一段类似的带么,可以直接用于重定向到我们的网页。

通过搜索,最终定位到文件:,修改其中的代码:

最终就可以实现twikoo的评论区安全链接跳转功能啦!理论上只要找到对应的触发事件,所有的评论系统都可以进行!

结束撒花!

 
特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

举报收藏 0打赏 0评论 0
 
更多>同类最新资讯
0相关评论

相关文章
最新文章
推荐文章
推荐图文
最新资讯
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号