accept属性仅影响文件选择器默认过滤,无法拦截恶意文件;前端应校验file.name后缀(严谨提取+小写比对)、文件大小及魔数,后端必须基于文件头而非扩展名或Content-Type做最终校验。

accept 属性根本拦不住伪装文件
写了 accept="image/*" 或 accept=".jpg,.jpeg,.png",用户点一下「所有文件」或直接拖拽一个 malware.exe 进来,input.files[0] 里照样有它,表单照样提交。这个属性只影响文件选择器的默认过滤,不校验、不拦截、不报错。移动端(尤其是 iOS Safari)甚至完全忽略它。
前端能做的唯一靠谱判断是 file.name 后缀 + 大小 + 魔数初筛
真正稳定可依赖的前端信号只有 file.name,但必须严谨提取后缀并转小写:
- 别用
file.name.split('.').pop()—— 遇到report.tar.gz就取到gz,错判 - 改用
file.name.slice(file.name.lastIndexOf('.')),再转小写比对白名单 - 必须同时检查
file.size,超限立即清空input.value,否则换文件不触发change - 高安全场景建议用
FileReader读前 12 字节,匹配 PNG(89 50 4E 47)、JPEG(FF D8 FF)等魔数,拒绝明显不匹配的
后端必须重做全部校验,且不能信任何客户端字段
以下全是无效防护,常见但危险:
-
$_FILES['file']['type'](PHP)或req.file.mimetype(Express)—— 完全由浏览器构造,可任意伪造 -
req.file.originalname(Node.js)—— 用户改后缀名就能绕过 - 只检查扩展名或只比对 MIME 白名单 ——
shell.php::$DATA或payload.jpg%00.php可绕过
真正有效的做法是:
立即学习“前端免费学习笔记(深入)”;
- 用
finfo_file($finfo, $tmpFile)(PHP)或file-type(Node.js)读临时文件头,获取真实 MIME - 对图片类文件,用
ImageMagick的identify或PIL.Image.open()尝试解析,捕获异常 - 关键文件加数字签名,上传时附带
.sig,服务端用公钥验证
存储环节最容易被忽略的致命细节
即使前面都做对了,如果文件落地路径没设对,照样执行成功:
- 绝不能把上传文件存到 Web 可访问目录(如
/public/uploads/),否则shell.jpg被 Nginx/Apache 当静态资源返回,但用户访问时可能触发解析器(如 Apache 的AddHandler) - 必须重命名文件(如 UUID + 时间戳),剥离原始
file.name中的所有语义 - 上传目录权限设为
noexec(Linux)或禁用脚本映射(Windows IIS) - 若业务必须提供下载,走后端代理流式响应,不要暴露真实文件路径
魔数校验和存储隔离这两步,是多数人写完前端校验就以为万事大吉时,最常漏掉的硬性防线。



















