My ASP.net webforms site is getting relentlessly form spammed.
I have put a Google reCaptcha V2 control on the site, but I can’t get it to work because the submit button is always enabled. Here is my .ascx code (it’s a sign-up footer on every page):
<script>
$(document).ready(
function () {
$('#Button1').prop("disabled", true);
}
);
</script>
<script type="text/javascript">
function recaptcha_callback() {
$('#Button1').prop("disbled", false);
}
</script>
Here is the reCaptcha and button:
<div class="g-recaptcha" data-callback="recaptcha_callback"
data-sitekey="NOTPOSTKEYHERE"></div>
<asp:Button class="btn btn-primary" ID="Button1" runat="server"
CausesValidation="False" Text="Go" OnClientClick="Confirm();"
OnClick="Button1_Click" />
The jQuery seems to do nothing at all. I really just want it to disable the submit button until the reCaptcha is checked. I’m not at all convinced this will defeat the spambots as they somehow get through no matter what I do. I’ve added a honeypot as well, but I can’t even get that far since the reCaptcha won’t enable and disable the button.
I’ve tried adding disabled="disabled" into the asp:Button tag, but that never gets overwritten. It’s possible that a .css class in one of the surrounding div’s won’t let me overwrite the property, but I don’t know how to use "! important" with a disabled property.
I’ve also tried doing this in the ascx.cs code, but once the code gets to the back end, the form has been submitted. That’s fine, but if the user submits without the reCaptcha, I don’t know if it’s a real user or not.
Any help appreciated.
2
Answers
re-CAPTCHA is a multi step process and it sounds like you’re only implementing the front end. As @wazz points out, you also have a misspelling in the front end implementation, but you’re going to run into a problem without a back end check that the re-CAPTCHA was actually solved.
The process goes a little like this:
For the free version it’s pretty much just "this is probably a bot" or "this is probably not a bot". On enterprise edition you can put re-CAPTCHA in place without needing a tick box or visual challenge if you want things to be invisible and frictionless.
You can get 1m re-CAPTCHA Enterpise calls free per month which gives a much more granular return and unless you’re running a big platform you’ll stay under the threshold. It’ll give the likelihood of how bot like the visitor is on a scale of 0 to 1 (so 11 decimal points worth), and a general reason code for why it thinks that. May be overkill for your use, but you can do things like idle out bots or send them to fake pages if the score is too low, or utilize a 2FA feature via email/sms and other cool features to deter bots whilst allowing legit visitors.
I think there are two possible solutions.
Add property ClientIDMode="Static" to Button1. This makes sure the ID stays the same on when rendered by the ASP.NET engine. I think this is a nice solution, but you should make sure the ID is unique. So choose an ID that’s not easy re-used in other usercontrols.
Create the scripts serverside. In your codebehind generate the script like this:
var str1 = $"$({Button1.ClientID}).prop("disabled", true);"
Use ScriptManager.RegisterClientScriptBlock to get this script rendered.