The Best Anti-Spam Contact Form for Your Website
Hello friends,
today I'm going to share my experience with implementing the best, in my opinion, anti-spam mechanism for web contact form.
There is well known problem - when you have a contact form on your website then you will get a lot of spam submitted via the form action url on your website and this is very annoying as for me. So I started thinking on how to do it in a way so I would get no spam at all or as less as possible at least.
First thing that came in my mind was that we would need a dynamic and random form action url for the form submission that will return HTTP 404 not found in case user would not pass human-like verification with a captcha or would try to guess the url.
As I work with C#.NET + MVC I started creating such solution with ASP.NET MVC and actually here is what I came up to.
First thing we need is to register our website for google reCAPTCHA v2, get public and secret keys and add reCAPTCHA to an our contact form. Note that in our case we need to render reCAPTCHA by hand and here is the Contact View html:
@section head
{
<script src="https://www.google.com/recaptcha/api.js?onload=renderRecaptcha&render=explicit" async defer></script>
}
...
@using (Html.BeginForm("", "", FormMethod.Post, new { id="contactForm" }))
{
@Html.AntiForgeryToken()
...
<div id="ReCaptchContainer"></div>
...
<input type="submit" value="Send" />
}
...
@section scripts
{
<script>
var your_site_key = '.....-....';
var canProceed = false;
var reCaptchaCallback = function (response) {
//lets go to server, validate a token and return a random url if succeed
$.ajax({
method: "POST",
url: "/Contact/IsReCaptchValid",
cache: false,
data: {
gRecaptchaResponse: response
}
}).done(function (html) {
if (html != "none") {
$("#contactForm").attr("action", html);
canProceed = true;
$("#submit").removeClass("disabled");
$("#submit").addClass("btn-success");
}
});
};
var renderRecaptcha = function () {
//lets render our captcha
grecaptcha.render('ReCaptchContainer', {
'sitekey': your_site_key,
'callback': reCaptchaCallback
});
};
$(document).ready(function () {
$("input[type='submit']").on("click", function (e) {
...
if (canProceed != true) {
//CAPTCHA has not been validated yet
e.stopPropagation();
return false;
}
});
});
</script>
}
Here we load google api javascript file, run captcha rendering and attach a handler for validation response that we will use to send validation token to our back-end, validate it and return a new dynamic random URL for our <form> to submit data to.
Here is the server side controller action for reCAPTCHA validation:
public ActionResult IsReCaptchValid(string gRecaptchaResponse)
{
//check referrer url to see if this request came from our own website
if (Request.UrlReferrer == null || string.IsNullOrEmpty(Request.UrlReferrer.AbsolutePath) ||
!(Request.UrlReferrer.ToString().ToLowerInvariant().StartsWith(Extensions.Extensions.DomainName + "/contact") ||
Request.UrlReferrer.ToString().ToLowerInvariant().StartsWith(Extensions.Extensions.DomainName2 + "/contact")))
{
return HttpNotFound("Resource was not found");
}
string result = "none";
var captchaResponse = gRecaptchaResponse;
var apiUrl = "https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}";
var requestUri = string.Format(apiUrl, secretKey, captchaResponse);
var request = (System.Net.HttpWebRequest)System.Net.WebRequest.Create(requestUri);
using (System.Net.WebResponse response = request.GetResponse())
{
using (System.IO.StreamReader stream = new System.IO.StreamReader(response.GetResponseStream()))
{
JObject jResponse = JObject.Parse(stream.ReadToEnd());
var isSuccess = jResponse.Value<bool>("success");
if (isSuccess)
{
//store token in session to re-validate later
Session["g-recaptcha-response"] = gRecaptchaResponse;
//generate random url
result = "/Contact/" +
((char)rnd.Next(0x61, 0x7b)) + "" + //random char a-z
((char)rnd.Next(0x61, 0x7b)) + "" +
((char)rnd.Next(0x61, 0x7b)) + "" +
((char)rnd.Next(0x61, 0x7b)) + "" +
((char)rnd.Next(0x61, 0x7b)) + "" +
((char)rnd.Next(0x61, 0x7b)) + "" +
((char)rnd.Next(0x61, 0x7b)) + "" +
((char)rnd.Next(0x61, 0x7b)) + "" ;
//store the random url to validate later
Session["contactFormAction"] = result;
}
}
}
return Content(result);
}
As you may guessed this will validate google reCAPTCHA token and generate a random url like /Contact/edvbbgrq
Next step will be to accept POST request with all the data, validate and process it.
To be able to accept random urls like /Contact/edvbbgrq in one controller and one action you will have to define some routes, so lets define them now in our RouteConfig.cs:
//route to accept /Contact/Contact get request and return our contact form/view
routes.MapRoute(
name: "Contact1",
url: "Contact/Contact",
defaults: new { controller = "Contact", action = "Contact" }
);
//route to accept /Contact/IsReCaptchValid request and return our random urls
routes.MapRoute(
name: "Contact2",
url: "Contact/IsReCaptchValid",
defaults: new { controller = "Contact", action = "IsReCaptchValid" }
);
//route to accept our random urls and submit contact requests
routes.MapRoute(
name: "CContact",
url: "Contact/{*slug}",
defaults: new { controller = "Contact", action = "CContact", slug = System.Web.Http.RouteParameter.Optional }
);
And actually final step is implementing our POST action to accept random-url submit requests:
//to return view Contact in Get and POSTback requests
public ActionResult CContact(string slug = null)
{
return View("Contact");
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CContact(string slug, string name, string subject, string message, string email)
{
//check if this request is from our own website
if (Request.UrlReferrer == null || string.IsNullOrEmpty(Request.UrlReferrer.AbsolutePath) ||
!(Request.UrlReferrer.ToString().ToLowerInvariant().StartsWith(Extensions.Extensions.DomainName + "/contact") ||
Request.UrlReferrer.ToString().ToLowerInvariant().StartsWith(Extensions.Extensions.DomainName2 + "/contact")))
{
return HttpNotFound("Resource was not found");
}
//get previously stored random url
string view = Session["contactFormAction"] as string;
if (string.IsNullOrEmpty(view))
{
return HttpNotFound("Resource was not found");
}
view = view.Replace("/Contact/", string.Empty);
//get random part from route to compare
if(RouteData.GetRequiredString("slug") != view)
return HttpNotFound("Resource was not found");
//just in case let's check the token one more time
var captchaResponse = Request.Form["g-recaptcha-response"];
if((string)Session["g-recaptcha-response"]!= captchaResponse)
{
return HttpNotFound("Resource was not found");
}
...
//do whatever you need to process request
...
ViewBag.Message = "Thank you, your request has been submitted.";
return View("Contact");
}
That's it. Now you have dynamic action form url and this url is generated after human-validation only so it will be impossible or almost impossible at least for spammers to send spam requests.
Thank you and see you :)
1vqHSTrq1GEoEF7QsL8dhmJfRMDVxhv2y