-2

I have a React App (created via create-react-app) secured with OAUTH2. Currently all dynamic content is via REST APIs, secured with the same OAUTH2 token issued at login. It is hosted on AWS.

I want to implement a picture library and here are two React components that i'm considering:

Both components get the images from a URL, meaning each image must be hosted on a web server and be publicly accessible. My understanding is that the client browser will download the React page (including gallery component) then attempt to fetch the image from the URL.

My question is how would i secure access to the images using the same OAUTH2 token? The obvious (?) answer is to serve the images via the REST APIs, thus keeping the security architecture consistent. I'd appreciate some feedback on whether this is indeed the optimum approach or there are other options.

Thankyou

5
  • Why am i getting down-voted without explanation?
    – Kevin
    Dec 11, 2020 at 14:18
  • I didn't downvote yet, but see Green fields, blue skies, and the white board - what is too broad?
    – gnat
    Dec 11, 2020 at 14:42
  • Sorry but I don’t think my question is too broad. I’ve a hosting provider, a development framework and a security standard - all of which are built and live. I’ve also chosen two potential technology components and have a point question about how to secure a specific integration.
    – Kevin
    Dec 11, 2020 at 15:32
  • 1
    @Kevin: your question (not you) gets downvoted without a comment for the same reason most of the questions on this site get uncommented downvotes: because we have a few community members here who have a strong communication problem and don't understand the difference between a question which is totally crap (where commentless downvotes are justified), and question like yours, where a comment could help the asker to improve an on-topic question. So don't take it personal.
    – Doc Brown
    Dec 13, 2020 at 7:42
  • 1
    @DocBrown: that's my frustration - of course i'm happy to accept constructive criticism. I've now some replies so that's great - thankyou
    – Kevin
    Dec 13, 2020 at 17:38

2 Answers 2

0

Since embedded images are requested using a GET to the server, you are stuck with query string parameters or cookies. Being that query string params are part of the URI and will get logged in server access logs and browser history, I would not recommend using the query string. That means you are stuck with cookies.

You can add a cookie to pass the auth token. The server needs to read the cookie and verify it before sending back the image.

For a GET request originating from an <img> tag, cookies are your only choice.

2
  • Thanks, that's helpful. Ref: the cookies i am not sure i follow? I believe I can pass an auth token in a GET request header whether i use a cookie or not?
    – Kevin
    Dec 13, 2020 at 17:40
  • @Kevin: you cannot pass additional headers with a GET request initiated by a browser using an <img> tag, though. Remember that you are constrained by the web browser execution environment. Dec 13, 2020 at 18:05
0

You answered your own question - use the API. Extra benefit of going through the API is that the image files don't have to be web accessible and you have more flexibility in how you store them on your servers. Downside is (potentially) your API may have some overhead that is unnecessary (such as database connections) for loading & returning an images.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.