filestack / filestack-js

Official Javascript SDK for the Filestack API and content ingestion system.
https://www.filestack.com
MIT License
205 stars 81 forks source link

Invalid mime type detected when file's extension doesn't match mime type #447

Open degregar opened 3 years ago

degregar commented 3 years ago

Our users sometimes send JPG files with PNG extension (or vice versa). The filestack API fails to detect it. It seems that it's based on extension, which is wrong.

Expected Behavior

If we send example-jpg.png (which is JPG) we want to get image/jpeg mime type.

Current Behavior

We get image/png instead.

Steps to Reproduce (for bugs)

cURL REQUEST

curl 'https://www.filestackapi.com/api/file/X8VpvxQLTKuLM9hiNDPt/metadata?width=true&height=true&md5=true&mimetype=true' \
  -H 'authority: www.filestackapi.com' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36' \
  -H 'accept: */*' \
  -H 'origin: http://editor.local.packhelp.com:3030' \
  -H 'sec-fetch-site: cross-site' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'referer: http://editor.local.packhelp.com:3030/' \
  -H 'accept-language: en-US,en;q=0.9' \
  --compressed

cURL response:

  {"height":853,"md5":"3373a7cc544cd592472b97abd4032792","mimetype":"image/png","width":640}

Example file (JPG really): example-jpg

How GIMP sees it: gimp-correctly-detects-mime-type-of-jpg-file

degregar commented 3 years ago

OK, I've fixed the issue on my side, although I think you should check it on your side as well.

The solution is this: before passing it to the upload method, I remove the type of the file.

    const unfreezedFile = new File([file], file.name, {
      type: undefined,
    })

The browser incorrectly recognized the mime type, passed it to filestack and, apparently, filestack trusted the input.

I've tested that as well on the EPS file (can't attach it), which was recognized by the browser as image/x-eps (uploaded file couldn't be transformed into PNG). In my integration tests I was passing just an URL, and filestack recognized it as application/postscript, and it worked fine.

jayotirana commented 3 years ago

What about renaming a .exe file to .mp4 or to other extensions. How to validate a exe file then.

degregar commented 3 years ago

Another case: browser was recognizing .ai files as application/illustrator, Filestack was recognizing them as application/illustrator as well. If I removed the type, as described above, I got:

It's kinda correct according to this topic: https://community.adobe.com/t5/illustrator/pdf-vs-ai/m-p/9710802#M87037

V8 was kind of a postscript structure, while V9+ has the structure of a PDF file.

Although wouldn't be better to recognize it correctly as application/illustrator? I guess Filestack, as an expert in handling image files, could access those hidden / private Illustrator's data.

Kordedekehine commented 1 year ago

This really helped actually