文件上传那些事儿（02）：二进制级别的格式验证

前端

2023-09-05 15:37:56

二进制验证：提升文件上传安全性和准确性

文件上传是现代网络应用中不可或缺的功能，它使我们能够轻松地共享数据、图像和文档。然而，确保上传的文件符合预期格式至关重要，以保障数据完整性并防止安全风险。

传统文件格式验证的缺陷

传统的文件格式验证依赖于文件扩展名，这是一种简单但存在缺陷的方法：

容易伪造： 用户可以轻松更改文件的扩展名，从而绕过验证。
不适用于二进制文件： 扩展名验证仅适用于文本文件，对于二进制文件（如图像和视频），则无能为力。
识别范围有限： 扩展名验证只能识别常见的文件格式，对于新兴或不常见的格式则无法识别。

二进制验证的原理

二进制验证通过分析文件的内容，而不是其扩展名，来确定文件的格式。具体步骤如下：

读取指定字节： 读取文件的指定字节（通常是前几个字节）。
比较文件头： 将读取的字节与已知的文件头（Magic Number）进行比较。
确定文件格式： 如果匹配，则确定文件的格式。

文件头是特定文件格式独有的字节序列，它标识了文件的类型和版本。例如，JPEG 文件的文件头为 FF D8 FF E0，PNG 文件的文件头为 89 50 4E 47 0D 0A 1A 0A。

JavaScript 中的二进制验证

在 JavaScript 中，我们可以使用 FileReader API 来读取文件的内容，并使用 DataView 来分析字节。

const reader = new FileReader();
reader.onload = (e) => {
  const buffer = e.target.result;
  const dataView = new DataView(buffer);
  const magicNumber = dataView.getUint32(0);
  // 与已知的文件头比较
};
reader.readAsArrayBuffer(file);

具体实现步骤

收集文件头： 收集各种文件格式对应的文件头。
读取文件前几个字节： 使用 FileReader 读取文件的指定字节。
比较文件头： 将读取的字节与收集的文件头进行比较。
确定文件格式： 如果匹配，则确定文件的格式。

代码示例

const fileHeaders = {
  // ... 文件格式对应的文件头
};

const validateFileFormat = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const buffer = e.target.result;
      const dataView = new DataView(buffer);
      const magicNumber = dataView.getUint32(0);
      for (const [format, header] of Object.entries(fileHeaders)) {
        if (magicNumber === header) {
          resolve(format);
        }
      }
      reject('未知的文件格式');
    };
    reader.readAsArrayBuffer(file);
  });
};