1. 文件MIME类型验证的挑战与必要性
在Web应用中，文件上传功能通常需要对上传文件的类型进行限制，以确保安全性、数据完整性和用户体验。常见的客户端验证方法包括检查文件扩展名（如.jpg、.pdf）或利用浏览器提供的File对象中的type属性（如image/jpeg）。然而，这些方法都存在局限性：
- 文件扩展名易于篡改： 用户可以轻易地将一个恶意脚本文件重命名为.jpg，从而绕过基于扩展名的检查。
- file.type属性不可靠： 浏览器的file.type属性通常根据文件扩展名或操作系统注册的MIME类型来推断，同样容易受到欺骗。
为了实现更健壮的客户端MIME类型验证，我们需要深入到文件的实际内容，检查其“魔术数字”（Magic Number）或文件头签名。这些是文件开头的特定字节序列，不同类型的文件有其独特的签名，即使文件扩展名被修改，其内部的魔术数字通常保持不变。
2. 利用文件头签名进行MIME类型验证
文件头签名（Magic Number）是识别文件真实类型的一种可靠方法。例如：
- PNG: 89504e47
- GIF: 47494638
- JPEG: ffd8ffe0, ffd8ffe1, ffd8ffe2 (通常后跟其他字节，但前四字节足以识别)
- PDF: 25504446
通过FileReader API读取文件的开头几个字节，并将其转换为十六进制字符串，然后与已知的文件头签名进行比对，即可判断文件的真实MIME类型。
3. 在blueimp jQuery File Upload中集成MIME类型验证
blueimp jQuery File Upload是一个功能强大的文件上传插件，它提供了丰富的回调函数，允许开发者在上传过程的不同阶段插入自定义逻辑。add回调函数是进行客户端文件验证的理想位置，因为它在文件被添加到上传队列时触发，且在实际上传请求发送之前。
3.1 HTML结构
首先，确保你的HTML包含正确的文件输入元素和blueimp jQuery File Upload插件所需的结构：
<div id="myfile_mydrive" class="fileupload">
<div class="fileinput-button btn btn-success btn-sm">
<i class="fa fa-paperclip"></i>
<span>浏览文件</span>
<input type="file" id="myfiles" name="myfiles">
</div>
<table role="presentation" class="table table-striped">
<tbody class="files"></tbody>
</table>
</div>这里，id="myfiles"是实际的文件输入框，而id="myfile_mydrive"是fileupload插件的容器。
3.2 JavaScript实现
以下代码演示了如何将文件头签名验证逻辑集成到blueimp jQuery File Upload的add回调函数中：
$(function () {
'use strict';
$('#myfile_mydrive').fileupload({
// add回调函数在文件被添加到上传队列时触发
add: function(e, data) {
var file = data.files[0]; // 获取当前文件
if (!file) { // 检查文件是否存在
alert("请选择一个文件。");
return;
}
var fileReader = new FileReader();
fileReader.onload = function(e) {
// 读取文件的前4个字节
var arr = new Uint8Array(e.target.result).subarray(0, 4);
var header = "";
for (var i = 0; i < arr.length; i++) {
// 将字节转换为十六进制字符串，并确保两位表示
header += arr[i].toString(16).padStart(2, '0');
}
// 定义允许的文件类型及其对应的魔术数字
const allowedHeaders = [
'89504e47', // PNG
'47494638', // GIF
'ffd8ffe0', // JPEG (常见的多种变体之一)
'ffd8ffe1', // JPEG
'ffd8ffe2', // JPEG
'25504446' // PDF
];
// 检查文件头是否匹配允许的类型
if (allowedHeaders.includes(header)) {
// 如果文件类型匹配，则继续上传
data.submit();
} else {
// 如果文件类型不匹配，则阻止上传并提示用户
alert("文件类型不匹配或不支持，请上传图片（PNG/GIF/JPEG）或PDF文件。");
// 可以选择清空文件输入，防止用户尝试再次上传
$(e.target).val('');
return;
}
};
// 以ArrayBuffer形式读取文件内容，用于获取原始字节
fileReader.readAsArrayBuffer(file);
},
// 下载模板ID
downloadTemplateId: 'template-download-gallery',
// 上传模板ID
uploadTemplateId: 'template-upload-gallery',
// 服务器端接收文件数组的参数名
paramName: 'files[]',
// 上传处理脚本的URL
url: 'mydrive-upload.php',
// 期望的响应数据类型
dataType: 'json',
// 禁用自动上传，以便在add回调中手动控制
autoUpload: false,
// 最大允许上传文件数量
maxNumberOfFiles: 10,
// 客户端接受的文件类型正则，作为初步过滤（但不可靠）
acceptFileTypes: /(\.|\/)(pdf|gif|jpe?g|png)$/i,
});
});3.3 代码解析与关键点
-
add回调函数：
- 这是整个解决方案的核心。当用户选择文件时，fileupload插件会触发此回调。
- data.files[0]获取到当前选中的文件对象。
-
FileReader API：
- new FileReader()创建一个文件读取器实例。
- fileReader.onload事件在文件读取完成后触发，此时e.target.result包含了读取到的文件内容。
- fileReader.readAsArrayBuffer(file)指示FileReader以ArrayBuffer的形式读取文件内容。ArrayBuffer是用于表示通用、固定长度的原始二进制数据缓冲区的对象。
-
提取文件头：
- new Uint8Array(e.target.result)将ArrayBuffer转换为Uint8Array，这是一个8位无符号整数数组，方便逐字节访问。
- .subarray(0, 4)提取数组的前4个字节，这些就是我们关注的魔术数字。
- 循环将每个字节转换为两位十六进制字符串（toString(16).padStart(2, '0')），并拼接起来形成完整的头部签名字符串。
-
MIME类型匹配：
- allowedHeaders数组包含了所有允许的文件类型的魔术数字。
- allowedHeaders.includes(header)检查当前文件的头部签名是否在允许列表中。
-
控制上传流程：
- 如果匹配成功，调用data.submit()手动触发文件上传。
- 如果匹配失败，弹出警告，并通过return阻止data.submit()的执行，从而取消本次上传。
- $(e.target).val('') 可以用于清空文件输入框，防止用户在提示后再次尝试上传相同的文件。
-
autoUpload: false：
- 这是一个关键设置。将其设置为false可以禁用fileupload插件的自动上传功能。这样，我们就可以在add回调中手动控制何时调用data.submit()，从而在验证通过后才开始上传。
-
acceptFileTypes：
- 尽管我们进行了更严格的头部验证，但acceptFileTypes正则表达式仍然有用。它可以在浏览器层面提供初步的过滤，改善用户体验，但不能作为唯一的安全措施。
4. 注意事项与总结
- 客户端验证并非万能： 尽管文件头签名验证比简单的扩展名或file.type检查更可靠，但它仍然是客户端验证。恶意用户总有可能绕过客户端脚本。因此，服务器端的文件MIME类型验证是必不可少的，且应作为最终的安全防线。
- 扩展支持的MIME类型： 如果需要支持更多文件类型，只需查找相应文件类型的魔术数字，并将其添加到allowedHeaders数组中。
- 错误处理： 在实际应用中，FileReader的onerror事件也应该被考虑，以处理文件读取过程中可能出现的错误。
- 用户体验： 除了alert提示，可以考虑使用更友好的UI提示方式，例如在页面上显示错误消息。
通过将文件头签名验证逻辑集成到blueimp jQuery File Upload的add回调函数中，我们能够实现一个更健壮、更难以被绕过的客户端文件类型验证机制，显著提升了文件上传功能的安全性和可靠性。
