前端多层加密？让“伪安全”更“伪”一点（狗头）

掘金安东尼

发布于 2026-07-08 12:23:57

文章被收录于专栏：掘金安东尼掘金安东尼

在浏览器端做加密，听上去就有点自欺欺人。很多开发者对前端加密的态度是：

“反正浏览器都能看到源码，前端加密有意义吗？”

实际上，这个问题的答案并不简单。前端加密无法抗拒主动攻击，但在某些场景下，比如数据混淆、防小白逆向、教学演示，它仍然具备合理存在的价值。

本篇：想聊的，就是一种典型的“前端多层加密”的实现思路。

我做了一个网站，大家可以简单体验一下：encryption-demo.pages.dev/

多层加密的核心设计

前端多层加密本质上是将多个简单的加密/编码/哈希算法串联起来，形成一个相对复杂的处理链，从而提升对抗简单逆向的门槛。

字符位移：基础可逆加密
加盐：防止简单模式识别
Base64：编码增强，便于传输
哈希迭代：引入不可逆过程，增加验证机制
二次字符位移+编码：强化混淆效果

原理与实现

🔸 步骤1：字符位移加密

类似凯撒密码，每个字母 +3
极易破解，但适合作为第一步混淆

function simpleEncrypt(str) {
  return str.split('').map(c => {
    const code = c.charCodeAt(0);
    if (code >= 65 && code <= 90) {
      return String.fromCharCode(((code - 65 + 3) % 26) + 65);
    }
    if (code >= 97 && code <= 122) {
      return String.fromCharCode(((code - 97 + 3) % 26) + 97);
    }
    return c;
  }).join('');
}

🔸 步骤2：加盐

在末尾增加一串随机盐（一般8位）
盐 = 防止模式识别 + 防止撞库

function generateSalt(length = 8) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  return Array.from({length}).map(() => chars[Math.floor(Math.random() * chars.length)]).join('');
}

🔸 步骤3：Base64编码

本质是编码，不是加密
提供可见的编码形式，防止二进制乱码

const encoded = btoa(textWithSalt);

🔸 步骤4：再次字符位移

加强混淆
和第一次字符位移逻辑相同

🔸 步骤5：100次哈希迭代

不可逆
增加校验强度
理论上，攻击者必须知道前面所有步骤，并暴力跑哈希

function customHash(str) {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = (hash << 5) - hash + str.charCodeAt(i);
    hash |= 0;
  }
  return hash.toString(16);
}

let result = input;
for (let i = 0; i < 100; i++) {
  result = customHash(result);
}

🔸 步骤6：最终Base64编码

便于展示和传输
增强文本兼容性

到底安全吗？

目标	多层加密能否达成？
防止数据被直接肉眼看到	✅ 完全达成
防止抓包获取原始数据	❌ 无法防御
防止逆向还原加密逻辑	❌ 无法防御
增加小白逆向的时间成本	✅ 有效
商业级数据安全保护	❌ 完全不适用
教学/实验/流程展示	✅ 非常合适