最近听了一个 web 安全的分享，其中提到了响应加密，我去看了下是怎么实现的，于是就有了这篇文章。
见过账号密码加密，没见过响应体加密吧？ 打开控制台的 response，吓了一跳：
咦，响应不是 json，这还是第一次见。先别着急，既然只能看见字符串，说明是对整个响应体加密的，那么解密一定是在前端。 哈哈，只要是前端解密，作为一个老前端，还能难得倒我？
看我怎么取密钥
既然是响应体统一的加密，那解密函数大概率在响应拦截器里。
添加 fetch breakpoints
devtools -> sources -> XHR/fetch Breakpoints -> +
对指定的 url 添加断点
一路 debug 发现密文是在 xhr.onReadyStateChange 函数里解密的。这里找到了加密方法是对称加密 AES192 以及对称加密密钥 key_string：
!(function (t) {
var e = c.createDecipher("aes192", "key_string"),
a = e.update(t.data, "hex", "utf8");
(a += e.final("utf8")), (a = JSON.parse(a)), (t.data = a);
})(t);
yes，是不是很容易就破解啦？
本地模拟解密 根据上一个步骤的加密方法和密钥，启动一个 node 服务，来模拟客户端和服务端，让我们来看看是否解密正常，以及 NetWork 中的展示是否一致
初始化一个 egg 工程，简单的改造一下。
$ mkdir egg-example && cd egg-example $ npm init egg --type=simple $ npm i $ npm run dev $ open http://localhost:7001
添加两个 controller：
加密接口
// http://127.0.0.1:7001/encode
// 加密
const encrypt = require("./../../encrypt");
const { Controller } = require("egg");
class HomeController extends Controller {
async index() {
const { ctx } = this;
ctx.body = encrypt.aes192_encode(ctx.query.data);
}
}
module.exports = HomeController;
解密接口
// http://127.0.0.1:7001/decode
// 解密
const encrypt = require("./../../encrypt");
const { Controller } = require("egg");
class HomeController extends Controller {
async index() {
const { ctx } = this;
ctx.body = encrypt.aes192_decode(ctx.query.data);
}
}
module.exports = HomeController;
添加加解密方法：
const crypto = require("crypto");
function aes192_encode(text, key) {
const cipher = crypto.createCipher("aes192", key);
let crypted = cipher.update(text + "", "utf8", "hex");
crypted += cipher.final("hex"); // 加密之后的值
return crypted;
}
function aes192_decode(message, key) {
const decipher = crypto.createDecipher("aes192", key);
let dec = decipher.update(message, "hex", "utf8");
dec += decipher.final("utf8"); // 解密之后的值
return dec;
}
module.exports = { aes192_encode, aes192_decode };
修改 router.js
"use strict";
/**
* @param {Egg.Application} app - egg application
*/
module.exports = (app) => {
const { router, controller } = app;
router.get("/", controller.home.index);
router.get("/encode", controller.encode.index);
router.get("/decode", controller.decode.index);
};
在浏览器访问 http://127.0.0.1:7001/encode?data=abc控制台 response 返回 62ff5059fd64c139378f1a370a09ad02
在浏览器访问 http://127.0.0.1:7001/decode?data=62ff5059fd64c139378f1a370a09ad02 控制台 response 返回 abc
把我们目标网站的响应体拿来试试，结果也是直接就解出来啦！
考虑到启动一个 node 服务还是有点麻烦，我们直接在控制台安装对应的 npm 包，直接在控制台解密。
安装 chrome 插件 console importor 安装好之后 在控制台输入：
$i("package name");
这里我们安装 crypto 试试
$i("crypto")
importer.js:2 [$i]: Searching for crypto, please be patient...
importer.js:2 [$i]: crypto not found, import crypto-js instead.
importer.js:2 [$i]: crypto-js is loading, please be patient...
importer.js:2 [$i]: crypto-js(https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js) is loaded.
importer.js:2 [$i]: The new global variables are as follows: CryptoJS . Maybe you can use them.
控制台安装 crypto 找不到, 自动安装了 cryptojs, 道理是一样的
// Encrypt
var ciphertext = CryptoJS.AES.encrypt("data", "key_string").toString();
// Decrypt
var bytes = CryptoJS.AES.decrypt(ciphertext, "key_string");
var originalText = bytes.toString(CryptoJS.enc.Utf8);
到这里我们就可以直接在控制台解密响应体啦，如果大家感兴趣的话，可以自己写一个响应拦截器插件，可以对指定接口解密，这样的话，线上环境也能够排查 response 啦！
现在回到文章开头，想想加密响应体有没有价值？
能拿到响应体肯定是拥有登录令牌的，既然都能正常访问页面了，那么对响应加密其实意义不太大，反而增加了开发人员排查问题的成本。如果是为了防止抓包信息泄露，使用 https 后抓包拿到的数据已经是加密过且不能破解的。（可能想得不全面，欢迎大家讨论）
密钥只要是放在前端，无论怎么做代码混淆，一定是有办法解密的，差别在于时间长短。
