Can't access image saved in bucket in Javascript code

Question

I have a django project that uploads files to a AWS S3 bucket. The uploaded files and the static files are shown correctly if they are rendered in the template using the {% static %} tag for example. However, when I want to access the image in a javascript code using model_object.image.url, the image doesn't show up. I inspected the code, took the url that was rendered in the js code and pasted it on the browser, it gives me this error:

<Error>
<Code>AccessDenied</Code>
<Message>Query-string authentication requires the Signature, Expires and AWSAccessKeyId parameters</Message>
<RequestId>xxxx</RequestId><HostId>xxx</HostId>
</Error>

Some more information that might be useful:

The user uploads an image, then he can crop the image. I use Croppie for this, it is a js library that uses the url of the image like this:

$('.div').croppie({
    url: '{{ model_object.image.url }}',
});

Everything works locally. It is a problem with AWS I clearly don't understand.

Following solarissmoke comment, I added this bucket policy to my bucket:

{
    "Version": "2012-10-17",
    "Id": "Policy1468082822770",
    "Statement": [
        {
            "Sid": "Stmt1468082812651",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::criptolibertad/*"
        }
    ]
}

However, it still doesn't work. I noticed the url rendered in the template that doesn't work looks like this:

https://criptolibertad.s3.amazonaws.com/Django/0_squashmigrations.jpeg?Signature=HFDdOYvrfqz5DG...

If I open the resource directly from my bucket, the url looks like this:

https://s3-us-west-2.amazonaws.com/criptolibertad/Django/0_squash+migrations.jpeg?X-Amz-Date=201607...

I also right clicked on the folder and selected Make Public just in case.

Any advice will help.

Answer 1

First of all, the links above point to different paths, one is the file Django/0_squash+migrations.jpeg the other is Django/0_squashmigrations.jpeg. The latter is the one not working for me and it seems it's missing a + character (space?); I cannot access that file at all (I get an access error). I'm going to assume that's just a typo on your part.

Being familiar with your code (let me know if you want the link redacted), I have simulated the image upload, and even copied your policy over to my bucket.

What I noticed is that my model_objecct.image.url differs from yours in that it includes the AWSAccessKeyId like so:

> fs = FeralSpirit.objects.all()[1]
> print(fs.imagen.url)
https://so38134984.s3.amazonaws.com/OrillaLibertaria/Users/pavel/dev/temp/so38134984/rainbow_dash2.png?Signature=****&Expires=*****&AWSAccessKeyId=*******

The link in your example only includes the signature, thus the error message you see is very appropriate.

In fact, we can access the image above without any query strings just ok.

If you're trying to remove the query string parameters, since this will be a publicly accessible bucket, try adding AWS_QUERYSTRING_AUTH = False to your Django settings. This should generate the url without any query string parameters:

> fs = FeralSpirit.objects.all()[1]
> fs.imagen.url
'https://so38134984.s3.amazonaws.com/OrillaLibertaria/Users/pavel/dev/temp/so38134984/rainbow_dash2.png'

Which is still publicly accessible of course.

Answer 2

Ok, thanks to tutuDajajo and his answer in this question I asked when I narrowed down the issue, I found the problem and the solution:

Croppie.js was trying to load the image into an HTML5 canvas. Croppie.js automatically added crossorigin="anonymous" to the image. But the image was missing the correct CORS headers and the canvas was therefore "tainted".

I found out that changing Croppie.js source and removing crossorigin="anonymous" worked partially: The image was loaded correctly into the canvas, but it was impossible to export it and get the base64 image I needed to send to the server.

The real solution was to change my bucket CORS configuration, from this:

<AllowedHeader>Authorization</AllowedHeader>

to this:

<AllowedHeader>*</AllowedHeader>

BTW. AWS documentation is not clear about the AllowedHeader options.