Js-core: Plus-sign in S3 key causes 404

Created on 16 Dec 2019 · 3Comments · Source: imgix/js-core

Trying to fetch an image for an object in S3 with a '+' in its key causes 404.

Example:

GET https://<cname>.imgix.net/E+P-003_D.jpeg // -> 404
GET https://<cname>.imgix.net/E%2BP-003_D.jpeg // -> 200

I suspect, it's due to encodeURI in https://github.com/imgix/imgix-core-js/blob/master/src/imgix-core-js.js#L106. As the S3 key is a path, the module uses encodeURI, which accepts '+' symbols and does not encode them. S3, however, interprets those as spaces.

Source

robdasilva

Most helpful comment

Hi @sherwinski,

Thank you! That's also the quick fix, I came up with yesterday :)

Let me know, if I can help with anything in finding a more elegant solution.

robdasilva on 17 Dec 2019

👍2

All 3 comments

Hey @rschweizer,
Thanks for bringing this up. Unfortunately there isn't a straightforward solution for this as encoding the + runs the risk of breaking setups that don't use S3 sources. For now the quickest solution would be to separately encode the + after generating the URL:

client.buildURL(path, params).replace(/\+/g, '%2B')

I know it's not a satisfying answer, but know that we are currently investigating a better solution for this. Feel free to comment back if you have any other questions. Thanks

sherwinski on 17 Dec 2019

Hi @sherwinski,

Thank you! That's also the quick fix, I came up with yesterday :)

Let me know, if I can help with anything in finding a more elegant solution.

robdasilva on 17 Dec 2019

👍2

@rschweizer hey :wave: thanks for opening this issue and bringing this to our attention. I am glad that you and @sherwinski have found a similar solution :)

Moving forward, we're already thinking harder about how/when encoding should/shouldn't take place as well as handling edge cases. I've created an internal document tracking this issue and we are already working on a more elegant solution.

I am going to close this out for now, but _please_ feel free to comment/pull/open-an-issue again if you have any questions, comments, or concerns.