使用 Wireshark 解析 form 表单的 HTTP 报文

阅前须知:本内容对初学者可能并不友好。

假设我们的 form 表单如下:


<body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        
        <input type="text" name="first-name" value="Alan"><br>
        
        <input type="file" name="avatar"><br>
        
        <input type="text" name="last-name" value="Smith"><br>
        <button type="submit">提交button>
    form>
body>

数据如下:

first-name=Alan
avatar=avatar.png
last-name=Smith

通过 wireshark 捕获到我们的请求:

使用 Wireshark 解析 form 表单的 HTTP 报文_第1张图片

其对应的 HTTP 报文内容如下(图片来自 Wireshark)

使用 Wireshark 解析 form 表单的 HTTP 报文_第2张图片

表单内容就在 File Data 中(也就是 “请求头\r\n” 之后),内容通过 boundary 进行分割:

小知识:当发送 multipart/form-dat 数据时,boundary 是必需的,它用于划分表单的各个字段。该值通常用浏览器自动生成,所以,如果你是使用 fetch 方式发送请求,记得不要手动指定 header 中的 Content-Type

File Data 内容如下:

使用 Wireshark 解析 form 表单的 HTTP 报文_第3张图片

图中有三块 Encapsulated multipart part,代表三个表单项

第一块 first-name=Alan

使用 Wireshark 解析 form 表单的 HTTP 报文_第4张图片

第二块 avatar=avatar.png

使用 Wireshark 解析 form 表单的 HTTP 报文_第5张图片

第三块 last-name=Smith

使用 Wireshark 解析 form 表单的 HTTP 报文_第6张图片

最后,分享一下我所使用的客户端脚本(如果你需要的话):

const express = require('express')
const multer = require('multer')

const app = express()
const upload = multer()
const port = 3000

app.use(express.static('.'))

app.get('/', (req, res) => {
    res.redirect('./index.html')
})

app.post('/upload', upload.any(), (req, res) => {
    res.redirect(req.headers.referer)
})

app.use((err, req, res, next) => {
    res.status(500).send('Something broke!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

你可能感兴趣的:(wireshark,http,测试工具)