一、为什么需要限制文件类型
在前后端交互的过程中，我们经常需要上传和下载文件。但是文件类型有可能是恶意文件，例如：病毒、木马等。限制文件类型可以避免恶意文件的上传和下载，保证网站的安全。
二、前端限制文件类型的方式
前端根据不同浏览器的API，可以通过以下方式来限制文件类型：
1、设置文件类型的accept属性
<input type="file" accept=".doc,.docx,.pdf,.jpg,.jpeg,.png" />
accept属性控制文件选取对话框只弹出指定类型文件，但是用户仍然可以通过修改文件扩展名来绕过验证，所以需要在后端再次验证文件类型。
2、使用FileReader对象读取文件类型
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = () => {
const result = reader.result;
const arr = new Uint8Array(result);
const header = [];
for (let i = 0; i < arr.length; i++) {
header.push(arr[i].toString(16));
}
const fileType = getFileType(header.join(''));
};
reader.readAsArrayBuffer(file);
function getFileType(head) {
switch (head) {
case '89504e47':
return 'image/png';
case '47494638':
return 'image/gif';
case '25504446':
return 'application/pdf';
default:
return 'unknown';
}
}
使用FileReader对象读取文件，获取文件的字节流，根据字节流的前几位，判断文件类型。但是这种方式只能读取文件的前几个字节，可能存在误判，需要后端再次验证。
三、后端限制文件类型的方式
后端也需要对文件类型进行验证，避免绕过前端验证的恶意文件被上传。
1、使用mime类型判断文件类型
const fs = require('fs');
const fileType = require('file-type');
const file = fs.readFileSync('/path/to/file');
const mime = fileType(file).mime;
if (!/^(image\/|video\/|audio\/)/.test(mime)) {
console.log('文件类型错误');
}
使用file-type插件获取文件的mime类型，根据mime类型判断文件类型是否符合规定。缺点是文件没有扩展名时无法判断。
2、使用扩展名判断文件类型
const path = require('path');
const extname = path.extname('/path/to/file');
if (!/^(.jpg|.jpeg|.png)$/i.test(extname)) {
console.log('文件类型错误');
}
通过文件的扩展名判断文件类型是否符合规定。但是扩展名是可以被修改的，所以需要结合mime类型验证。
四、总结
前后端都需要对文件类型进行验证，可以通过accept属性、FileReader对象、mime类型、扩展名等方式进行验证。建议采用多种方式结合，提高验证的准确性。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/190879.html
微信扫一扫 
支付宝扫一扫 