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

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

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

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

我做了一个网站，大家可以简单体验一下：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编码

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

到底安全吗？

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

结论一句话：

这是一种“伪加密”...

尽管这种多层加密“不安全”，但它的流程化设计非常适合： 一步步拆解加密过程 —— 从字符到编码到哈希，看到每一步如何变化 —— 练习如何组合多个算法。

前端加密 ≠ 信息安全，但 ≠ 完全没用。

OK，以上便是本次分享~

欢迎加我：atar24，进技术群、交盆友，我会第一时间通过。