HTML5 中文件上传怎么在前端校验文件头魔数防止伪造后缀-H5教程-PHP中文网

前端校验文件头魔数是识别真实类型最可靠方式，需用Uint8Array读取二进制比对PNG、JPEG等特征，但仅为体验层防护，必须后端复核；应结合扩展名、MIME与魔数交叉验证，任一不匹配即拦截。

html5 中文件上传怎么在前端校验文件头魔数防止伪造后缀

前端校验文件头魔数（Magic Number）是识别文件真实类型最可靠的方式之一，能有效防止用户通过篡改后缀（如把 evil.php 改成 evil.pdf）绕过类型检查。但要注意：这仍是**体验层防护**，必须配合后端魔数重检，否则毫无安全意义。

读取文件前几个字节判断真实格式

使用 FileReader 或更现代的 file.arrayBuffer() 读取文件开头若干字节，比对已知魔数特征：

PNG：前 8 字节为 \x89PNG\r\n\x1a\n
JPEG：前 2 字节为 \xff\xd8
PDF：前 4 字节为 %PDF（ASCII 字符）
ZIP（含 .docx/.xlsx/.jar）：前 4 字节为 PK\x03\x04
GIF：前 6 字节为 GIF87a 或 GIF89a

用 ArrayBuffer + Uint8Array 提取魔数

避免用字符串比较（编码易出错），直接操作二进制：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

async function checkMagicNumber(file) {
  const buffer = await file.arrayBuffer();
  const view = new Uint8Array(buffer, 0, 8); // 读前 8 字节足够覆盖常见格式

  if (view[0] === 0x89 && view[1] === 0x50 && view[2] === 0x4e && view[3] === 0x47) {
    return 'png';
  }
  if (view[0] === 0xff && view[1] === 0xd8) {
    return 'jpeg';
  }
  if (file.name.toLowerCase().endsWith('.pdf') && 
      String.fromCharCode(...view.slice(0, 4)) === '%PDF') {
    return 'pdf';
  }
  if (view[0] === 0x50 && view[1] === 0x4b && view[2] === 0x03 && view[3] === 0x04) {
    return 'zip';
  }
  return null;
}