How to restrict files with multiple extension to be uploaded

Question

I am using Kendo uploader to upload files into my application. I have made sure to allow only the extensions defined in my config to be allowed to upload or else to show up an error message. My code looks something like this

var validExtensions = [".pdf", ".doc", ".docx", ".pptx", ".xls", ".xlsx", ".txt"];

$('#uploader').kendoUpload({
  multiple: false,
  select: function (e) {
    if (validExtensions.indexOf(e.files[0].extension.toLowerCase()) <= -1) {
      alert("File type not allowed!");
      e.preventDefault();
      return false;
    }
  }
});

This works fine to accept files of only the given extensions. But there is an issue raised by the security team who are evaluating to avoid files with multiple extensions to be uploaded (e.g. fileName.msi.txt or fileName.exe.doc) should not be allowed.

I know we can split based on . and evaluate but I wanted to know in case we have a cleaner way to achieve this?

Thanks

That's not 'multiple extensions'. You can place dots anywhere you like within a filename (on a Windows system). The file extension is always only the final characters after the last dot. You can easily write a regex to filter filenames with multiple dots, however it's no more secure than stopping files which have a '1' in their name. If you want something more effective it would be a *much* better idea to validate the MIME type of the file before *and after* the upload. Remember that it's trivial to rename a file extension. Less so to forge a MIME type. — Rory McCrossan, Oct 31 '18 at 12:04

Bronzdragon · Answer 1 · 2018-12-10T15:44:43.480

Unfortunately, you can't determine valid files based on their name only. File names can be named whatever you'd like, so there's no filtering that can't be circumvented with a quick rename.

If you are using HTML 5 though, you can access the MIME type of the selected <input type="file"> element.

For example:

<input type="file" onchange="handleFiles(this.files)">
<script>
function handleFiles(files) {
    var selectedFile = files[0];

    console.log(
        "The selected file has the name "
        + selectedFile.name
        + " and is of the type "
        + selectedFile.type + "."
    );
}
</script>

It won't recognize everything on your list, but you can make sure that, for example, PDF and .txt files are what they say they are.

How to restrict files with multiple extension to be uploaded

1 Answers1