Jump to content

security: form submission vs AJAX call SOLVED with thanks in the final post


niche
 Share

Recommended Posts

Is it safer to send data, that starts as a value in an element, through a form submission, or an AJAX call, or does it matter if it's validated in both cases? By safer, I mean subject to hacking/re-writing? I've been told that it's easy to hack/re-write a value with firebug.

Edited by niche
Link to comment
Share on other sites

Whether you use AJAX or not, the client is capable of sending anything they want to the server. There's no security difference between AJAX and ordinary form submission.There is an accessibility difference: In the case that you're using AJAX, be sure to fall back to a normal form in the case that Javascript is disabled.

Link to comment
Share on other sites

be sure to fall back to a normal form in the case that Javascript is disabled.
How do you code that test?
Link to comment
Share on other sites

you can bound a submission function which will submit the form on onsubmit event with ajax and can make that function return false or also you can use event.preventDefault(). so that when js enabled it will send the submission but will prvent default action. when js disabled the function wont execute and it will sumbit normaly.

Link to comment
Share on other sites

you can bound a submission function which will submit the form on onsubmit event with ajax and can make that function return false or also you can use event.preventDefault(). so that when js enabled it will send the submission but will prvent default action. when js disabled the function wont execute and it will sumbit normaly.

Link to comment
Share on other sites

I was in the middle of asking for more help when it occurred to me that simply adding a onsubmit for a fictitious function would simulate a user with Javascript is disabled. Right?

echo '<form onsubmit = "addBop()" action="cart.php" method="post" style="float:left;">';

Link to comment
Share on other sites

The onsubmit attribute is ignored if Javascript is disabled. If you want to test your site with Javascript disabled, go to your browser options and turn Javascript off. I know where to find it in Firefox, I haven't checked other browsers.

Link to comment
Share on other sites

I added "onsubmit" to my form tag and left JS enabled...

echo '<form  action="cart.php" method="post" style="float:left;" onsubmit = "addBop()">';

... and the form executed the php instead of this JS function:

function addBop() {  alert("Here");}

Shouldn't this function have executed instead?

Edited by niche
Link to comment
Share on other sites

I've moved my onsubmit from my form tag to my button tag:

echo '<button class="button3" type="submit" style="background:gold;" onsubmit = "addBop().disabled = 1;" >Delete from BOP Cart</button>';

In post 6, birbal suggests that I need to use jQuery, but I don't know it. Isn't there a way to do this with JS? If so, I'm not able to find it. What should I be looking at?

Link to comment
Share on other sites

Buttons don't have an onsubmit handler, only forms have a submit event. A button can have a click event though. You don't need jQuery for anything, it makes certain things easier but it's not necessary to do anything. It's written in Javascript, so anything you can do with jQuery you can write yourself. What Ingolme suggested will stop the form submit and run whatever function you want (not necessarily in that order): echo '<form action="cart.php" method="post" style="float:left;" onsubmit = "addBop(); return false;">';

  • Like 2
Link to comment
Share on other sites

birbal suggests that I need to use jQuery, but I don't know it. Isn't there a way to do this with JS? If so, I'm not able to find it.What should I be looking at?
it is not jquery function it is javascript you can find it here https://developer.mozilla.org/en/DOM/event.preventDefault it is part of DOM level 3 event handling
  • Like 1
Link to comment
Share on other sites

Ingolme and justsomeguy, Viola! Birbal, thanks for the ref, but I'm not sure how event.preventDefault() should be used in this case?

Edited by niche
Link to comment
Share on other sites

Ingolme and justsomeguy, Viola! Birbal, thanks for the ref, but I'm not sure how event.preventDefault() should be used in this case?
the whole point of returning false to keep the form from submitting automatically (in favor of AJAX doing it instead). It is in fact preventing the default action of the form element from happening (the submit event). JS has a method of the event object that can do that. event.preventDefault() (i.e. prevent the default behavior from happening)
  • Like 1
Link to comment
Share on other sites

OK, but how's it used? The examples, in birbal's ref, showed it in a function, but that won't do when JS is disabled. There has to be a way to use event.preventDefault() in the tag for it to be useful with the JS disabled. Right? If so, how can it be used in this case?

Edited by niche
Link to comment
Share on other sites

OK, but how's it used? The examples, in birbal's ref, showed it in a function, but that won't do when JS is disabled. There has to be a way to use event.preventDefault() in the tag for it to be useful with the JS disabled. Right? If so, should it be used in this case?
preventDefault would be used instead of returning false. It is a way to prevent the form from submitting so that you can use AJAX to submit the form rather than let the form submit itself the normal way. The whole point of all of this is to maximize usability for as many users as possible. If a user has JS enabled, they will use the AJAX interface and have their forms submitted and pages updated without refreshing the page, but if a user has JS disabled, they will have to submit the form normally (and refresh the page), but the form will still function.
  • Like 1
Link to comment
Share on other sites

I understand.  I just tried this again...

onsubmit = "addBop(); event.preventDefault();"

...and it worked this time.  I was dragging this topic out because I was under a false impression.  I must have  misused event.preventDefault(); originally.Just to be clear.

onsubmit = "addBop(); event.preventDefault();"

Is the alternative to:

onsubmit = "addBop();  return false;"

Correct?

Edited by niche
Link to comment
Share on other sites

return false and event.preventDefault() are not actually same. when you use return false; it also stops the event from bubbling up. there is another function event.stopPropogation() which is used specificaly to stop event bubbling. in other word return false is same as using stopPropogation() and preventDefault() together. in depth information about js event could be found herehttps://developer.mo...rg/en/DOM/event

Edited by birbal
  • Like 1
Link to comment
Share on other sites

I doubt that's going to work in all browsers, not all browsers have standardized on "event" as the name of the event object. All browsers will correctly stop the form submission if you return false. And just to be clear, if Javascript is disabled the entire onsubmit code will not return, regardless of whether you are using preventDefault, returning false, etc. If Javascript is disabled the submit event does not occur and the form submits as if there were no onsubmit handler.

  • Like 1
Link to comment
Share on other sites

Thanks for your last posts birbal and justsomeguy. I never heard of bubbling before or experienced it until now.

onsubmit = "addBop(); event.stopPropogation();event.preventDefault();

produced bubbling (JS executed & form submited with JS enabled) and...

onsubmit = "addBop(); event.preventDefault();event.stopPropogation(); "

Only allowed the JS to execute. I reduced by two the things I didn't know, that I didn't know in this topic. Thanks again for everyone's help.

Edited by niche
Link to comment
Share on other sites

Just to point out that as usual MS being MS decided to use a different method to stop bubbling 'event.cancelBubble = true', http://www.quirksmode.org/js/events_order.html, so if you wish for it work in IE browsers you will have to use code that will apply the specific code depending on what the browser supports.

onsubmit = "addBop(); if (!event) var event = window.event;event.cancelBubble = true;if (event.stopPropagation) event.stopPropagation();"

obviously it would be better/cleaner to use a function to apply this

function stopPropBubble(e){if (!e) var e = window.event;e.cancelBubble = true;if (e.stopPropagation) e.stopPropagation();}

onsubmit = "addBop(); stopPropBubble(event);"

  • Like 1
Link to comment
Share on other sites

Per usual, the best help for coders is found here. Thanks dsonesuk!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...