CryptoJS.AES “Malformed UTF-8 data” Bug 排查

一、问题描述

这几天在开发快照功能升级,遇到了一个让人非常困惑的报错:

Error: Malformed UTF-8 data

这个报错是测试同学构造的一个断网的极端case中出现的,且定位在代码的 CryptoJS.AES 解密与字符串还原环节。起初我的第一反应是"是不是解密用错了密钥/输入密文格式不对"?于是尝试手动造各种错误输入,包括用乱七八糟的字符串、空密文、空密钥、短字符串等方式,结果 CryptoJS 通常只返回一个空串或者 parse 崩溃,始终无法亲手复现这个Malformed UTF-8 data异常

几番抓狂后,我跟gpt沟通,请它帮我头脑风暴,给出能触发这个报错的例子,尝试了几次后,我才真正意识到报错的本质:

  • Malformed UTF-8 data其实不是在AES.decrypt这一步抛出的,而是在WordArray 被转为字符串(.toString(CryptoJS.enc.Utf8))时触发的异常
  • 想要复现,并不是随便乱输密文就能做到,必须让"密文解密后返回了一段特殊的非法 UTF-8 字节流",而且内容非空,这样在还原字符串时就一定会踩雷。

下面的例子可以100%复现问题

js 复制代码
const forgeRandomWordArray = CryptoJS.lib.WordArray.create([0xc3, 0x28]);
console.log(forgeRandomWordArray.toString(CryptoJS.enc.Utf8)); // 这里必定抛出 Malformed UTF-8 data

代入实际业务,源头其实是分片机制出错,拼接了不同时间点的历史密文片段。具体来说,由于断网等异常,部分分片保存的是本次快照的新内容,部分分片仍然是上一次的旧内容,最终拼接出的密文其实混合了两次保存的数据。这样合成的密文虽然长度对,但结构已被破坏,导致解密后不是合法的 UTF-8 字符串,从而抛出异常。

二、解决方法

本次排查心得:

  1. 不要以为"解密失败"一定会抛异常,CryptoJS 大多数时候直接返回空串,对错误极其宽容。
  2. 只有在"密文解密结果非空且不是合法UTF-8"时,才会在.toString(CryptoJS.enc.Utf8)这一步报出Malformed UTF-8 data

实践层面:

  • 凡涉及到解密和字符串还原的代码,必须用try/catch保护,下游逻辑要对解密结果做容错和提示。
js 复制代码
let decryptedStr;
try {
  decryptedStr = CryptoJS.AES.decrypt(ciphertext, key).toString(CryptoJS.enc.Utf8);
} catch (e) {
  //日志记录、友好提示
  decryptedStr = '';
}

如果这篇博文帮到了你,就请给我点个赞吧(#.#)

相关推荐
这儿有一堆花16 分钟前
前端三件套真的落后了吗?揭开现代 Web 开发的底层逻辑
前端·javascript·css·html5
.Cnn1 小时前
JavaScript 前端基础笔记(网页交互核心)
前端·javascript·笔记·交互
醉酒的李白、1 小时前
Vue3 组件通信本质:Props 下发,Emits 回传
前端·javascript·vue.js
anOnion1 小时前
构建无障碍组件之Window Splitter Pattern
前端·html·交互设计
NotFound4861 小时前
实战分享Python爬虫,如何实现高效解析 Web of Science 文献数据并导出 CSV
前端·爬虫·python
徐小夕2 小时前
PDF无限制预览!Jit-Viewer V1.5.0开源文档预览神器正式发布
前端·vue.js·github
WangJunXiang62 小时前
Haproxy搭建Web群集
前端
阿部多瑞 ABU2 小时前
《智能学号抽取系统》V5.9.5 发布:精简代码,修复移动端文件读取核心 Bug
vue·html·bug
吴声子夜歌2 小时前
Vue.js——自定义指令
前端·vue.js·flutter
小芝麻咿呀2 小时前
vue--面试题第一部分
前端·javascript·vue.js