AJAX questions from a noob

[MisterBigglesworth]

Howzit,

So been playing around with Ajax a bit, and searched the net for examples on how to us it. I added the code below to a website's simple register page, basically it just checks if someone trying to register with their email address already exists in the system.

It works great, but the code below is easily viewable if you select to view the source of the page. As you can see, it gives paths or directories, the PHP page that does the check and what parameters are expected. I would think this is a huge security risk and just asking for trouble.

Whats the best way to implement Ajax to your websites?

<script type="text/javascript"> 
function checkEMail(str) {
if (str=="") {
	document.getElementById("email_address_message").innerHTML="";
  	return;
} 
if (window.XMLHttpRequest) {
	// code for IE7+, Firefox, Chrome, Opera, Safari
  	xmlhttp=new XMLHttpRequest();
} else {
	// code for IE6, IE5
  	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
 
xmlhttp.onreadystatechange=function() {
	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
		document.getElementById("email_address_message").innerHTML=xmlhttp.responseText;
	} else {
		document.getElementById("email_address_message").innerHTML='';
	}
}
xmlhttp.open("GET","includes/ajax/check_email_address_exists.php?email_address="+str,true);
xmlhttp.send();
}
</script>

 

[stricken]

firstly.. you can condense that sht down to a few lines using jquery :

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>

function check(str) {
$.ajax({ url : "validate_email.php",
data : "email="+str,
success : function(resp) { elm = $("#email_address_message"); if(resp) { elm.html(resp); } else { elm.html("") } }
});

}

<script>



secondly... the proper thing to do will be to echo true or false (1 / 0 ) from PHP... instead of setting the innerHTML to blank on fail of the ajax call..

I would think this is a huge security risk and just asking for trouble.

why would exposing your email checker be a security risk? unless, of course, you want to base your security philosophy on hiding holes instead of exposing solid interfaces.

So its actually better if joe public can see that call... because it forces you to make sure you're not forgetting to filter the request in PHP ( in case of mysql injection attempts ) before you query the database to check that email.

my 2c.

 

[MisterBigglesworth]

well the code below is pretty self explanatory in that it will do a db check for an email address. So if someone wanted to hack for whatever reason...this code is basically just helping them more as its easily viewable (view source option) and they know what it expects. I have used mysqli and sql queries with parameters...basically followed procedures to deter hacking. It still leaves me a bit uncomfortable though with the code like that. Will look into the JQuery option, thanks.

includes/ajax/check_email_address_exists.php?email_address=

 

[_kabal_]

please dont include "ajax" in your urls. ajax has nothing to do with the controllers, it is just a way of calling them in a browser

 

[Praemon]

Potentially you could obfuscate the javascript to make it harder to read, but I doubt a "hacker" would even bother with the code, they'd just record the live headers being passed, and you can't hide that.

I'd agree with stricken that the use of a 3rd party Javascript library such as JQuery or PrototypeJS will make your life a lot easier (ie. you don't have to worry about browser compatability), and should be used in this case (although it does help to have an understanding of what the XMLHttpRequest specification is all about).

Your "check_email_address_exists.php" file is going to be exposed regardless, so the main thing here is ensuring that there's no security holes, such as SQL injection. This is where you should focus your attention.

I would also agree with stricken that you should handle a true/false response from the server, rather than just showing what's returned by the php script. I would, however, recommend returning a JSON encoded string (it's really easy to create one in php from an array - see http://www.php.net/manual/en/function.json-encode.php) and include a "status" element that reflects true or false (1 or 0). jQuery and PrototypeJS handle JSON flawlessly. If you want to include a custom error message, create an element called "errorMsg" or similar, and include it in there. This way you can ensure that each situation (true, false, and a possible web server error) can be handled.

 

[MisterBigglesworth]

Thanks for the input guys, much appreciated...will go the suggested routes