[{"data":1,"prerenderedAt":44},["ShallowReactive",2],{"case-api-param-encryption-debug-zh":3,"blog-list-zh":13},{"slug":4,"title":5,"summary":6,"date":7,"featured":8,"seoDescription":9,"series":10,"seriesOrder":11,"html":12},"api-param-encryption-debug","H5 接口参数加密？DevPeek 一键解密调试","联调时接口参数 AES 加密看不到明文？用 DevPeek 参数转换功能，填好密钥和 IV 就能自动解密，还能改参重放。","2026-07-18",false,"用 DevPeek 参数转换功能解密 AES-GCM 加密的 H5 API 请求，支持双向转换、明文编辑、调试重放。","api-debug-new-tricks",1,"\u003Cp>H5 页面请求后端 API 时，参数做了 AES 加密——\u003Ccode>{"userId":"123","keyword":"看不到我"}\u003C\u002Fcode> 变成了 \u003Ccode>{ "data": "6be9792e5ed250fc..." }\u003C\u002Fcode>。联调的时候，你在 DevPeek 抓包列表里看到的永远是一串 hex，完全不知道发出去的是什么。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo1\u002Fdemo-ciphertext-raw.png\" alt=\"\">\u003C\u002Fp>\n\u003Cp>DevPeek 目前也没法直接看懂它：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo1\u002Fdemo-no-decrypt-rule.png\" alt=\"\">\u003C\u002Fp>\n\u003Cp>这是很多内嵌 H5 的常见做法：请求体整体对称加密，后端收到后解密。出于安全考量这么做无可厚非，但联调时看不到明文参数，Mock 规则没法写、断点不知道改什么、问题排查全靠猜。\u003C\u002Fp>\n\u003Cp>本文用 DevPeek 的\u003Cstrong>参数转换\u003C\u002Fstrong>功能演示如何让加密参数自动解密显示——只需配好规则，后续请求「密文进、明文出」。\u003C\u002Fp>\n\u003Ch2>适用读者\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>H5 联调时经常遇到接口参数加密的开发者\u003C\u002Fli>\n\u003Cli>正在用 \u002F 想用 DevPeek 查看加密 API 请求的工程师\u003C\u002Fli>\n\u003Cli>不想在联调时反复找后端要解密程序或手动复制粘贴解码\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>容易卡住的地方\u003C\u002Fh2>\n\u003Col>\n\u003Cli>\u003Cstrong>AES 参数不对齐\u003C\u002Fstrong>：密钥编码、IV 编码、输入编码的默认值和实际对不上，解密失败\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Auth Tag 位置搞错\u003C\u002Fstrong>：GCM 的认证标签可能追加在密文末尾，也可能独立传递\u003C\u002Fli>\n\u003Cli>\u003Cstrong>只配了解密没配加密\u003C\u002Fstrong>：改完参数想重发时，DevPeek 不知道如何重新加密\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>下面以 AES-256-GCM 加密为例（固定 IV、Tag 追加到密文末尾、hex 编码），演示完整的配置流程。\u003C\u002Fp>\n\u003Ch2>步骤一：配置加解密规则\u003C\u002Fh2>\n\u003Cp>在请求上右键 → \u003Cstrong>参数转换\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo1\u002Fdemo-right-click-param-transform.png\" alt=\"\">\u003C\u002Fp>\n\u003Cp>在弹出的「参数转换规则」窗口中，先配置一条\u003Cstrong>加解密规则\u003C\u002Fstrong>（Conversion Rule），告诉 DevPeek 用什么算法、什么密钥来解密。\u003C\u002Fp>\n\u003Cp>进入 \u003Cstrong>加解密规则\u003C\u002Fstrong> Tab → 添加 → \u003Cstrong>内置转换\u003C\u002Fstrong> → 选择 \u003Cstrong>AES-GCM\u003C\u002Fstrong>：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo1\u002Fdemo-builtin-aes-gcm-config.png\" alt=\"\">\u003C\u002Fp>\n\u003Cp>填入以下参数（这是最容易填错的地方，\u003Cstrong>逐项核对\u003C\u002Fstrong>）：\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>字段\u003C\u002Fth>\n\u003Cth>值\u003C\u002Fth>\n\u003Cth>说明\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>算法\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>aes-gcm\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>密钥 (Key)\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>342e668900166e5f6731f7a172f52862e3a43da54611519dec5246dadb6e7429\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>SHA-256 派生的 256-bit 密钥\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>密钥编码\u003C\u002Ftd>\n\u003Ctd>\u003Cstrong>Hex\u003C\u002Fstrong> ⚠️\u003C\u002Ftd>\n\u003Ctd>密钥是 hex 字符串，不是 UTF-8 文本\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>IV \u002F Nonce\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>a1b2c3d4e5f6a7b8c9d0e1f2\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>固定 12 字节 IV\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>IV \u002F Nonce 编码\u003C\u002Ftd>\n\u003Ctd>\u003Cstrong>Hex\u003C\u002Fstrong> ⚠️\u003C\u002Ftd>\n\u003Ctd>同上\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>密文输入编码\u003C\u002Ftd>\n\u003Ctd>\u003Cstrong>Hex\u003C\u002Fstrong> ⚠️\u003C\u002Ftd>\n\u003Ctd>Demo 输出的是 hex，不是 base64（DevPeek 默认是 base64）\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>输出编码\u003C\u002Ftd>\n\u003Ctd>UTF-8\u003C\u002Ftd>\n\u003Ctd>解密后的明文编码\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Auth Tag 长度\u003C\u002Ftd>\n\u003Ctd>16\u003C\u002Ftd>\n\u003Ctd>GCM 默认 16 字节\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cblockquote>\n\u003Cp>为什么这三个编码容易踩坑？DevPeek 的内置 AES-GCM 默认 \u003Ccode>keyEncoding: utf8\u003C\u002Fcode>、\u003Ccode>ivEncoding: utf8\u003C\u002Fcode>、\u003Ccode>inputEncoding: base64\u003C\u002Fcode>，但我们的 Demo 用的是 hex。如果忘记改成 Hex，DevPeek 会用完全不同的字节去解密，结果必然是「解密失败」。遇到解密失败，\u003Cstrong>先检查这三个编码\u003C\u002Fstrong>。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>保存后，这条规则出现在加解密规则列表里。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>完成标准：\u003C\u002Fstrong> 加解密规则创建成功，列表显示一条 AES-GCM 规则。\u003C\u002Fp>\n\u003Ch2>步骤二：配置参数转换规则\u003C\u002Fh2>\n\u003Cp>回到参数转换规则窗口，添加一条新规则。这里要告诉 DevPeek：\u003Cstrong>哪个请求\u003C\u002Fstrong>的 \u003Cstrong>哪个字段\u003C\u002Fstrong>需要用上一步的规则来解密。\u003C\u002Fp>\n\u003Ch3>匹配条件\u003C\u002Fh3>\n\u003Cp>勾选匹配条件后，右侧会实时预览当前选中请求的特征：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo1\u002Fdemo-match-conditions-preview.png\" alt=\"\">\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>字段\u003C\u002Fth>\n\u003Cth>值\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>URL 匹配\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u002Fapi\u002Fquery\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>请求方法\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>POST\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>作用域\u003C\u002Ftd>\n\u003Ctd>此处可以先选「手动」，确保只对当前请求生效\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch3>转换目标\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Body › JSON › data\u003C\u002Fstrong>——告诉 DevPeek 要去解密 Body 中 \u003Ccode>data\u003C\u002Fcode> 字段的值。\u003C\u002Fp>\n\u003Ch3>引用规则\u003C\u002Fh3>\n\u003Cp>选择第一步创建的 AES-GCM 加解密规则。此时右侧会立即预览解密结果：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo1\u002Fdemo-select-rule-preview.png\" alt=\"\">\u003C\u002Fp>\n\u003Cp>如果一切正确，你会看到 \u003Ccode>data\u003C\u002Fcode> 字段的密文被解码为 \u003Ccode>{"userId":"123","keyword":"看不到我"}\u003C\u002Fcode> 这样的明文。\u003C\u002Fp>\n\u003Cp>保存规则。回到请求列表，重新看刚才的请求：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo1\u002Fdemo-decrypted-params.png\" alt=\"\">\u003C\u002Fp>\n\u003Cp>\u003Ccode>data\u003C\u002Fcode> 字段旁边多了解密后的明文，一目了然。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>完成标准：\u003C\u002Fstrong> 请求详情中 \u003Ccode>data\u003C\u002Fcode> 字段显示解密后的明文参数。\u003C\u002Fp>\n\u003Ch2>进阶：开启双向转换\u003C\u002Fh2>\n\u003Cp>配好解密后，你还可以开启「双向转换」，这样在调试窗口修改明文参数后，DevPeek 会自动重新加密再发送。\u003C\u002Fp>\n\u003Cp>在参数转换规则中打开「双向转换」开关：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo1\u002Fdemo-enable-two-way.png\" alt=\"\">\u003C\u002Fp>\n\u003Cp>\u003Cstrong>开启前\u003C\u002Fstrong>，密文可编辑、明文只读显示——你可以手工修改密文再重发，但需要自己构造合法的加密数据。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>开启后\u003C\u002Fstrong>，密文变为只读，明文变为可编辑，改完点「发送」DevPeek 会自动重新加密：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo1\u002Fdemo-debug-ciphertext-readonly.png\" alt=\"\">\u003C\u002Fp>\n\u003Cp>这样一来，调试时改参数就不需要自己操心加密过程了。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo1\u002Fdemo-plaintext-editable-auto-encrypt.png\" alt=\"\">\u003C\u002Fp>\n\u003Ch2>原理：DevPeek 参数转换的工作方式\u003C\u002Fh2>\n\u003Cp>参数转换本质上是一个\u003Cstrong>匹配 → 提取 → 解密 → 展示\u003C\u002Fstrong>的管道：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>请求到达 DevPeek\n    │\n    ▼ 匹配 paramTransformRules\n    │   URL: \u002Fapi\u002Fquery, Method: POST\n    │\n    ▼ 提取目标字段值\n    │   body:json:data → "6be9792e5e..."\n    │\n    ▼ 引用 conversionRule 执行解密\n    │   AES-256-GCM(key+IV, authTagPlacement=append)\n    │\n    ▼ 结果挂在 record.paramTransformDerived 上\n    │   原始请求 body 不变，旁边附加解密后明文\n    │\n    ▼ 展示：请求详情、Mock 匹配、调试重放\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>注意 DevPeek \u003Cstrong>不会修改原始请求\u003C\u002Fstrong>——密文还是密文，解密后的明文单独存放在 \u003Ccode>paramTransformDerived\u003C\u002Fcode> 字段中，供界面展示和后续匹配使用。这保证了即使解密失败，原始数据也不会被破坏。\u003C\u002Fp>\n\u003Cp>内置转换支持 AES-CBC、AES-ECB、AES-GCM、DES-CBC、3DES-CBC、RSA、Base64 等常见算法。如果这些不够用，还可以用\u003Cstrong>脚本转换\u003C\u002Fstrong>（Script Conversion）——在沙箱中自定义 JS 解密逻辑，脚本内可访问完整的请求上下文。沙箱内置了 \u003Ccode>util.crypto\u003C\u002Fcode>、\u003Ccode>util.encode\u003C\u002Fcode>、\u003Ccode>util.compress\u003C\u002Fcode>、\u003Ccode>util.json\u003C\u002Fcode> 等工具链，还提供了 \u003Ccode>axios\u003C\u002Fcode>、\u003Ccode>URL\u003C\u002Fcode>、\u003Ccode>URLSearchParams\u003C\u002Fcode> 等 API，你可以直接发起 HTTP 调用获取密钥或远程解密，灵活应对动态 IV、动态密钥等复杂场景。\u003C\u002Fp>\n\u003Ch2>下一步\u003C\u002Fh2>\n\u003Cp>本文演示了固定 IV、Tag 追加的 AES-GCM 场景。实际项目中加密方案千差万别，如果你的接口参数加密方式不同（比如动态 IV 需要从请求体中提取、密钥需要远程获取），可以看看\u003Ca href=\"\u002Fdocs\u002Fscripts-breakpoints\u002F\">脚本转换\u003C\u002Fa>功能——沙箱内置 axios、util.crypto 等 API，可以发起 HTTP 调用获取密钥，或远程解密后返回结果，灵活性更大。\u003C\u002Fp>\n\u003Cp>想详细了解参数转换的配置项和所有内置算法，见\u003Ca href=\"\u002Fdocs\u002Fparam-transform\u002F\">参数转换文档\u003C\u002Fa>。\u003C\u002Fp>\n\u003Chr>\n\u003Cp>若你也在联调里一遍遍手工解码请求参数，欢迎\u003Ca href=\"\u002F\">下载 DevPeek 试用\u003C\u002Fa>按本文步骤配好第一条解密规则，或到 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FGYPengDev\u002Fdevpeek\u002Fdiscussions\">GitHub Discussions\u003C\u002Fa> 聊聊你的加密方案。\u003C\u002Fp>\n\u003Ch2>相关文档\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fparam-transform\u002F\">参数转换（Param Transform）\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fscripts-breakpoints\u002F\">脚本与断点\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fmock\u002F\">Mock 规则\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fdebug-replay\u002F\">调试与重放\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fquick-start\u002F\">快速上手\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n",{"items":14},[15,16,25,31,38],{"slug":4,"title":5,"summary":6,"date":7,"featured":8,"seoDescription":9,"series":10,"seriesOrder":11},{"slug":17,"title":18,"summary":19,"date":20,"featured":21,"seoDescription":22,"series":23,"seriesOrder":24},"h5-debug-console-mock","H5 调试实战（二）：Android WebView 白屏排查，从 Console 远程定位到 Mock 验证","活动 H5 在部分 Android 设备中点击按钮后白屏，请求全部 200 却没有页面反馈。通过 DevPeek Console 获取线上 WebView 运行日志，远程 eval 确认 polyfill 覆盖问题，再使用 Mock 验证异常状态下的降级页面。","2026-07-13",true,"H5 调试实战第二篇：排查 Android WebView 白屏问题。通过 Console 远程调试定位 JavaScript polyfill 兼容问题，并结合 Mock 验证接口异常场景下的页面降级逻辑。","h5-debug",2,{"slug":26,"title":27,"summary":28,"date":29,"featured":21,"seoDescription":30,"series":23,"seriesOrder":11},"wechat-h5-storage-debug","H5 调试实战（一）：微信 H5 localStorage 调试，在电脑上修改真机缓存","微信 H5 换测试号后头像仍显示旧用户，抓包确认接口正常，却定位到 localStorage 遗留旧数据。本文记录一次真实联调过程，以及如何在电脑上查看、修改微信 WebView 的 localStorage、sessionStorage 和 IndexedDB。","2026-07-11","微信 H5 调试实战：通过真实案例定位 localStorage、sessionStorage、IndexedDB 导致的数据缓存问题，对比 vConsole、Remote Debug 等方案，介绍真机 WebView 调试思路。",{"slug":32,"title":33,"summary":34,"date":35,"featured":21,"seoDescription":36,"series":37,"seriesOrder":24},"why-we-built-devpeek-h5-debug","我们为什么做 DevPeek（二）：App 里那页 H5，在电脑上也能对着查","登录接口用参数转换啃下来了，活动页 H5 却在 App WebView 里才崩。真机 remote debug 折腾一圈，DOM 和抓包还是两拨窗口——于是把镜像和自研调试面板收进 DevPeek。","2026-07-10","DevPeek 起源系列第二篇：App 内嵌 H5 只在真机出问题、remote debug 与抓包割裂的联调痛点，以及调试 Tab 如何把页面镜像到电脑并用自研面板查 DOM、Console 与 Network。","origin",{"slug":39,"title":40,"summary":41,"date":42,"featured":21,"seoDescription":43,"series":37,"seriesOrder":11},"why-we-built-devpeek","我们为什么做 DevPeek（一）：HTTPS 解密了，Body 还是天书","版本日前那晚，TLS 早就解开了，改请求里一个字段却还要翻脚本加解密。于是萌生做一个把业务加解密收进代理的工具——DevPeek 从这儿开始。","2026-07-09","DevPeek 起源系列第一篇：联调时请求体加解密的手工折腾，以及为什么先做一款把业务加解密收进代理的工具。",1784353380709]