如何验证文件真实类型？Multer上传图片遇伪造类型问题求助

你的问题核心在于仅依赖客户端传来的MIME类型或文件扩展名做验证，无法识别被篡改后缀的恶意文件。要彻底解决，需要在客户端上传前做前置验证（提升用户体验），同时在后端做强制验证（保障安全性），两者结合才能有效拦截。

一、客户端（React）前置验证：读取文件魔术数字 #

直接读取文件的前几个字节（魔术数字），这是文件类型的唯一标识，不受后缀篡改影响。PNG文件的魔术数字是 89 50 4E 47 0D 0A 1A 0A（十六进制为 89504e470d0a1a0a）。

React代码示例：

import axios from 'axios';

const AvatarUpload = () => {
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // 读取文件前8个字节验证魔术数字
    const reader = new FileReader();
    reader.onload = (event) => {
      const byteArray = new Uint8Array(event.target.result).subarray(0, 8);
      const hexHeader = Array.from(byteArray)
        .map(byte => byte.toString(16).padStart(2, '0'))
        .join('');

      // 验证PNG的魔术数字
      if (hexHeader !== '89504e470d0a1a0a') {
        alert('请上传真实的PNG格式图片！');
        e.target.value = ''; // 清空文件选择器
        return;
      }

      // 验证通过，执行上传
      uploadAvatar(file);
    };
    reader.readAsArrayBuffer(file.slice(0, 8)); // 仅读取前8个字节，节省资源
  };

  const uploadAvatar = async (file) => {
    const formData = new FormData();
    formData.append('image', file);

    try {
      await axios.post('/api/upload-avatar', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      });
      alert('头像上传成功');
    } catch (err) {
      console.error('上传失败:', err);
      alert(err.response?.data?.message || '上传出错');
    }
  };

  return (
    <input type="file" accept=".png" onChange={handleFileChange} />
  );
};

export default AvatarUpload;

二、后端（Node.js）强制验证：基于文件内容判断类型 #

客户端验证可以被绕过（比如禁用JS），所以后端必须通过文件内容做最终验证。使用file-type库（无需文件路径，直接从文件流/Buffer读取魔术数字）：

步骤1：安装依赖 #

npm install file-type

步骤2：修改Multer配置 #

const multer = require('multer');
const { fileTypeFromStream } = require('file-type');
const fs = require('fs');
const path = require('path');

// 磁盘存储配置不变
const imageConfig = multer.diskStorage({
  destination: (req, file, callback) => {
    const uploadDir = './Config/Uploads/Images';
    // 确保目录存在
    if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir, { recursive: true });
    }
    callback(null, uploadDir);
  },
  filename: (req, file, callback) => {
    const dt = new Date();
    const extname = path.extname(file.originalname).slice(1); // 直接用path获取扩展名更可靠
    callback(null, `image-${dt.getDate()}-${dt.getMonth()}-${dt.getFullYear()}-${dt.getTime()}.${extname}`);
  }
});

// 修改文件过滤器：基于文件内容验证类型
const imageFilter = (req, file, callback) => {
  fileTypeFromStream(file.stream)
    .then((fileType) => {
      // 重置文件流，否则Multer无法正常写入磁盘
      file.stream.unpipe();
      file.stream.reset();

      if (fileType && fileType.mime === 'image/png') {
        callback(null, true);
      } else {
        callback(new Error('仅允许上传PNG格式图片'), false);
      }
    })
    .catch((err) => {
      callback(new Error('文件类型验证失败'), false);
    });
};

const uploadImage = multer({
  storage: imageConfig,
  limits: { fileSize: 2048000 }, // 限制2MB
  fileFilter: imageFilter
}).single('image');

// 在路由中使用，并处理错误
app.post('/api/upload-avatar', (req, res) => {
  uploadImage(req, res, (err) => {
    if (err instanceof multer.MulterError) {
      return res.status(400).json({ message: '上传错误：' + err.message });
    } else if (err) {
      return res.status(400).json({ message: err.message });
    }
    res.status(200).json({ message: '上传成功', filePath: req.file.path });
  });
});

关键说明 #

1. 魔术数字验证原理：所有标准文件都有固定的开头字节（魔术数字），比如PNG的开头8字节是固定的，篡改后缀不会改变这些字节。
2. 前后端验证缺一不可：客户端验证减少无效请求，后端验证保障服务器安全。
3. 避免依赖客户端传来的信息：file.mimetype和file.originalname都可以被客户端伪造，必须以文件实际内容为准。

内容的提问来源于stack exchange，提问作者Sonic ilyas