How can I improve this Ajax script?
I've written a combination of PHP and javascript for admins to seamlessly give points to users without a page reload. This is my first real go at using Ajax so I'd like some tips on improving the code. How can I go about making it more secure/efficient? Btw, this code is visible in the html source.
P.S: If there are best practises with respect to this sort of thing, please let me know and post any links you have on the topic.
// First pass: add the points
function addBonus()
{
document.getElementById('response').innerHTML = '<img src=images/loading2.gif></img>'; // Show that process is taking place
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
verifyPoints(); // Check if points have actually been given
}
}
// Generated by templating system
// Triggers call to PHP page that gives bonus points to user
var url="page.php?id=2&a=bonus";
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
// Second pass: check the points have been given
function verifyPoints(){
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText );
}
}
url="GetPoints.php?i=2"; // Generated by templating system
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function HandleResponse( response )
{
var oldPoints = parseInt(document.getElementById('numPoints').innerHTML);
var currentPoints = parseInt(response);
if( currentPoints == (oldPoints + 150) ){
document.getElementById('response').innerHTML = '<img src=images/tick.png></img>'; // Bonus points added: 开发者_运维百科show tick icon
} else {
document.getElementById('response').innerHTML = '<img src=images/cross.png></img>'; // Bonus points not added: show red cross icon
}
document.getElementById('numPoints').innerHTML = currentPoints; // Update points display
}
How does page.php?id=2&a=bonus
know that a real admin is the one giving the bonus points?
Have you thought about XSRF? In other words, can a user put something on their site so that if an admin visits it, while logged in, a request gets sent with the admin's cookies that inadvertently racks up points.
You shouldn't use GET requests for changing things, like assigning points. From http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
Implementors should be aware that the software represents the user in their interactions over the Internet, and should be careful to allow the user to be aware of any actions they might take which may have an unexpected significance to themselves or others.
In particular, the convention has been established that the GET and HEAD methods SHOULD NOT have the significance of taking an action other than retrieval. These methods ought to be considered "safe". This allows user agents to represent other methods, such as POST, PUT and DELETE, in a special way, so that the user is made aware of the fact that a possibly unsafe action is being requested.
Anything that causes server state change should use one of the non-idempotent HTTP methods. Probably POST. Btw, an idempotent operation is one that, when re-applied to its output yields the same thing. So f
is idempotent if f(x) == f(f(x)) == f(f(f(x))
, etc.
And finally
url="GetPoints.php?i=2"
is setting a global variable. You probably want a var
in front.
精彩评论