CODEWITHSUNDEEP
htmlauthentication
Eric
Eric

Reputation: 941

How to basic authenticate in HTML?

I have a web cam that I want to put a snapshot on a web page. If I put this in my browswer it returns a username and password pop-up

http://CAM_IP_ADD:PORT/Streaming/Channels/1/picture

If I enter a username and password I get a snapshot. So I found that if I enter this into my browser it returns a snapshot

http://USERNAME:PASSWORD@CAM_IP_ADD:PORT/Streaming/Channels/1/picture

So I figured I would create a simple HTML with this

<!DOCTYPE html>
<html>
<body>
    <img src="http://USERNAME:PASSWORD@CAM_IP_ADD:PORT/Streaming/Channels/1/picture">
</body>
</html>

But it does not return an image. How can I authenticate this to get it to work?

Upvotes: 2

Views: 9915

Answers (1)

Peter
Peter

Reputation: 1391

Your webcam is using basic authentication and you can add your authentication string to a url. However this is a deprecated feature (https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#Access_using_credentials_in_the_URL) and this is likely the reason, why your webcam picture is not displayed: The browser just doesn't support the format anymore, at least not as an image-link.

The preferred method of authentication is via an Authorization Header in the following format

Authorization: Basic [Username:Password]

where [username:password] has to be base64 encoded. See the link above for details.

So a simple link won't work, you have to set custom http headers. To do this you can either set up a simple web server acting as a reverse proxy or you can use javascript to make an ajax request and then render the result as an image. Unfortunately all this is not as trivial as adding a simple link.

Here are a few links that might help you getting started with either option:

JS Post with Headers

Apache Reverse Proxy guide

https://httpd.apache.org/docs/2.4/howto/reverse_proxy.html

There's a chance that your way of adding an url will work in some older browsers, so you might want to try out a different browser before taking the clean but cumbersome way of doing things

Upvotes: 2

Related Questions