背景
上传图片文件时，只支持上传Mime type为 image/jpg, image/jpeg, image/png, image/svg+xml类型的图片。使用了antd的Uploader组件，该组件的props属性中提供了beforeUpload方法，该方法的签名:
(file, fileList) => boolean | Promise
通过file的type判断图片类型，不符合类型则终止上传。
奈何测试不同意这种做法，因为存在安全风险，假设某个木马文件，手动修改后缀为.jpg，拿到的type也是符合要求的，但是就默默的把木马文件上传到我们的服务器。
调研了一些方法后，决定结合type类型和文件头的方式来判断文件类型。
实现
直接读取文件的前几个字节。 常用文件的文件头如下：
JPEG (jpg)，文件头：FFD8FF
PNG (png)，文件头：89504E47
GIF (gif)，文件头：47494638
TIFF (tif)，文件头：49492A00
Windows Bitmap (bmp)，文件头：424D
CAD (dwg)，文件头：41433130
Adobe Photoshop (psd)，文件头：38425053
Rich Text Format(rtf)，文件头：7B5C727466
XML (xml)，文件头：3C3F786D6C
HTML (html)，文件头：68746D6C3E
Email [thorough only] (eml)，文件头：44656C69766572792D646174653A
Outlook Express(dbx)，文件头：CFAD12FEC5FD746F
Outlook (pst)，文件头：2142444E
MS Word/Excel(xls.or.doc)，文件头：D0CF11E0
MS Access (mdb)，文件头：5374616E64617264204A
WordPerfect (wpd)，文件头：FF575043
Postscript (eps.or.ps)，文件头：252150532D41646F6265
Adobe Acrobat (pdf)，文件头：255044462D312E
Quicken (qdf)，文件头：AC9EBD8F
Windows Password (pwl)，文件头：E3828596
ZIP Archive(zip)，文件头：504B0304
RAR Archive (rar)，文件头：52617221
Wave (wav)，文件头：57415645
AVI(avi)，文件头：41564920
Real Audio (ram)，文件头：2E7261FD
Real Media (rm)，文件头：2E524D46
MPEG (mpg)，文件头：000001BA
MPEG (mpg)，文件头：000001B3
Quicktime (mov)，文件头：6D6F6F76
Windows Media (asf)，文件头：3026B2758E66CF11
MIDI (mid)，文件头：4D546864
在beforeUpload回调里实现文件头和文件类型共同判断:
// 判断文件是否包含特定图片类型
isiMageType(type: string = '', hexValue: string = '') {
return (
includes(MIME_IMAGE_TYPE, type.toLocaleLowerCase()) &&
(includes(hexValue.toLowerCase(), 'ffd8ff') ||
includes(hexValue.toLowerCase(), '3c3f786d') ||
includes(hexValue.toLowerCase(), '89504e47'))
)
}
// 处理上传前的回调函数
handleBeforeUpload(file: File) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader()
fileReader.readAsArrayBuffer(file)
fileReader.onload = () => {
if (fileReader.result) {
const view = new DataView(fileReader.result as ArrayBuffer)
const first4Byte = view.getUint32(0, false)
const hexValue = Number(first4Byte).toString(16)
if (!this.isJpgOrPngOrSvg(file.type, hexValue)) {
reject()
}
resolve()
}
}
}) as PromiseLike<void>
}
参考文档
https://moxo.io/blog/2017/01/16/using-javascript-to-read-file-real-mime-type/#%E5%8E%9F%E7%90%86
