Adding bearer token when fetching image's src

[JensAja]

Hi,

I am using react-oidc to make API calls via Axios and it works like a charm.

Now I need to fetch images at a secured endpoint. To prevent complexity, I would like to fetch them directly from the <img> tag, for example: <img src="/api/secure/images/image_9871.jpg" width="500" height="600">

It looks like the bearer token isn't added by the service worker when performing the call to fetch the image, although it looks like the call does pass the service worker.

Is there any way to make this work?

Regards, Jens

[guillaume-chervet]

Thank you @jensaja for your issue. I am doing it like it on that project : https://github.com/AxaGuilDEv/ml-cli/blob/13b1c83de042711af16f683dd28c66a512d97ec7/src/Ml.Cli.WebApp/ClientApp/src/Server/Project/Annotations/Annotation.hook.js#L67

Does it help you?

[JensAja]

Hi @guillaume-chervet ,

Thanks for your response. The link you refer to is using fetch(), which is similar to Axios. However I want to prevent using any Javascript to fetch the image. I would like to simply put the endpoint as src of my img-tag:

<img src="/api/secure/images/image_9871.jpg" width="500" height="600">

According to my network log, the call passes the service worker, but the authorization header isn't added.

[guillaume-chervet]

It is may be a service worker only feature to add :)

[VladimirPlatonenko]

Hi @guillaume-chervet,

I want to bump this up a bit. There reason request from img tag is not upgraded with token in service worker is because it is not CORS request(request mode is 'no-cors') which according to specification - 'Prevents the method from being anything other than HEAD, GET or POST, and the headers from being anything other than simple headers. If any ServiceWorkers intercept these requests, they may not add or override any headers except for those that are [simple headers].'. As a result SW attempt to upgrade such request with authorization token is ignored. Work around this is to change mode to 'cors' inside service worker, e.g. in same place where we create new request with authorization header also change mode. I have tested this change locally and it works. I understand this might not me behavior we want by default so possible have it behind some switch in configuration(upgradeNonCorsRequests??). I can prepare pull request if this is something we happy to have.

[guillaume-chervet]

Hi @VladimirPlatonenko , it would be awsome a pullrequest from your part. Thank you very much for finding a solution, it is awesome too.

[VladimirPlatonenko]

Hi @VladimirPlatonenko , it would be awsome a pullrequest from your part. Thank you very much for finding a solution, it is awesome too.

I was trying to push my branch but it failed. Do I need any permssion?

[guillaume-chervet]

Hi @VladimirPlatonenko , thank you so much for your help. You need to fork and send a pullrequest from your fork. I think it how github work as default behavior.

[guillaume-chervet]

@jensaja , thank to @VladimirPlatonenko , the feature is now implemented in the last version of the library. https://github.com/AxaGuilDEv/react-oidc/pull/940

[guillaume-chervet]

Thank you @VladimirPlatonenko , @jensaja for all. I close the issue. Feel free to reopen it if needed.