Accessing images which requires authentication in HTML

Question

I am trying to access images locally in an HTML file from a build server which requires authentication. Below is the example code.

<html>
<head>
<title>Build Report</title>
</head>
<body>
<img width="30%" src="https://ci-system.net/project/build/build-1/image-1.png"/>
<img width="30%" src="https://ci-system.net/project/build/build-1/image-2.png"/>

</body>
</html>

I have already signed in to the server in the same browser session. When I open the HTML file in the same browser session, each image tag is trying to authenticate again with the authentication server and these requests are successful without entering the credentials again. In the below image, I have highlighted the two requests for two images.

But when I enter the URL of the image in the browser directly, it does not require re-authentication, I assume it is because of Session Cookies from the build server.

Why are not the session cookies from the Build server reused when I access these images from the HTML file directly and try to reauthenticate for each image separately?

Because GET requests does not add any additional headers. You should add login token into image URL or use some API for it — Justinas
– Justinas, Commented Nov 22, 2022 at 8:30
@Justinas Can you post this as an answer so that i can accept it :) — Sirish Kumar Bethala
– Sirish Kumar Bethala, Commented Nov 22, 2022 at 11:06
What browser are you using? What version of that browser? How is it currently configured with regards to third party cookies? — Quentin
– Quentin, Commented Nov 22, 2022 at 11:26
@Quentin I am using Firefox 103.0.1 version and regarding cookies option "Cross-site tracking cookies, and isolate other cross-site cookies" is enabled. When i change this to only "Cross-site tracking cookies" it reuses the existing session cookies — Sirish Kumar Bethala
– Sirish Kumar Bethala, Commented Nov 22, 2022 at 12:54

Quentin · Accepted Answer · 2022-11-22 12:56:59Z

1

You've configured your browser to "isolate other cross-site cookies" so, when you open the HTML document on a different origin, it uses a different cookie jar which does not contain your logged in session cookies.

answered Nov 22, 2022 at 12:56

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justinas · Accepted Answer · 2022-11-22 11:12:55Z

0

Because GET requests does not add any additional headers. You should add login token into image URL or use some API for it

answered Nov 22, 2022 at 11:12

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

2 Comments

Quentin Over a year ago

Plenty of "additional headers" are added in a GET request. Both the request triggered by the <img> and the request triggered by the user "enter the URL of the image in the browser directly" will be GET requests.

Nihal Chandwani Over a year ago

I added the headers , and image is loading in inspector, but not in html, response.data is very , long and unreadable

Collectives™ on Stack Overflow

Accessing images which requires authentication in HTML

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related