Trying to validate captcha with javascript before sending to php form validation - php

Hi I'm a relative newbie.
Have a mail contact form set up with a captcha image generator.
When the captcha is verified, on submitting the form, a php page is actioned which further validates the input data (checking against spam).
Challenge: would like to retain form data in case of error in enterred capthca code and needing to return to form.
If I use a sticky form with the form sticks okay but I cannot see how I then direct http to the php script for form data validation.
So I figure the answer is a javascript function to validate the captcha and stay within the same page where the form appears, ideally just having a pop up message (alert ...) if the enterred code is wrong, before sending the http to the php script page.
I have seen that this can be done but I cannot adapt the code to the captcha I use (i.e. webspamprotect.com) Could any body suggest a generic js function useable with any captcha ?
Would be most grateful for any input.
MANY THANKS
Steve

It doesn't make sense to be able to validate the CAPTCHA with javascript on the client. If you made it possible to validate with Javascript a scammer could use the validation function to test their guesses before they sent them to the server, so they would always be able to get the answer right.
You could implement an AJAX call requesting the server to validate the attempt instead of requiring a full page refresh, but the validation must still be done on the server.

When the captcha is generated the written word is usually stored inside the session or written into a hidden input field, so it can be validated against the user supplied word, when the form is submitted back to the PHP script.
You could pass the session variable holding this to your JavaScript (or read it from the hidden input if present) when rendering the page holding the form and captcha. Then, when the user clicks submit, intercept the call and check if the entered word matches the expected word.
As for retaining the values: just add the values to your HTML form value attribute. Make sure you escape the output in case users supply malicious code.
EDIT: agreeing with everyone who says you still have to validate the input on the server side as well. Client Side validation can easily be tinkered with and is nothing but a convenience feature for users, so they can fix their input before submitting.

simply check the value of "g-recaptcha-response"
if($('#g-recaptcha-response').val()==''){
alert('captcha not ticked');
}else{
alert('captcha ticked');
}

Related

How to securely use reCaptcha with jQuery and PHP

I am writing a user signup form that will use reCaptcha on a jQuery html web page with a PHP backend. When a successful challenge is entered I am not sure how to submit the information to the PHP backend in such a way that it can't be bypassed. The website is running over HTTPS.
I currently check to see if the captcha is correct via using $.ajax(). This submits the recaptcha_challenge_field and recaptcha_response_fieldto a small PHP script
that calls recaptcha_check_answer() and returns success or failure.
Upon success, I can either submit the name, address, phone, etc. fields to another backend PHP script or use another jQuery $.ajax() call.
Either way, a spammer could examine the HTTP requests and submit the form data without using the jQuery front end & reCaptcha.
How can I use reCaptcha and (upon a successful match) submit form data in such a way that a spammer can not easily abuse the system?
I was making this too complicated. I ended up having the ajax call submit the captcha and all of the form data at the same time. If and only if the captcha is correct, then I proceed with the rest of the PHP script. Otherwise, I return an error through the same ajax call.
I added a hidden field via $(#my_input").hide() and check to see if a spammer filled it in. I check the http referrer and sanitize all user input.

Need for PHP validation if a form only submits via JavaScript?

If I have a form, say a simple contact me form with inputs for name, email, message, etc. And I have the form set to submit using Ajax after the JavaScript validation has returned true on all inputs.
Do I still need to validate the inputs using PHP? If JavaScript is turned off, how could the form still submit? And if the form can't submit because the JavaScript is off, how could that cause any harm?
Of course you need server-side validation! :-)
It's always needed.
Just install this add-on: https://addons.mozilla.org/en-US/firefox/addon/tamper-data/.
It lets you freely modify what goes to the server.
Also, Firebug lets you modify what the browser sees, therefore submits to the server.
Here is an analogy: banks have locks on their safes. But they also have security cameras, and alarm systems, in case the locks fail to stop someone from stealing.
EDIT:
If you are using a contact form (and the script automatically email the person contacting), keep in mind that someone could make your script send 1000's of spam messages, simply by adding addresses to the email field.
To avoid this, you need to do server-side validation. You simply cannot rely on client-side validation.
It's best to do validation at server-side as end-user can do more than just turn on/off JavaScript.
As JavaScript is available at client-side, a malicious user can alter the client-side validation to make malicious inputs pass the client-side validation.
It's always better to trust inputs that are server-side validated than trusting users to not alter JavaScript behavior.
You should always use backend validation to sanitise the user input regardless of the presence of front end validation.
While you are correct that the form cannot be submitted with Javascript disabled it could still be submitted by a person with malicious intent by simply sending a POST request to the URL which you use.
I think it's better to have both validation types, every time: client-side (using JavaScript, so no Ajax call is made to the browser) and server-side (using PHP validations).
The form can still be submitted using the Firebug console or other kind of hacks.
A normal user can't do that but... still. If there's a chance it can be done, you shouldn't risk it.
Anyone can submit form to your URL with any data. Even from localhost
So server side validation is a must

Editing DOM client side using a Code inspector to Manipulate server side behaviour

I have a form where each field is given certain properties via their class attribute.
i.e. is both a required input, and is expecting its value to be formatted as an email address.
Using Javascript/jQuery, I have iterated through all the inputs in the form, determined each one's associated properties (if any) and submitted them via ajax for post-processing server side using PHP.
So the PHP will determine in the above input's example whether or not $_POST["email"] 1) has a value and 2) the value is an email address.
I've not had any problems getting any of this intended behaviour to work. My question/concern is how to prevent a user from manipulating each field's properties using a code inspector tool such as FireBug before submitting the form i.e. remove the "required" class for the "email" id so that they can successfully submit the form without providing an email input. Is there anything that can be done to prevent the cunning user to take advantage of this? Or is this simply the result of how I've designed the form validation?
Any insight would be much appreciated.
Javascript is useful for providing immediate feedback to the user if a form's not properly filled out, so they don't have to go through a roundtrip of "fill out form, submit, get back error page".
But it should NEVER be the only validation method. By all means, test the form to make sure a valid email has been entered via Javascript, but you MUST ALSO DO THIS ON THE SERVER. Everything in the browser is by definition under control of the user, which means everything and anything can be trivially bypassed/forged/manipulated/subverted.
YOu don't have much control on what the user can do on the client side, they can disable javascript or like you said manipulate the form with firebug,
What you should focus on is to create a robust validation on the server side, to prevent them from adding invalid data.
Client side validation is a courtesy, Server side is a requirement!

Saving form data when POST submission is not validated

I need to validate a form in php and display some error messages in the view if there are validation errors. The problem is that once the form is submitted, sending the user back to the page will clear all the of the completed form fields. Is there a simple way to not lose the unvalidated form data?
The only solution I can come up with is reverse engineering the $_POST variable, but I'd like a more elegant way to do it.
Don't send the user anywhere, but re-render the form right where you are, pre-populating the form with the entered values. That would be the most common method.
The second way would be storing the values in session variables, but that should be the last resort if the project structure doesn't allow for the first approach.
Validate on the client side.
If you must validate on the server side, made an ajax call (so you won't have to refresh the page) to the server with the elements you want to validate. Make the validations you need and return an answer back to the page (is valid or not).
If answer is valid, you can proceed (Note: you may not need to return to the page after the validation, if all the elements you need to proceed are also the ones validated).
If it's not valid, the answer should return the invalid elements (and possibly a error message for each) so that you can display the error messages you want.
If in php code that you use to prepare the form you always set field values to whatever exists in $_POST array, then in validation code you can simply conditionally include that form file and it will render itself with user values. When you render the form the first time (empty form) $_POST will not have elements with field names, and the form will be empty.

i want to add captcha with ajax

well i have a form in which email and captcha validation was there but now i want to do some thing like if captcha is incorrect or left empty than my form must not reload the page i.e all those field which are already been filled out must not get blank.
You can either
A) Submit the form as you are doing right now, and fill the fields with the existing field data
B) Use a CAPTCHA library that supports AJAX submission, e.g. reCAPTCHA http://wiki.recaptcha.net/index.php/Overview#AJAX_API
I believe that (A) is a lot better because it allows you to deal seamlessly with all other kinds of validation. But depending on what you already have (B) might be trivial to implement. So YMMV.

Categories