How to Set The <Img> Tag with Basic Authentication

How to set the img tag with basic authentication

Bottom line: Not all browsers allow this. It may work in some but not others.

But as someone else has said already, it's not very safe -- you're effectively giving the login and password details to anyone who browses the page. Not good.

A better option would be proxy it through the same server that you're providing the html code from, then the href in the <img> tag could just be a local URL, and no-one need know where the image is actually coming from.

Authorization header in img src link

You can not perform authentication on images which are directly used as href in img tag. If you really want this type of authentication on your images, then it's better to fetch them using ajax and then embed in your html.

How to show an image which is secured by http authentication

I used IrishGeeks tip to get a solution. It works on all browsers. The script.php is

<?php
$url    = $_GET['url'];
$c = curl_init($url);
$authString = 'user:pass';
curl_setopt($c, CURLOPT_RETURNTRANSFER, true);
curl_setopt($c, CURLOPT_USERPWD, $authString);

$content = curl_exec($c);
$contentType = curl_getinfo($c, CURLINFO_CONTENT_TYPE);
header('Content-Type:'.$contentType);
print $content;
?>

Then use

<?php
print '<img src="script.php?url='.urlencode('http://www.example.com/image.bmp').'" />';
?>

To get the image.

Display an image in img-Tag from a basic-authed directory

This was easily made by creating a new get_images.php file which will open the Image using fopen() and fpasssthru()

then in the tag you can set src="get_image.php"

How to get src from URL which requires basic auth

Well , it seems the the proper way to implement such behaviour is the following:

<audio id= "audioElement" controls="controls"> Your browser does not support the HTML5 Audio element. </audio>

<script>

    window.onload = function() 
    {
      var oReq = new XMLHttpRequest();
      oReq.open('GET', 'https://upload.wikimedia.org/wikipedia/ru/6/62/Meow.ogg', true);
      oReq.responseType = "arraybuffer";

      oReq.onload = function (oEvent) 
      {
          var arrayBuffer = oReq.response; 
          if (arrayBuffer) 
          {
            var u8 = new Uint8Array(arrayBuffer);
            var b64encoded = btoa(String.fromCharCode.apply(null, u8));
            var mimetype="audio/ogg"; // or whatever mime type is
            document.getElementById("audioElement").src="data:"+mimetype+";base64,"+b64encoded;
          }
      }
      oReq.send(null);
    }

</script>

Hopefully, it will work with basic auth too...

Setting credentials for img basic authentication

I ended up using the WebClient class to set the credentials to authenticate to the other server and then download the photo locally:

                WebClient myWC = new WebClient();                    
                myWC.Credentials = new System.Net.NetworkCredential(bioSearchUsername, bioSearchPassword);
                string photoPath = Server.MapPath("~/images/Employees/" + employee + ".jpg");
                myWC.DownloadFile(imageLocation, photoPath);

After that, I referenced the local copy of the photo on the server:

imgPhoto.ImageUrl = photoPath;

This got around the authentication problems I was running into with the image.

---

Related Topics