I am integrating NoCaptcha to a website and want to catch failed captchas myself. Sadly, the "image selection" Captcha reloads immediately if it was not correctly solved.
So, if there is a challenge like "Pick all images showing coffee" and a user does not select all corresponding images correctly, the challenge reloads immediately. But I want the data (and form) to be posted anyway and check the Captcha correctness on my own.
Here is a minimalistic example of how it should work. I am sure, it would work, if the Captcha not reloaded instantly.
<?php
require_once('recaptchalib.php');
$publickey = "-----";
$privatekey = "-----";
try{
if(isset($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
if(!$captcha){ exit; }
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$privatekey."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
if($response.success==false){
// Do something
} else {
// Do something else
}
}
else
{
?>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form method="post" action="thisfile.php">
<div class="g-recaptcha" data-sitekey="<?php echo $publickey; ?>"></div>
<input type="submit" value="Absenden" />
</form>
</body>
</html>
<?php
}
} catch (Exception $e) {
error_log($e->getMessage());
}
?>
Do you know a way to prevent auto-reloading?
Thank you!
You should know operations behind reCaptcha. The Google reCaptcha API (https://www.google.com/recaptcha/api.js) does all the work for reCaptcha operation; allowing no site owner interactions (except the site verify) with its reCaptcha.
So your attempts to prevent reCaptcha auto-reloading or similar whether break its operation or cause its misbehave toward end user.
Related
I've been struggling with this for a while, and need some help.
I've managed to add a reCAPTCHA checkbox to my online form, but I'm stumped on what to do when it comes to the verification.
I've used the "Automatically render the reCAPTCHA widget" option as described in the Checkbox instructions.
But I'm getting stuck on the verification instructions.
My form code is pretty simple:
<form name="myForm" action="mail.php" onsubmit="return validateForm()" method="POST">
<div>
<label for="name">Name:</label><br /><input id="name" type="text" name="name" class="formthin" required />
</div>
<div>
<label for="email">Email:</label><br />
<input id="email" type="email" name="email" class="formthin" required />
</div>
<div>
<label for="message">Comments, Questions, Whatever:</label><br />
<textarea id="message" name="message" rows="4" cols="4" class="formbig" required></textarea>
</div>
<div>
<div class="g-recaptcha" data-sitekey="site-key"></div>
</div>
<div>
<input type="submit" value="Submit" class="formsubmit" />
</div>
</form>
I've added the following in between the "<head></head>" tags.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
So far everything looks good on the page.
For good measure, here is the code in the "mail.php" file:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent=" From: \n $name \n\n Message: \n $message";
$recipient = "my email address";
$subject = "Website Contact Form";
$mailheader = "From: $email \r\n";
$forward = 1;
$location = "url of thank you page";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
if ($forward == 1) {
header ("Location:$location");
}
else {
echo "Thank you message.";
}
?>
This is where I need help.
I'm not sure which of the three options for verification I should use, how to implement the choice, or where the code for the API Response should go.
For instance, if I use the first option, does the "g-recaptcha-reponse" POST parameter go inside my initial <form> tag? The notes on the API Request seems to indicate that I need a second POST method. I'm not sure how to combine or implement it with my current one.
Does the API Response code go in my "mail.php" file? Or in between "<script></script>" tags on my form page? (in the head or below the form?)
Where does my "Secret Key" come into play? I don't see any instructions on how to include it.
I've looked through the forum and found a previous question that seem to be related:
"Google reCaptcha v2 (Checkbox) Verification"
The original posted code looks very similar to mine. (both on the html page, and the php action script)
The reply was a second php script that looks like it includes the Secret Key, but with no instructions on where that php code should go. Do I place it in the file with the form? Is it added or does it replace the mail.php action script? And if it replaces the script, how is the response from the actual form handled?
Any help would be appreciated.
Thank you.
++++++++++++++++++++++++++
I have followed the instructions from the link sent by #Bazaim.
These are the steps I took:
Downloaded the "recaptcha-master" folder and added it to my website directory.
ran the "composer" installation scripts in my Terminal.
Moved the "composer.phar" file into the "recaptcha-master" folder.
Added the following to the "composer.json" file:
"require": {
"google/recaptcha": "^1.2"
}
Added the "require_once..." script to the bottom of my "mail.php" file like this:
setExpectedHostname('my-domain-name.com')
->verify($gRecaptchaResponse, $remoteIp);
if ($resp->isSuccess()) {
// Verified!
} else {
$errors = $resp->getErrorCodes();
}
?>
So far so good. When I go to my form, and click the "checkbox" for I am not a robot, I am prompted to do the image identify thing and get the green "check" next to "I am not a Robot."
However, when I submit my form, my "mail.php" no longer functions. It tries to load in the browser window rather than send me an email.
In addition, the reCAPTCHA checkbox is not "required" to hit submit.
I got it to work. Here's what I ended up doing:
Removed the extra PHP script from my mail.php file. (the "require_once" content mentioned in the previous posts) My PHP script was working before I added that, so I wanted to get it back to a working version.
I tried to make the reCAPTCHA a requirement so I did another search and found instructions on adding javascript and css and added it to the code on my page. (this was one of the things I was trying to solve in my original post)
JavaScript:
window.onload = function() {
var $recaptcha = document.querySelector('#g-recaptcha-response');
if($recaptcha) {
$recaptcha.setAttribute("required", "required");
}
};
CSS:
#g-recaptcha-response {
display: block !important;
position: absolute;
margin: -78px 0 0 0 !important;
width: 302px !important;
height: 76px !important;
z-index: -999999;
opacity: 0;
}
Added to the <head></head> code on my contact page.
Bingo - everything is working.
I'm not sure if the verification information is actually being used. (The other thing I was trying to figure out in my original post) And now I'm not sure if it's actually necessary. reCAPTCHA is required in the form, the form is submitting.
Anyway, thanks to #Bazaim for the help and getting me on track.
Hope this helps anyone else who might be having problems with this.
The links on my page don't work after uploading a large file using AJAX. They result in the infamous error "The requested URL was rejected. If you think this is an error, please contact the webmaster. Your support ID is..." (i.e. the file upload is successful, but links subsequently fail.)
I get this behaviour after uploading a large (19 MB) file, but not after uploading a small (100 K) file, and not after uploading no file. If I "Clear cookies for domain", it restores the expected behaviour. (The offending cookie might be called "TS0194eee0_0".)
The errant behaviour is the same in IE 11, FireFox 40.0, and BlackBerry browsers.
What am I doing wrong? Does something persist after the AJAX call is finished that I should be clearing? (I really don't want to do a "delete cookie" hack.) JQuery is not an option. My site is serviced in a "shared host" environment, so access to php.ini is out of the question.
upload1.html:
<!DOCTYPE html>
<html>
<head>
<script>
function startUpload()
{
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4 && ajax.status == 200)
{alert (ajax.responseText);}
};
ajax.open("POST", "/test/upload2.php");
ajax.send(new FormData(document.getElementById("form1")));
}
</script>
</head>
<body>
Absolute link<br />
Site relative link<br />
Document relative link<br />
<form id="form1" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1" /><br>
<input type="button" value="Start Upload" onclick="startUpload()" />
</form>
</body>
</html>
upload2.php:
<?php echo "Hello World!"; ?>
Update: As I suspected, deleting (expiring) the offending cookie solved the problem "for now", but for how long? I have no idea why cookie "TS0194eee0_0" is related to the problem, or if it will always have that name.
document.cookie = "TS0194eee0_0=; expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/";
in my website, I have a singn_up-form and use the Google-Api to give the user some suggestions. The API requests the location of the user once in Internet-Explorer. But if I try Firefox, the requests are looped until I click "Standort immer Freigeben" - it means "always accept".
function initialize() {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
{ types: ['geocode'] });
}
The code is loaded at document.ready and contains more code, but this snippet also reproduces the error.
Does anyone has some ideas?
Try this :
put the apis in your <head></head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=places"></script>
put this in your body tag:
<label for="autocomplete">Please Insert an address:</label>
<br>
<input id="autocomplete" type="text" size="100">
put this in your onload function:
var input = document.getElementById('autocomplete');
new google.maps.places.Autocomplete(input);
this is my code :
var input = document.getElementById('autocomplete');
new google.maps.places.Autocomplete(input);
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=places"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<label for="autocomplete">Please Insert an address:</label><br>
<input id="autocomplete" type="text" size="100">
</body>
</html>
You might have kept some onfocus attribute as given in Google Maps API Example
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
OR
If you don't require keeping bounds for places suggestions, you may want to remove it
OR
If you need to set bounds for suggestions keep some condition to not call location consent every time, if user gives permission.
Please keep your condition in geolocate() function
Issue is happening only in Mozilla FireFox
What you want to do is this:
function handlePermission() {
navigator.permissions.query({name:'geolocation'}).then(function(result) {
if (result.state == 'granted') {
geoBtn.style.display = 'none';
} else if (result.state == 'prompt') {
geoBtn.style.display = 'none';
navigator.geolocation.getCurrentPosition(revealPosition,positionDenied,geoSettings);
} else if (result.state == 'denied') {
geoBtn.style.display = 'inline';
}
});
}
then put handlePermission(); after your callback function receives permission
I`m newbie in jquery.
Got the following code:
`` `
How do I validate the textbox for user input required on clicking the button save and display error message next to the save button?
There appears to be a Validation Plug-In for jQuery. Have you looked at this already?
If not, it appears to do exactly what you want, and there is plenty of documentation right there to get started.
You can try something like
<html>
<head>
<script type="text/javascript">
function Test(txtCheck, lblCheck)
{
if (txtCheck.value == "")
lblCheck.innerHTML = "Textbox is empty";
else
lblCheck.innerHTML = "";
}
</script>
</head>
<body>
<input type="text" id="txtCheck" />
<input type="button" value="Save" onclick="Test(txtCheck, lblCheck);"/>
<label id="lblCheck"/>
</body>
I'm looking for a way to check if a link exists on a certain page. I know that this is possible with a ping, but I really don't know how to do this.
What I have is a list of links to other webpages, they should have a backlink to my page also. I want to check this, when the backlink is there, a text should appear, something like "ok" and when the result is negative, something like "no backlink"
I know the urls of the pages where my link should appear, in case you need to know that.
Any help would be great!
I have found a piece of code wich I think could be used to serve my needs. I self don't know how, but it would be great if anyone can help me with this.
This is the code:
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
var ajax = new XMLHttpRequest();
function pingSite() {
ajax.onreadystatechange = stateChanged;
ajax.open('GET', document.getElementById('siteToCheck').value, true);
ajax.send(null);
}
function stateChanged() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
document.getElementById('statusLabel').innerHTML = "Success!";
}
else {
document.getElementById('statusLabel').innerHTML = "Failure!";
}
}
}
-->
</script>
</head>
<body>
Site To Check:<br />
<input type="text" id="siteToCheck" /><input type="button" onclick="javascript:pingSite()" />
<p>
<span id="statusLabel"></span>
</p>
</body>
You can't natively use Javascript to parse external domains, I used a proxy page which sniffs the content and feeds it to the ajax callback.
My solution basically grabs the source of the site to check and sees if a string, which can be your site link matches. I would assume this should be sufficient rather than trying to parse and look for anchors, but you can be as thorough as you want ( parse the whole thing as a DOM element and look for href attribute value ).
Let me know if you run into any issues.
<?php
$query = isset($_POST['submitted']) ? true : false;
if ( $query ) {
$url = #file_get_contents( $_POST['site-url'] );
if ( $url && strlen( $url ) > 0 ) {
$checkFor = $_POST['check-for'];
$match = preg_match( '/' . $checkFor . '/', $url );
echo $match ? 'string (link) is found' : 'string not found';
} else {
echo 'could not connect to site..';
}
exit;
}
?>
<form action="" id="site-checker">
<div class="field">
<label for="site-url">Site to check:</label>
<input id="site-url" name="site-url" value="http://jquery.com">
</div>
<div class="field">
<label for="check-for">Check for:</label>
<input id="check-for" name="check-for" value="docs.jquery.com">
</div>
<input type="hidden" name="submitted" value="true">
<input type="submit">
</form>
<div id="result"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$('#site-checker').submit(function(e) {
e.preventDefault();
$.ajax({
url:'check.php',
type:'POST',
data:$('#site-checker').serialize(),
success:function(html) {
$('#result').html( html );
}
});
});
</script>
IMHO it would be better to perform this task in a server side script. Depending on your platform there might be functions for sending HTTP requests and HTML parsing which is what you need here. Javascript has cross domain restrictions which will prevent you from sending ajax requests to different domains than the one that is hosting the web page.