能否在Firefox或Chrome中查看gRPC-Web POST请求的明文数据？

安全阿岳

2026-7-5

解析gRPC-Web请求二进制负载的方法

gRPC-Web的请求体是Protobuf序列化后的数据，还带有gRPC-Web的固定前缀，所以直接查看二进制会显示乱码。要解析请求负载，按以下步骤操作：

1. 获取请求的二进制原始数据

在Chrome或Firefox的Network面板找到目标POST请求：

Chrome：右键请求 → 「Copy」→「Copy as ArrayBuffer」（或「Copy as Fetch」，后续从fetch代码中提取body）
Firefox：右键请求 → 「复制」→「复制原始二进制数据」

2. 准备对应的Protobuf定义文件（.proto）

gRPC依赖Protobuf的schema解析数据，必须拿到该请求对应的.proto文件：

自有项目直接从代码仓库中查找服务定义文件
第三方服务可查阅官方文档或联系开发团队获取

3. 解析二进制数据的两种方式

方式一：用`protoc`命令行工具解析

将复制的二进制数据保存为本地文件（比如request.bin）
执行命令（替换为你的.proto路径和消息类型）：

# 跳过gRPC-Web的5字节前缀，解析纯protobuf内容
tail -c +6 request.bin | protoc --decode=你的消息全限定名 你的proto文件路径

说明：gRPC-Web请求前5字节是控制头（第1字节为压缩标识，后4字节是消息长度），必须跳过才能拿到有效protobuf数据

方式二：在浏览器控制台直接解析

如果Vue项目已引入Protobuf相关库（如protobufjs或@grpc/proto-loader），可直接在控制台解析：

// 1. 获取项目中已加载的Protobuf类型（未加载则手动导入）
const MyRequest = window.protobuf.lookupType('你的包名.你的请求消息名');

// 2. 粘贴从Network复制的ArrayBuffer内容
const rawBuffer = /* 此处粘贴复制的ArrayBuffer */;
// 3. 跳过前缀后解码为JSON格式
const protoBuffer = new Uint8Array(rawBuffer).slice(5);
const requestData = MyRequest.decode(protoBuffer).toJSON();

console.log(requestData);