CORS error when attempting to upload non-image to ImageField #254
Comments
agsimmons
changed the title
|
Hi @agsimmons, Thanks for reaching out. This is interesting, I haven't seen this before. How did you stumble on this error? Yes, the policy is set to specific content types, if they are defined for the input. This is done to add a little backend validation, since you can't trust users. However, this is rudimentary at best and I would always suggest properly vetting user input, to avoid injections. Anyhow, I believe Firefox is just displaying this as a CORS error, since yes, the request is CORS and didn't succeed. However, if you go to the network tap and select XHR, you will probably find the server response from S3. I don't know what they respond, but most likely with a 400 or a 403. I didn't write any error handling for failed requests, since they shouldn't happen. S3s uptime is exceptional, and the interface should prevent users from selecting files not meeting the accept attribute. Thus, my curiosity about how you stumbled upon this issue. Best! |
|
I should have mentioned that this was in the Django admin interface specifically. In the admin interface, ImageFields inputs are created with the accept="image/*" attribute, which should tell the browser to only allow image files, but Firefox (on Linux at least) seems to ignore this by default and allow you to choose any file. I accidentally chose a video file for this input, and tried to save the model in the admin interface. Nothing happened, so I looked in the console and noticed this error. Without django-s3file following these same steps, the video file is uploaded, then Django validates that it is actually an image file. That fails, and then an error is shown to the user in the admin interface. This isn't great as it wastes time uploading an invalid file, but that's why I had that expectation. Maybe this isn't an issue with django-s3file and is just due to a lack of client-side input validation. Below are screenshots of the network inspector. Upon saving the model, two requests are made. The first OPTIONS requests succeeds, and the second POST request fails with the CORS error. It appears that it really is a CORS error, and the request never makes it to S3.
Thanks! |
|
Hi there, thanks for the details. It does seem to be a CORS issue, since the browsers is preventing the request. Can you share your |
If you have an ImageField, and try to upload a non-image file, the POST request initiated by s3file.js to the S3 bucket fails with a CORS error.
In Firefox, the error is
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://bucketname.s3.amazonaws.com/. (Reason: CORS request did not succeed). Status code: (null).If you instead upload a valid image file to that same field, the request succeeds with no CORS error.
If you change the extension of a non-image file to .png, and upload it to the ImageField, there is no CORS error but the "Upload a valid image. The file you uploaded was either not an image or a corrupted image." error is displayed as expected.
My expectation is that if you try to upload a non-image file to an ImageField, it would be uploaded to tmp/s3file/ with no CORS error. The field validators would then execute, which would recognize that the uploaded file is not an image or doesn't have the correct extension, then an error would be returned and displayed to the user like normal. Alternatively, I would expect there to be no CORS error but instead a 4xx response from S3 if the content type is not allowed.
I haven't yet been able to identify why this is happening. I see that in the inputs data-fields-policy, it specifies
["starts-with", "$Content-Type", "image/"], but I don't know how this could cause a CORS error.The text was updated successfully, but these errors were encountered: