hexo个人博客优化魔改非插件实现为博客增加安全跳转中台页面

🙂前言

网络安全的问题这些年越来越被关注，所以各大平台网站例如微博，微信，qq，网易等，都在这几年为自家的网络产品添加了一个安全跳转的中台页面，甚至微博对于跳转链接必须是企业认证才能进入微博的安全白名单，可以说是把安全做到了极致(真是可恶啊，草根博主的博客那就别想加入到微博的白名单中…)

当然除了安全问题，对于 SEO 也是必要的一项加分操作。例如早年小波博客的好友链接转卖后，被用于不好的产品推广网站，而小波未能从博客上及时去掉，这样就会连累自己的博客很容易被搜索引擎拉入黑名单中，就算及时处理，也可能在外链的权重上或多或少受到波及。

加了安全跳转中台以后，这样可以让自己的产品主域名成功与外链间接通过中台串联，而不是直接关系。

最后的最后，当然所有的功能初衷都是以人为本，之所以网络安全问题愈发被关注，也是因为网络带来了很多好处，同时也带来不好的影响，所以增加安全跳转中台页面也间接提升了网络产品的用户体验。

😍廿壴博客安全跳转中台页面成品效果

gitee仓库地址：safeGo

🧐仓库文件说明

go.html 安全跳转中台html页面

因为小波个人有分享素材提供下载，所以除了支持作为安全跳转中台，也是提供下载相关操作的功能页面。

配置说明 config

go.js 博客调用的跳转方法

代码说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

const safeGoFun = {
  // TODO: a链接安全跳转（只对文章页，关于页评论 -- 评论要单独丢到waline回调中）
  NzcheckLink: async (domName) => {
    // 获取文章页非社会分享的a标签
    const links = document.querySelectorAll(domName);
    if (links) {
      // 锚点正则
      let reg = new RegExp(/^[#].*/);
      for (let i = 0; i < links.length; i++) {
        const ele = links[i];
        let eleHref = ele.getAttribute("href"),
          eleIsDownLoad = ele.getAttribute("data-download"),
          eleRel = ele.getAttribute("rel");

        // 排除：锚点、上下翻页、按钮类、分类、标签
        if (
          !reg.test(eleHref) &&
          eleRel !== "prev" &&
          eleRel !== "next" &&
          eleRel !== "category" &&
          eleRel !== "tag" &&
          eleHref !== "javascript:void(0);"
        ) {
          // 判断是否下载地址和白名单，是下载拼接 &type=goDown
          if (!(await safeGoFun.NzcheckLocalSite(eleHref)) && !eleIsDownLoad) {
            // encodeURIComponent() URI编码
            ele.setAttribute(
              "href",
              "/go.html?goUrl=" + encodeURIComponent(eleHref)
            );
          } else if (
            !(await safeGoFun.NzcheckLocalSite(eleHref)) &&
            eleIsDownLoad === "goDown"
          ) {
            ele.setAttribute(
              "href",
              "/go.html?goUrl=" + encodeURIComponent(eleHref) + "&type=goDown"
            );
          }
        }
      }
    }
  },
  // 校验白名单，自己博客，local测试
  NzcheckLocalSite: async (url) => {
    try {
      // 白名单地址则不修改href
      const safeUrls = ["localhost:4000", "ganxb2.com", "blog.ganxb2.com"];
      let isOthers = false;
      for (let i = 0; i < safeUrls.length; i++) {
        const ele = safeUrls[i];
        if (url.includes(ele)) {
          isOthers = true;
          break;
        }
      }
      return isOthers;
    } catch (err) {
      return true;
    }
  },
};

Object.keys(safeGoFun).forEach((key) => {
  window[key] = safeGoFun[key];
});

// 页面dom加载完成后，文章页不是分享按钮，不是图片灯箱，class类名不含有 not-check-link
// not-check-link 是小波自己设计的约定类名class，用来排除不调用跳转方法的链接
document.addEventListener("DOMContentLoaded", function () {
  window.NzcheckLink(
    ".post-content a:not(.social-share-icon):not(.fancybox):not(.not-check-link)"
  );
});

提示

NzcheckLink 方法：

1. 小波设计博客和中台的跳转链接约定：如果是下载则方法给跳转地址后补上type=goDown，所以页面的超链接 a 标签需要增加属性 data-download="goDown"

   eg:

   1	<a href="https://pan.baidu.com/s/1jShRisVX9H9_LHqch_V_lQ?pwd=mfsq" target="_blank" rel="noopener external nofollow noreferrer" data-download="goDown">点我去廿壴博客的百度云下载</a>

2. 排除规则如果小波代码默认条件的不能全面覆盖你的站点超链接类型，请自己根据情况补充(PS: 这里小波偷懒了没有搞成方法的参数传入…嘎嘎)

NzcheckLocalSite 方法：

1. 把 safeUrls 域名改成自己博客的

🤔博客如何调用

1. 首先把仓库文件复制贴入hexo博客 source文件夹下

   非hexo博客则贴入博客的根目录

2. 增加调用代码

   ① 不采用引入 js 文件，减少1次请求

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   // 通常是 layout.ejs 在 </body> 前贴入以下代码 <script> // 把 go.js 中代码贴入 const safeGoFun = { NzcheckLink: () => {}, NzcheckLocalSite: () => {} } document.addEventListener("DOMContentLoaded", function () { safeGoFun.NzcheckLink( ".post-content a:not(.social-share-icon):not(.fancybox):not(.not-check-link)" ); }); </script>

   代码解释：页面 dom 加载完成后，文章页不是分享按钮，不是图片灯箱，class 类名不含有 not-check-link 执行调用，所以 .post-content 根据自己的博客修改，可改成 body 的 class 类名，则全局覆盖
   not-check-link 是小波自己设计的约定类名 class，用来统一排除不调用跳转方法的链接

   
   

   1 2 3 4 5 6 7

   // 如果只给文章页添加，则需要判断只在文章页调用 // fluid主题 栗子🌰： <% if(is_post()) { %> <script> ... 同上 </script> <% } %>

   
   

   ② 直接引用 js 文件 推荐

   1 2 3

   // 通常是 layout.ejs 在 </body> 前贴入以下代码 <script src="/go.js"></script>

   注意

   go.js 文件：

   1. .NzcheckLink(".post-content a:not(.social-share-icon):not(.fancybox):not(.not-check-link)" 的 .post-content 同 ① 手动一样，根据自己博客文章页或整站 body 的 class 名字修改

   2. 文章标题等超链接不需要被调用的统一+个class <a class="not-check-link"></a> ,如果本来有 class 则里面追加

   3. safeUrls 域名改成自己博客的

   
   

   go.html 文件：

   1. config 根据自己博客文案修改，添加友链白名单

   
   

   提示

   如果你的博客也是 fluid 并使用 waline 评论，则还需要在 waline.init(options) 后再为 waline 评论补上调用，因为 fluid 主题这里采用了懒加载

   1 2 3 4 5 6 7 8 9

   // fluid主题 栗子🌰： ... waline.init(options); // 监控滚动到留言板执行回调 -- 添加外链跳转页面 Fluid.utils.waitElementVisible('#waline .wl-cards .wl-item', () => { setTimeout(() => { window.NzcheckLink("#waline .wl-cards .wl-item a"); }, 1500); });

   代码解释：因为 waline 的初始方法异步，所以需要自己监控判断 waline 的评论 dom 显示以后再执行调用

😚未来扩展

1. 可以充分利用 github 或者 vercel，把安全跳转中台页面部署上去，这样可作为独立的安全中台站点使用，更灵活、更易后期扩展。
2. 下载的安全验证码可扩展为通过其他后端服务返回。
3. 安全白名单参考微博等网络产品，通过数据库维护而非前端页面维护。

😊hexo同类产品插件

一开始小波也想找 hexo的插件，例如 hexo-external-link

但是发现都集成太多，太重了，像超链接末尾增加小图标尾巴，很早小波就写了文章用css即实现。

考虑对于我自己来讲需求不太对口，所以最后选择自己开发写了一个页面。

😊来自小波的 bilibili 视频教程

🙂相关参考资料链接

『旅行者』，帮小波关注一波公众号吧。

小波需要100位关注者才能申请红包封面设计资格，万分感谢！

关注后可微信小波，前66的童鞋可以申请专属红包封面设计。