关于一次前端接口加解密的error记录

最近在考虑做密码学课程设计，于是乎，得把看家本领拿出来啊（bushi
好嘞，想法很快有了
就用flask框架，编写其中的ajax接口，然后这个接口呢，要有那么一点点要求
那就是模仿一些主流网站反爬措施：接口数据加密
加密解密函数如下

function encrypt(b, c, a) {
    var iv = 20220915;
    if (c) {
        return (CryptoJS.TripleDES.encrypt(b, CryptoJS.enc.Utf8.parse(c), {
                iv: CryptoJS.enc.Utf8.parse(iv),
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            }))
            .toString()
    }
}
function decrypt(b, c, a) {
        if (c) {
            return CryptoJS.enc.Utf8.stringify(CryptoJS.TripleDES.decrypt(b, CryptoJS.enc.Utf8.parse(c), {
                    iv: CryptoJS.enc.Utf8.parse(a || DES3.iv()),
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                }))
                .toString()
        }

    }

一个标准的3des加密，其中偏移量iv被我写定为：20220915
加密过程挺顺利的，接口为api

正常读取数据，列表嵌套列表的格式，噢对到这里也要说明一下密钥被我定为64位固定字符串了（符合des加密密钥长度的字符串都可以）
到控制台跑一下，进行测试

嗯，完成加密要求，nice
接下来就是解密了

好吧就是接下来的解密遇到的bug让我处理了好几天！
1.比如下图
未定义的enc？

试了一下，在pycharm里单独运行没问题
问题出在哪了
噢，pycharm能跑通是因为有node环境，浏览器可没有
但是这个点总得解决
还好搜索引擎一顿搜，找到办法了
Browserify：浏览器加载Node.js模块
将js文件打包成可执行的js文件供浏览器使用（大概像webpack吧）

2.数据解密后不是想要的样子
解密后，满心期待等着页面展示

直接emo，打散成这么多元素？欸，我的列表嵌套列表呢？
console.log看下输出格式

原来是返回的解密数据是字符串string格式
转为object数组后直接变成一个又一个小切片的元素一样

到这里挺清晰的了，我们要做的就是返回的解密数据能变为可处理的就好了，这样后面的容器体循环遍历就可以方便使用了
回到解密函数

显而易见，返回的是string格式
想起之前数据采集的时候，许多网站喜欢在前端采用这个函数
JSON.parse
我顿时有了灵感，json格式处理
先看看JSON


来看看前端文件对它定义的接口

找到了源码，这里讲述的是将数据处理为any
还是不太明白
直到我看到下面的例子了

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true
console.log(obj);

// expected output: Object { result: true, count: 42 }

一瞬间，我明白这个JSON.parse仿佛就是天生处理这类数据
对于引号包裹的json格式数据，采用这个函数方法相当于去除引号的同时又将其转换位object格式，直接满足我的要求
添加上JSON.parse后

看一看控制台这次的输出

成功了！是需要的array数据格式！