S3 bucket CORS error for loading image via JS

Question

I have an s3 bucket setup with public files. This is the CORS config for this bucket -

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/938934/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

In my html webpage, I am trying to access an image file from this bucket, and I am able to render image on my webpage via s3 bucket that -

<img src="bucketurl/abcd"/>

But, when I am trying to load that image via javascript, it is not loading and giving cors error. (this is a third party plugin code, which cannot bypass CORS. http://html2canvas.hertzen.com/ ) -

var imageLoadHandler = function imageLoadHandler(supportsDataImages) {
    return new Promise(function (resolve, reject) {
        var img = new Image();
        img.onload = function () {
            return resolve(img);
        };
        //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous
        if (!supportsDataImages || useCORS) {
            img.crossOrigin = 'anonymous';
        }

        img.onerror = reject;
        img.src = src;
        if (img.complete === true) {
            // Inline XML images may fail to parse, throwing an Error later on
            setTimeout(function () {
                resolve(img);
            }, 500);
        }
        if (_this4.options.imageTimeout) {
            var timeout = _this4.options.imageTimeout;
            setTimeout(function () {
                return reject( true ? 'Timed out (' + timeout + 'ms) fetching ' + src.substring(0, 256) : '');
            }, timeout);
        }
    });
};

This is the error -

Access to image at 'https://bucketurl/abcd' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I dont want to open resources from all origins. I just want to open resources from s3bucket. How and what change needs to be done for this.

Answer 1

Your current CORS configuration allows GET , HEAD , and POST requests from all origins.

However, some browsers do send a preflight request ¹ to verify what HTTP requests are supported by a server.

The preflight request is a OPTIONS request and this is performed with specific headers. Your current configuration has only preflight requests with the Authorization header allowed
This means that browsers like Google Chrome that send out a preflight request will fail on this note.

You should include entries for all headers sent in the preflight request as an allowed header in your CORS configuration. ²

I suggest restricting CORSRule to only origins that you've considered. Keep tweaking the rules till you come upon a restrictive policy that fits your application. ³

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/938934/">
<CORSRule>
    <AllowedOrigin>http://localhost:8080</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>/replace with another preflight header/</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>http://html2canvas.herzen.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>OPTIONS</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>/replace with another preflight header/</AllowedHeader>
</CORSRule>
</CORSConfiguration>

You can view the response headers for the preflight request, when you inspect it in the network tab of your browser.

You can also specify a wildcard to match allow all headers in the preflight request.

    <AllowedHeader>*</AllowedHeader>