各位同学，今天咱们来聊聊JS的字符串加密解密，以及顺带手玩玩Hooking！
大家好！今天咱们搞点有意思的，聊聊JS里的字符串加密解密，再顺便玩玩Hooking。别害怕，不是让你去当黑客，而是了解这些技术背后的原理，以后遇到类似的问题，咱也能优雅地解决。
字符串加密/解密：别让你的秘密裸奔
在Web开发中，有些敏感信息，比如API密钥、用户数据等等，不能直接明文写在JS代码里。万一被人扒出来，那可就惨了。所以，我们需要对这些字符串进行加密，在运行时再解密使用。
1. Base64：看着像加密，其实是编码
Base64严格来说不是加密，而是一种编码方式。它将任意二进制数据转换成由64个字符组成的字符串。优点是可读性好，缺点是太容易破解了。
// 加密
const str = "Hello, World!";
const encodedStr = btoa(str);
console.log("Base64 编码:", encodedStr); // 输出: SGVsbG8sIFdvcmxkIQ==
// 解密
const decodedStr = atob(encodedStr);
console.log("Base64 解码:", decodedStr); // 输出: Hello, World!优点：
- 简单易用，浏览器原生支持。
缺点：
- 毫无安全性可言，一眼就能看出来是Base64。
适用场景：
- 对安全性要求不高，只是为了防止数据在传输过程中出现问题。比如，在URL中传递一些参数。
2. 简单的对称加密：小打小闹还行
对称加密使用相同的密钥进行加密和解密。常见的算法有DES、AES等。但是，在JS里实现这些算法比较麻烦，而且密钥也容易暴露。所以，我们通常会用一些简单的替代方案。
a. XOR加密
XOR（异或）运算是一种简单的位运算。它的特点是：如果两个值相同，结果为0；如果两个值不同，结果为1。利用这个特性，我们可以对字符串进行加密。
function xorEncrypt(str, key) {
let result = "";
for (let i = 0; i < str.length; i++) {
result += String.fromCharCode(str.charCodeAt(i) ^ key);
}
return result;
}
const str = "This is a secret message.";
const key = 123;
const encryptedStr = xorEncrypt(str, key);
console.log("XOR 加密:", encryptedStr); // 输出: 乱码
const decryptedStr = xorEncrypt(encryptedStr, key);
console.log("XOR 解密:", decryptedStr); // 输出: This is a secret message.优点：
- 简单易懂，实现起来非常方便。
缺点：
- 安全性很低，密钥一旦泄露，所有数据都会暴露。容易被频率分析破解。
适用场景：
- 对安全性要求极低，只是为了迷惑一下小白。
b. 凯撒密码变种
凯撒密码是一种古老的加密算法，通过将字母按照一定的偏移量进行替换来实现加密。我们可以稍微修改一下，让它更复杂一些。
function caesarEncrypt(str, shift) {
let result = "";
for (let i = 0; i < str.length; i++) {
let charCode = str.charCodeAt(i);
if (charCode >= 65 && charCode <= 90) { // A-Z
charCode = ((charCode - 65 + shift) % 26) + 65;
} else if (charCode >= 97 && charCode <= 122) { // a-z
charCode = ((charCode - 97 + shift) % 26) + 97;
}
result += String.fromCharCode(charCode);
}
return result;
}
const str = "Hello, World!";
const shift = 3;
const encryptedStr = caesarEncrypt(str, shift);
console.log("凯撒加密:", encryptedStr); // 输出: Khoor, Zruog!
const decryptedStr = caesarEncrypt(encryptedStr, 26 - shift); // 解密需要反向偏移
console.log("凯撒解密:", decryptedStr); // 输出: Hello, World!优点：
- 比XOR稍微复杂一些，但仍然很容易理解。
缺点：
- 安全性依然很低，可以通过频率分析破解。
适用场景：
- 同XOR，对安全性要求极低。
3. 高级加密算法：AES、RSA
如果对安全性要求比较高，我们需要使用更强大的加密算法，比如AES（对称加密）和RSA（非对称加密）。但是，在JS里直接实现这些算法非常复杂，而且性能也不好。所以，我们通常会使用一些现成的JS库，比如crypto-js。
// 需要引入 crypto-js 库
// <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
// AES 加密
function aesEncrypt(str, key) {
return CryptoJS.AES.encrypt(str, key).toString();
}
// AES 解密
function aesDecrypt(encryptedStr, key) {
const bytes = CryptoJS.AES.decrypt(encryptedStr, key);
return bytes.toString(CryptoJS.enc.Utf8);
}
const str = "This is a very secret message.";
const key = "MySecretKey123"; // 密钥一定要足够长，才能保证安全性
const encryptedStr = aesEncrypt(str, key);
console.log("AES 加密:", encryptedStr); // 输出: 一串加密后的字符串
const decryptedStr = aesDecrypt(encryptedStr, key);
console.log("AES 解密:", decryptedStr); // 输出: This is a very secret message.优点：
- 安全性高，AES是目前最常用的对称加密算法。
缺点：
- 使用起来比较复杂，需要引入第三方库。
- 密钥管理仍然是一个问题，如果密钥泄露，所有数据都会暴露。
适用场景：
- 对安全性要求较高的场景，比如用户密码、敏感数据等。
4. 代码混淆：障眼法也能起作用
除了加密之外，代码混淆也是一种常用的保护JS代码的手段。它通过将代码变得难以阅读和理解，来增加破解的难度。常见的混淆方式包括：
- 变量名替换：将有意义的变量名替换成无意义的字符，比如
a、b、c等。 - 字符串加密：将字符串进行加密，在运行时再解密。
- 控制流平坦化：将代码的控制流变得复杂，让攻击者难以理解代码的逻辑。
- Dead Code插入：插入一些无用的代码，增加代码的复杂度。
有很多工具可以用来进行代码混淆，比如UglifyJS、JavaScript Obfuscator等。
优点：
- 可以有效增加代码的破解难度。
缺点：
- 不能完全防止代码被破解，只是增加了难度。
- 可能会影响代码的性能。
适用场景：
- 对安全性有一定要求的场景，可以作为一种辅助手段。
表格总结:
| 加密方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Base64 | 简单易用，浏览器原生支持 | 毫无安全性可言，一眼就能看出来是Base64 | 对安全性要求不高，防止数据传输问题 |
| XOR加密 | 简单易懂，实现方便 | 安全性极低，容易被破解 | 对安全性要求极低，迷惑小白 |
| 凯撒密码变种 | 比XOR稍微复杂一些 | 安全性依然很低，可以通过频率分析破解 | 同XOR，对安全性要求极低 |
| AES | 安全性高，常用的对称加密算法 | 使用复杂，需要第三方库，密钥管理是个问题 | 对安全性要求较高的场景，如用户密码、敏感数据等 |
| 代码混淆 | 增加代码破解难度 | 不能完全防止破解，可能影响性能 | 对安全性有一定要求的场景，辅助手段 |
运行时 Hooking：拦截和修改JS行为
Hooking是一种强大的技术，可以用来拦截和修改JS代码的执行流程。通过Hooking，我们可以：
- 监控函数的调用：记录函数的参数和返回值。
- 修改函数的行为：修改函数的参数或返回值，甚至完全替换函数的实现。
- 注入自定义代码：在程序的执行过程中插入自定义代码。
1. 简单的Hooking：修改alert函数
让我们从一个简单的例子开始，修改浏览器的alert函数。
const originalAlert = window.alert; // 保存原始的alert函数
window.alert = function(message) {
console.log("Alert 被 Hook 了！");
originalAlert("Hooked: " + message); // 调用原始的alert函数，并修改消息
};
alert("Hello, World!"); // 这次弹出的对话框会显示 "Hooked: Hello, World!"，并且会在控制台输出 "Alert 被 Hook 了！"这段代码首先保存了原始的alert函数，然后用一个新的函数替换了它。新的函数在调用原始的alert函数之前，先在控制台输出一条消息。
原理：
- JS中的函数是一等公民，可以像变量一样被赋值和传递。
- 我们可以通过修改全局对象
window的属性，来替换全局函数。
2. Hooking 原型方法：修改String.prototype.substring
我们可以Hook原型对象上的方法，来影响所有字符串的行为。
const originalSubstring = String.prototype.substring;
String.prototype.substring = function(start, end) {
console.log("substring 被 Hook 了！", this, start, end);
return originalSubstring.call(this, start, end); // 使用 call 确保 this 指向正确
};
const str = "This is a test string.";
const subStr = str.substring(5, 10);
console.log("Substring:", subStr); // 输出: is a原理：
- JS中的对象都有原型，原型对象上的方法可以被所有实例共享。
- 我们可以通过修改原型对象上的方法，来影响所有实例的行为。
- 使用
call或apply可以改变函数的this指向。
3. Hooking 构造函数：监控对象的创建
我们可以Hook构造函数，来监控对象的创建过程。
const originalDate = window.Date;
window.Date = function(...args) {
console.log("Date constructor 被 Hook 了！", args);
return new originalDate(...args); // 使用 new 关键字创建原始的 Date 对象
};
const now = new Date();
console.log("Now:", now);原理：
- JS中的构造函数也是函数，可以被Hook。
- 我们需要使用
new关键字来创建原始的对象。 - 使用
...args可以传递任意数量的参数。
4. Hooking 的注意事项
- 小心无限循环： 如果Hook函数内部又调用了被Hook的函数，可能会导致无限循环。
- 保持
this指向正确： 在使用call或apply时，要确保this指向正确。 - 注意性能： Hooking会增加代码的执行时间，要避免过度使用。
- 避免破坏原有功能： Hooking的目的是为了监控或修改行为，而不是为了破坏原有功能。
Hooking 的应用场景
- 调试和测试： 可以用来监控函数的调用，记录参数和返回值，方便调试和测试。
- 安全分析： 可以用来检测恶意代码，防止XSS攻击等。
- 功能扩展： 可以在不修改原有代码的情况下，扩展程序的功能。
- 逆向工程： 可以用来分析程序的行为，了解程序的实现原理。
总结
今天我们聊了JS的字符串加密解密，以及运行时Hooking。这些技术在Web开发中都有广泛的应用。希望大家通过今天的学习，能够对这些技术有更深入的了解，以后遇到类似的问题，也能更加自信地解决。
记住，技术是把双刃剑，要合理使用，不要用它来做坏事哦！
好了，今天的讲座就到这里，大家下课！