2

I have a S3 bucket with static website hosting

S3 is encoding route

/AniketFuryRocks/What is Lorem Ipsum?

to route

/AniketFuryRocks/What+is+Lorem+Ipsum%3F

instead of route

/AniketFuryRocks/What%20is%20Lorem%20Ipsum?

This Url encoding is resulting in a 404 error.

I have tried storing the object's route in both encoded and decoded fashing.

When storing the S3 Object using javascript encodeUri() function. Paths with spaces are working but paths with symbols like ? are not working.

I am noticing that the browser asks for a ? while s3 expects a %3F at the end of the string

Aniket Prajapati
  • 373
  • 3
  • 19

1 Answers1

2

It turns out that you need to encode symbols in the URL

I made S3Encode, npm repository for the same

Here is a function which does the job

function encode(filename) {
    const encodings = {
        '\+': "%2B",
        '\!': "%21",
        '\"': "%22",
        '\#': "%23",
        '\$': "%24",
        '\&': "%26",
        '\'': "%27",
        '\(': "%28",
        '\)': "%29",
        '\*': "%2A",
        '\,': "%2C",
        '\:': "%3A",
        '\;': "%3B",
        '\=': "%3D",
        '\?': "%3F",
        '\@': "%40",
    };

    return filename.replace(
        /([+!"#$&'()*+,:;=?@])/img,
        match => encodings[match]
    );
}

Use this function in anchor tags and related

eg

<a href=encode("/AniketFuryRocks/What is Lorem Ipsum?")></a>
Aniket Prajapati
  • 373
  • 3
  • 19
  • I have actually removed ":" from the encoding check because it is messed with "https:" then this worked for me. – Sandun Isuru Niraj Jun 03 '22 at 06:55
  • could you use `encodeUriComponent` on the individual components of the path and then join them together with "/"? That seems to be working for me – Andy Jul 31 '23 at 08:32