文件上传之验证后缀与内容是否一致

在上传前验证，开发者们往往喜欢通过后缀或者File.type()去判断一个文件类型来决定是否符合上传要求。但这显然是不可靠的，当被别有用心的人利用后，就可能在服务器被执行。今天就来解决如何在前端验证文件内容跟后缀是否一致。

1. Magic number

既然要解析文件内容那这个 Magic Number 就很关键 => Magic number：即幻数，它可以用来标记文件或者协议的格式，很多文件都有幻数标志来表明该文件的格式。
以下是常见的文件头：

文件类型	文件头(16 进制)
JPEG (jpg)	FFD8FF
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
Adobe Acrobat (pdf)	255044462D312E
Email (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
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

2. 解析文件

通常上传文件我们都会获取File形式的文件；
FileReader 文档

// 1. 使用FileReader以ArrayBuffer的形式读取数据
// 2. 使用Uint8Array换取文件头，看截取前面几位就看具体需要了
const reader = new FileReader();
reader.onload = evt => {
  const result = new Uint8Array(evt.target.result.slice(0, 6));
  // 将截取的result和magic number比较
};
reader.readAsArrayBuffer(file);