/    Sign up×
Community /Pin to ProfileBookmark

Need help passing credentials via Javascript

Copy linkTweet thisAlerts:
Oct 21.2009

I have an existing .aspx page and I want to display a .jpg image from an IP camera on it. Here is what I tried:

[CODE]<img src=”http://admin:[email protected]/images/campic.jpg”> [/CODE]

It does not work since IE no longer allows you to pass credentials in the URL ([url]http://support.microsoft.com/kb/834489[/url]). If I take away the user and password in the above URL, it will popup with an HTTP authentication box everytime I load the page. I want it to automatically pass the credentials and display the cam image. I read that you can pass credentials using Javascript and Xmlhttp.open.

Do I create a Javascript file and stick it on my webserver and then call this from the HTML on my .aspx page? Something like this for the .js file?

[CODE]Xmlhttp.open(“GET”, “http://192.168.1.30/images/campic.jpg”, false, “admin”, “password”); [/CODE]

and this for the HTML portion so it gets called?

[CODE]<script type=”text/javascript” src=”http://mywebserver/jshttpauth.js”></script> [/CODE]

Thanks in advance!

to post a comment
JavaScript

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@slaughtersOct 21.2009 — What you plan to do looks like it will work, BUT you will be sending a username and password as clear text on the web (a view source will display it).

I hope it only has read-only access, because some one will grab it and use it to maliciously delete all the images off the camera.
Copy linkTweet thisAlerts:
@newin9009authorOct 21.2009 — Thank you. Yes, I will be using a read-only account before putting this in production so sending the credentials in plain text is fine.

When I try to do this, nothing appears on the page but in the lower left of the bottom bar, IE says "Done, but with errors on the page". I double click it and it shows the error is:

Error: 'Xmlhttp' is undefined

Code: 0
Copy linkTweet thisAlerts:
@slaughtersOct 21.2009 — You need to do some set up if you want to use the XMLHttpRequest object. You've got to point your variable "Xmlhttp" to a new instance of the object and the syntax can be slightly different depending on browser type.

Try something like this to initialize your Xmlhttp variable[CODE] var Xmlhttp;
try {
// Firefox, Opera 8.0+, Safari, etc..
Xmlhttp= new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
Xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
Xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
[/CODE]
Some more help can be found here:

Link to XMLHttpRequest Methods and Attributes: https://developer.mozilla.org/en/XMLHttpRequest

Link to XMLHttpRequest use: https://developer.mozilla.org/En/Using_XMLHttpRequest
Copy linkTweet thisAlerts:
@newin9009authorOct 21.2009 — Thank you. I added that to the top of jshttpauth.js and the error is gone now when refreshing the page. But it does not display anything and is completely blank.
Copy linkTweet thisAlerts:
@slaughtersOct 21.2009 — I do not believe that the "open" method of XMLHttpRequest does what you want it to. I think you want to use "openRequest":

https://developer.mozilla.org/en/XMLHttpRequest#openRequest&#37;28%29

EDIT ** Never Mind **

[CODE]void open(
in AUTF8String method,
in AUTF8String url,
[optional] in boolean async,
[optional] in AString user,
[optional] in AString password
);[/CODE]

is the correct syntax.

have you checked the value of the status ?

[CODE]alert(Xmlhttp.status);[/CODE]
Copy linkTweet thisAlerts:
@slaughtersOct 21.2009 — OK - did some searching. XMLHttpReuest is designed to return text data and a jpg file is binary so you need to do this slightly diffrerntly:

https://developer.mozilla.org/En/Using_XMLHttpRequest#Handling_binary_data

http://codingforums.com/showthread.php?t=141041

http://www.webdeveloper.com/forum/showthread.php?t=182861
Copy linkTweet thisAlerts:
@newin9009authorOct 21.2009 — Thank you. I tried it but it is still returning a blank page. I even tried copying his whole code with no modifications and it was still blank.

Here is the only thing in my test.aspx page:

[CODE]<script type="text/javascript" src="http://mywebserver/jshttpauth.js"></script>[/CODE]

And here is the contents of jshttpauth.js:

[CODE] myHref = "http://farm1.static.flickr.com/23/33501438_fe85d79851.jpg";
singleJPGHttpRequest = new MyXMLHttpRequestSpecificMimeType(myHref,calledOnLoadJPGfile,"image/jpeg");
singleJPGHttpRequest.LoadPage();

calledOnLoadJPGfile = function(theURL,CONTENTofURL) {
writeFile('test.jpg', CONTENTofURL);
}


MyXMLHttpRequestImage = function(fuURL,fuCallMeOnLoad) {
var MyThis = this;
this.status = 0; // siehe http-response-codes bzw xmlgetrequest-response-codes
this.theURL = fuURL; this.HTMLofURL = ''; this.CallMeOnLoad = fuCallMeOnLoad;
function onLoad (e) {
MyThis.status = e.target.status
MyThis.HTMLofURL = e.target.responseText;
// alert(MyThis.HTMLofURL.length); // gives the right length, and the saved image is viewable in irfanview and in the firefox-browser itself when entering the local address in the address input line
MyThis.CallMeOnLoad(MyThis.theURL,MyThis.HTMLofURL);
}
this.LoadPage = function() {
try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { alert("Permission UniversalXPConnect denied."); }
var r = new XMLHttpRequest();
r.overrideMimeType("text/plain; charset=x-user-defined");
r.onload = onLoad;
r.open ("GET", this.theURL, true);
r.send (null);
}
}

function writeFile(sFilePath, sFileContent) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("Permission UniversalXPConnect denied.");
}
file=Components.classes['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile);
file.initWithPath(sFilePath);
if (file.exists()) {
if (file.isFile()) {
Check = confirm("Vorhandene Datei wirklich überschreiben? n" + sFilePath);
if (Check == false) { return false; }
else { file.remove(false); }
} else { return false;}
}
file.createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE,420);

outputStream=Components.classes['@mozilla.org/network/file-output-stream;1'].createInstance(Components.interfaces.nsIFileOutputStream);
outputStream.init(file,0x04|0x08|0x20,420,0);
outputStream.write(sFileContent, sFileContent.length);
outputStream.close();
//file.launch();
return true;
}[/CODE]
Copy linkTweet thisAlerts:
@rnd_meOct 21.2009 — firefox has a binary ajax method, load_binary_resource() :

https://developer.mozilla.org/En/Using_XMLHttpRequest#Receiving_binary_data

you can simply set the image's .src to the dataURL of that response.

but, re-reading the OP, i don't think it would work anyway.

afaik, the extra params to open just get append to the url, so if something wasn't working on an image url, i don't see why it would work on an ajax url.

you can write an simple aspx page the binaryWrite's the binary content of the jpeg, that should work just fine. that also let's you keep the login/pass hidden, and is probably your best option.
Copy linkTweet thisAlerts:
@newin9009authorOct 22.2009 — Thank you. I tried this in a blank .htm and nothing displays. The image in the link is the Google logo. Do you have any working examples of this? I have not been able to find any actual examples searching for load_binary_resource and binaryWrite.

[CODE]<script type="text/javascript">

function load_binary_resource(url) {

var req = new XMLHttpRequest();

req.open('GET', "http://www.google.com/intl/en_ALL/images/logo.gif", false);

//XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]

req.overrideMimeType('text/plain; charset=x-user-defined');

req.send(null);

if (req.status != 200) return '';

return req.responseText;

}


</script>[/CODE]
Copy linkTweet thisAlerts:
@rnd_meOct 22.2009 — Thank you. I tried this in a blank .htm and nothing displays. The image in the link is the Google logo. Do you have any working examples of this? I have not been able to find any actual examples searching for load_binary_resource and binaryWrite.

[CODE]<script type="text/javascript">

function load_binary_resource(url) {

var req = new XMLHttpRequest();

req.open('GET', "http://www.google.com/intl/en_ALL/images/logo.gif", false);

//XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]

req.overrideMimeType('text/plain; charset=x-user-defined');

req.send(null);

if (req.status != 200) return '';

return req.responseText;

}


</script>[/CODE][/QUOTE]

how are you running the script from google's servers, greasemonkey?

are your converting the responseText to a dataURL before assigning it to the .src of an image?

I don't see those parts of your code here...
Copy linkTweet thisAlerts:
@newin9009authorOct 22.2009 — I'm running it on my own server and using IE7 to try it. I have a test.aspx file and the jshttpauth.js on it. I just put a link to the Google logo off their homepage in the code above to see if I could even pull their image in. Probably the wrong place to put it right?

Sorry, I don't know what you mean by responseText and dataURL (I'm new to development). I'm just copying and pasting what you had posted.
Copy linkTweet thisAlerts:
@newin9009authorOct 22.2009 — Well, I tried something simple. Tried passing the credentials via a form. Unfortunately, a pop up window came up and I did not get automatically logged in to view the camera image even doing this:

[CODE]<html>
<head>
<title>Cam page</title>
</head>
<body>
<form action="http://192.168.1.30/images/campic.jpg" method="post" name="frmLogin">
<table><tr><td>Username:</td><td><input type="text" name="username" value="admin"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password" value="password"></td></tr>
<td><td colspan="2" align="right"><input type="submit" value="Login!"></td></tr>
</table>
</form>
</body>
</html>
[/CODE]
×

Success!

Help @newin9009 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...