Is there a way not to let a blob (createObjectURL) show the image which is a GIF file but has a .jpeg extension?

Question

Using blueimp, I'm making a file upload module and I will show an image thumbnail before people upload the image.

My code contains the following:

$('.fileupload').fileupload({
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,
        maxNumberOfFiles: 1,
        maxFileSize: 3000000,//3MB
        loadImageMaxFileSize: 3000000,//3MB
}).on('fileuploadsubmit', function (e, data) {

}).on('fileuploadadd', function (e, data) {
    data.context = $('<div/>').appendTo('.files');
    $.each(data.files, function (index, file) {
        // ファイル情報を表示する
        var node = $('<p/>')
                        .append($('<span/>').text(file.name));
        // プレビューを表示する
        if (!index) {
            node.append('<br>');
            if((/\.(jpe?g|png)$/i).test(data.files[0].name))
            {
                node.append('<img class= "uploaded-image" src="'
                            + URL.createObjectURL(data.files[0]) + '"/><br>');
            }
                node.append(uploadButton.clone(true).data(data))
                    .append(cancelButton);
        }
        node.appendTo(data.context);
    });
}) // .on(... code following

It works well, but if people change a GIF file extension to ".jpeg" and upload it, the blob will also work well to show the GIF and, I think it's not safe. Is there a way not let blob to show the thumbnail In this case?

When submit the file, I'm checking the file in the server side if the file is really an image file (although it has a valid extension).

you could draw it to a canvas and only show the canvas, but why would it be unsafe? If I get it correctly, the image is uploaded by the user, so if he wants to do some XSS, he can just open the console, rather than relying on some complicated pixel manip. And if you do check server-side, it should be fine. — Kaiido, Jun 07 '16 at 09:07
oh and probably of some interest : http://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload — Kaiido, Jun 07 '16 at 10:53

score 0 · Answer 1 · edited May 23 '17 at 11:58

(this link helped me)

The code below worked well:

        if (!index) {
            node.append('<br>');
            if((/\.(jpe?g|png)$/i).test(data.files[0].name))
            {
                if (window.FileReader && window.Blob)
                {
                    var blob = data.files[0]; // See step 1 above
                    var fileReader = new FileReader();
                    fileReader.onloadend = function(e) {
                        var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
                        var header = "";
                        for(var i = 0; i < arr.length; i++) {
                            header += arr[i].toString(16);
                        }
                        if((header == "89504e47") || (header.substr(0,6) == "ffd8ff"))
                        {
                            $("button.upload").before('<img class= "uploaded-image" src="' + URL.createObjectURL(data.files[0]) + '"/><br>');
                            $(".file_upload").attr("style", "height: 600px; overflow-y: auto");
                        }
                        else
                        {
                            $("button.upload").prop('disabled', true);
                            var error = $('<span class="text-danger"/>').text(msg[4]);
                            $('.files').append('<br>').append(error);
                        }
                    };
                    fileReader.readAsArrayBuffer(blob);
                }
            }
                node.append(uploadButton.clone(true).data(data))
                    .append(cancelButton);
        }

Is there a way not to let a blob (createObjectURL) show the image which is a GIF file but has a .jpeg extension?

1 Answers1