search

imgix / react-imgix

React component to display imgix images
https://www.npmjs.com/package/react-imgix
Other
360 stars 64 forks source link

Add support for signing image URLs #12

Closed matthurne closed 8 years ago

matthurne commented 8 years ago

https://www.imgix.com/docs/tutorials/securing-images

matthurne commented 8 years ago

Err, don't mind me. This doesn't make sense. Can't send the secret needed to sign the URL down to the browser...

esetnik commented 5 years ago

Actually I came across the same issue. There's no way currently to use react-imgix with web proxy sources since those require signing. There should be way to generate the signatures on the server based on the parameters and then pass them into the library to be applied to the src and srcSet urls.

An example would be:

<Imgix src="https://domain.imgix.net/image.jpg" width={100} />

produces:
https://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,
https://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,
https://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,
https://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,
https://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x
<Imgix src="https://domain.imgix.net/image.jpg" width={100} signatures={['abc','def','hij','klm','nop']} />

produces:
https://domain.imgix.net/image.jpg?q=75&w=100&dpr=1&s=abc 1x,
https://domain.imgix.net/image.jpg?q=50&w=100&dpr=2&s=def 2x,
https://domain.imgix.net/image.jpg?q=35&w=100&dpr=3&s=hij 3x,
https://domain.imgix.net/image.jpg?q=23&w=100&dpr=4&s=klm 4x,
https://domain.imgix.net/image.jpg?q=20&w=100&dpr=5&s=nop 5x
sherwinski commented 5 years ago

Hey @esetnik thanks for the suggestion! While your proposed property does avoid exposing your API key, I think there are other factors to take into consideration when making a change like this. For one, this approach would break in situations where we roll out default parameter values such as in #322 or anything else that affects query parameter generation. Also, we are pretty hesitant to introduce a property whose use case is so narrow — we’d like to only introduce features that are clear and easily comprehendible for general users.

My best suggestion in this scenario is to use a backend library like imgix-core-js to sign each of the image urls and pass that down to the scrset field on the client side. Feel free to comment back if you have any other questions.

esetnik commented 5 years ago

The downside of imgix-core-js is that there isn't an option to generate the srcset code. It's a bit tedious to do it manually for each of the sources. The advantage of this project is easy dropping imgix images into react projects. If you can't do that for any imgix images hosted by web proxy then this project has significantly reduced utility. I can understand not wanting to add api surface, and my suggestion might not be the right way to go about this. I still think there's room for improvement in this area.

sherwinski commented 5 years ago

@esetnik I completely agree with that point and I've made a note to look into adding srcset generation functionality into imgix-core-js, as well as our other backend libraries. I can't promise a specific timeline but it is on our roadmap.

sherwinski commented 5 years ago

Hey @esetnik, happy to announce that we now support generating srcsets in imgix-core-js v2.1.0 🎉 I would definitely encourage you to give it a try and see if it helps with the pain points that you mentioned earlier. Thanks