背景

上傳圖片文件時，只支持上傳Mime type為 image/jpg, image/jpeg, image/png, image/svg+xml類型的圖片。使用了antd的Uploader組件，該組件的props屬性中提供了beforeUpload方法，該方法的簽名:

(file, fileList) => boolean | Promise

通過file的type判斷圖片類型，不符合類型則終止上傳。
奈何測試不同意這種做法，因為存在安全風(fēng)險，假設(shè)某個木馬文件，手動修改后綴為.jpg，拿到的type也是符合要求的，但是就默默的把木馬文件上傳到我們的服務(wù)器。
調(diào)研了一些方法后，決定結(jié)合type類型和文件頭的方式來判斷文件類型。

實現(xiàn)

直接讀取文件的前幾個字節(jié)。 常用文件的文件頭如下：

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回調(diào)里實現(xiàn)文件頭和文件類型共同判斷:

// 判斷文件是否包含特定圖片類型
isiMageType(type: string = '', hexValue: string = '') {
    return (
      includes(MIME_IMAGE_TYPE, type.toLocaleLowerCase()) &&
      (includes(hexValue.toLowerCase(), 'ffd8ff') ||
        includes(hexValue.toLowerCase(), '3c3f786d') ||
        includes(hexValue.toLowerCase(), '89504e47'))
    )
}

// 處理上傳前的回調(diào)函數(shù)
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