CODEWITHSUNDEEP
htmlimage
UserX
UserX

Reputation: 1337

My input file with accepts: accept="image/gif, image/jpg, image/jpeg, image/png", is allowing to select other extensions

I have a form to select images for a gallery, and I want to allow user to select only jpg,gif and png image formats.

And now, for testing, I change extension of a image to .bmp like "image1.bmp", and when I click in my input file to select a image, this "image1.bmp" is hidden, but If I select "show all files", this "image1.bmp" appears, and I can select this "image1.bmp" and send this image in my form. And Im inserting this image with this format on database.

This is normal using accept="image/gif, image/jpg, image/jpeg, image/png"??

Because what I wanted is to block all formats that are not gif,jpg or png.

I have this input file:

<input type="file" name="img[]" multiple="multiple" accept="image/gif, image/jpg, image/jpeg, image/png" />

Upvotes: 5

Views: 36644

Answers (4)

Korvo
Korvo

Reputation: 9753

Clearly if you click "show all" can obviously see other files.

Your question is not quite hide or show, but filter at the time of upload, you have two solutions:

1) SERVER-SIDE: With php (just an example) and regExp:

if (preg_match('#^image\/(png|)$#', $_FILES[$i]['img']['type']) === false) {
    echo 'Invalid extension!';
} else {
    //Save file
}

2) CLIENTE-SIDE: With javascript use determinater lib:

https://github.com/rnicholus/determinater

Upvotes: 3

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201866

This is common browser behavior. Browsers that support the accept attribute use it to create an initial file filter, but they do not prevent the user from changing or removing the filter and thereby selecting and submitting any file they like. The purpose of the attribute is to help users select files of appropriate types.

What browsers should do is less clear. HTML 4.01 says that the accept attribute “specifies a comma-separated list of content types that a server processing this form will handle correctly. User agents may use this information to filter out non-conforming files when prompting a user to select files to be sent to the server”. The reference to server-side processing may be misleading. The attribute affects client-side (browser) behavior only. The intent is to say that the attribute value should be written according to what file type(s) are expected from the user; it is more or less self-evident that the server-side form handler should be written so that it is capable of handling the specified type(s).

HTML5 LC is more verbose. It says that the attribute “may be specified to provide user agents with a hint of what file types will be accepted”. It then describes how it could be used by a browser to provide an adequate user interface. It also says: “User agents should prevent the user from selecting files that are not accepted by one (or more) of these tokens.” This might be sensible, but browsers do not actually do that. Even if they did, the attribute would not constitute a security measure of any kind (because a user could edit the form, or write a form of his own, or use a browser that ignores the accept attribute). Its purpose is to protect a normal user from making mistakes, like submitting a file of a type that will be rejected by the server-side handler.

(Browsers interpret the accept attribute value in rather simple way. They work on filename extensions, so if you name a GIF file, or a plain text file, or a binary program file so that its name ends with .png, they will treat it as a PNG image file, instead of inspecting the content of the file. The .bmp extension is problematic, since it commonly means Windows Bitmap, for which there is no registered MIME type; browsers may treat the nonstandard notation image/bmp as corresponding to .bmp.)

You cannot block sending of files. What you can do is to deal with files properly server-side, and there you should not of course rely on filename extensions but detect the types from the file content.

Upvotes: 7

David
David

Reputation: 4883

The accept attribute is not widely accepted. Chrome and IE10+ support it. If you're using anything else, like Firefox, Safari, or Opera, it won't work. You can read more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

This means that like Guilherme suggested, you'll need a client side or server side check. I'd suggest both. Client site will immediately tell an unsuspecting user, while the server side will help filter malicious users. However, beware, there is some debate on how MIME type detection isn't exactly reliable. You can Google around if you want to find out more about that.

Upvotes: 0

GAEfan
GAEfan

Reputation: 11370

Changing the extension does not change the mimetype of the file. Do the same test with an actual BMP file.

Upvotes: 1

Related Questions