Making REST calls to AWS S3 using Pure Javascript (No SDK)

Question

I am trying to make a GET request to AWS S3 using pure Javascript. This is because I am unfortunately no longer able to use the SDK for all of my requests. I have been attempting to follow the documentation provided by Amazon, however I have made very little progress. So far, I have only been able to generate my signature key. I would be enthused if someone could post an example of pure Javascript that makes a simple call to retrieve an object or even lists all of the objects with a specific prefix. I am, to be perfectly honest, completely lost reading their documentation. It seems like it is only useful for people who are intimately familiar with making these calls. #1 and #2 on this image here are what I'm struggling with. I think I sort of understand what they are wanting but I don't know how to fully translate it into an actual request. Unfortunately the code examples on their docs are very few and far between - and a lot of them are just pseudocode/small fractions of the whole thing

edit: Hello is anyone even reading this

edit2: Here's some stuff that isn't working that I'm trying to figure out how to do

var signingKey = getSigningKey(dateStamp, secretKey, regionName, serviceName);


    var time = new Date();
    //fullURL is something like https://s3.amazon.aws.com/{bucketName}/{imageName}
    time = time.toISOString();
    time = time.replace(/:/g, '').replace(/-/g,'');
    time = time.substring(0,time.indexOf('.'))+"Z";

    var request = new XMLHttpRequest();
    var canonString = "GET\n"+
                        encodeURI(fullURL)+"\n"+
                        encodeURI("Key=asd.jpeg")+"\n"+
                        "host:s3.amazonaws.com\n"+
                        "x-amz-content-sha256:"+CryptoJS.SHA256("").toString()+"\n"+
                        "host;x-amz-content-sha256\n"+
                        CryptoJS.SHA256("").toString();


    var stringToSign = "AWS4-HMAC-SHA256\n"+
                        time+"\n"+
                        "20181002/us-east-1/s3/aws4_request\n"+
                        CryptoJS.SHA256(canonString).toString();


    var authString = CryptoJS.HmacSHA256(signingKey, stringToSign).toString();

    var queryString = "GET https://s3.amazonaws.com/?Action=GetObject&Version=2010-05-08 HTTP/1.1\n"+
                        "Authorization: AWS4-HMAC-SHA256 Credential="+accessKey+"/20181002/us-east-1/s3/aws4_request, SignedHeaders=host;x-amz-date, Signature="+authString+"\n"+
                        "host: s3.amazonaws.com\n"+
                        "x-amz-date: "+time+"\n";

    request.open("GET", "https://s3.amazonaws.com/?Action=GetObject&Version=2010-05-08", false);
    request.setRequestHeader("Authorization", "AWS4-HMAC-SHA256 Credential="+accessKey+"/20181002/us-east-1/s3/aws4_request, SignedHeaders=host;x-amz-date, Signature="+authString);
    request.setRequestHeader("host", "s3.amazonaws.com");
    request.setRequestHeader("x-amz-date", time);
    request.send();

edit3: Here are a bunch of errors I get, presumably because I have no idea what I'm doing.

index.js:61 Refused to set unsafe header "host"
index.js:63 OPTIONS https://s3.amazonaws.com/?Action=GetObject&Version=2010-05-08 403 (Forbidden)
index.js:63 Failed to load https://s3.amazonaws.com/?Action=GetObject&Version=2010-05-08: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
index.js:63 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://s3.amazonaws.com/?Action=GetObject&Version=2010-05-08'.

Answer 1

You might want to use the SDK, combined with the browser debugger to figure out how the SDK formats the request. In the Chrome debugger Network tab, you can copy the request as a javascript fetch. This will show all the headers you need to set. You can then use this as a basis for your non-SDK code.