C/C++ CGI处理文件上传

前端页面如下:(index.html)

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE>
<html>
<head>
<title>Upload File Test</title>
</head>
<body>
<form enctype='multipart/form-data' action="/cgi-bin/LocalVideoUpload" method="post">
<input type="file" name='pics' multiple>
<input type="file" name='another_pic'>
<input type="submit">
</form >
</body>
</html>

从中可以看到,使用了一个表单作为上传内容,其中enctype属性表明这个表单在上传的时候使用multipart/form-data格式。表单中有两个输入框,在浏览器里会显示为【选择文件】。其中pics可以选择多个文件上传,another_pic只能选择一个文件上传。

那么什么是multipart/form-data格式呢?

首先根据标准文档和搜索到的资料,这是一种Content-Type,而且是建立于POST请求方式基础上的。其本身意味着整个表单数据编码为一条消息,每个控件的数据对应消息的一部分。

先用Wireshark抓一下包,这里要注意的是,由于wireshark没法抓localhost环回的包,因此我在本地的另一个设备上设置了一个代理,这样请求会经过该设备的中转,从而能够被wireshark捕获到。当然也有更好的办法,比如配置路由,安装rawpacp等等…. 可以参考这个博客

抓到的包大概是这样:
1.png

这里用了wireshark的过滤条件:ip.src eq 192.168.31.102 and ip.dst eq 192.168.31.51 and ip.proto eq TCP,这样能够筛选出从102机器发往51机器的所有TCP报文,沿着SYN查找带有PSH,ACK的报文(其中PSH表示push操作位,意味着发送方希望接收方立刻处理数据,具体参见这个博客 ,在截图中还可以看到很多TCP segment of a reassembled PDU这样的提示,这表明TCP报文经过了分片,可以参考这个博客。关于更多的wireshark过滤条件语法,参见这个博客)然后右键报文——追踪TCP流,就会弹出来这样一个窗口:

2.png

这里就可以看到报文的格式了。在Content-Type中,multipart/form-data被指定,随后跟着一个boundary参数顾名思义就是消息的边界分隔符。在POST的正文中可以看到,每个消息以–{$boundary}开始。最后一个消息后附带一个–{$boundary}–表示结束。整个POST的正文长度(包括一大堆的分隔符和内部消息头)为Content-Length。

这样,在CGI中,接收到CONTENT_TYPE和CONTENT_LENGTH参数后,分析是不是multipart/form-data,如果是就提取出来boundary,读取post内容,根据boundary分割输入数据,解析内部请求头。(此处代码较多,就不贴了)

需要注意的是,如果CGI运行在Windows下,而且上传的文件中包含二进制数据,此时需要将标准输入流设置成二进制模式,具体参见这个博客

有关内部消息头中的Content-Disposition,可以参考这里。另外Content-Disposition还可以被用在响应头中,用于下载文件,具体参考这个博客

由于内部消息头没有Content-Length,因此没有办法预知这一部分有多少数据,只能不断读入然后判断是否遇到了边界。

需要小心的是,内部消息头指出的filename可能是经过精心编辑的带有类似 ../ 的路径,如果直接使用有可能会覆盖其他文件,从而为攻击提供了可乘之机。

这里再介绍一种能够显示上传进度的前端页面写法:(摘自这个博客

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "/cgi-bin/LocalVideoUpload");//修改成自己的接口
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* 服务器端返回响应时候触发event事件*/
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" οnchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" οnclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>

此外,还可以使用libcurl库和winhttp库来直接对cgi发起上传文件的POST请求,可以参考这个博客

POST上传数据的时候,除了multipart/form-data外,还有默认的application/x-www-from-urlencoded类型,这种类型会将数据转化为键值对key=value&key2=value2这样的,同时还会对数据进行编码(不适合文件上传)。还有raw类型,其Content-Type为text/plain或者application/json,text/html这样的。其内容不会被修改。有关更多的Content-Type内容,可以参考这个博客。除此之外还有一种binary类型,其Content-Type为application/octet-stream,由于没有分隔符,因此只能上传一个文件。

文章转自: https://blog.csdn.net/Kiritow/article/details/81697694

文章作者: QUST-Coder
文章链接: http://qustkx.com/2019/08/17/blog1/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 青岛科技大学信息学院科技创新协会