reCAPTCHA

[avidsapp]

Can this plugin handle adding reCAPTCHA to the form?

[jon-sully]

Possibly something I can look at adding! Although I haven't heard any feedback that spam is an issue from anybody that's used it thus far — the Netlify filters and the built-in honeypot tend to catch everything 🤔 Can you elaborate on your use case?

[avidsapp]

I had a basic form with a honeypot, but the same type of spam was coming through daily. When I added the reCAPTCHA, the submissions wouldn't go through. Then I found this repo. I'll add it and see if the honeypot stops the same kind of spam.

It should be fairly simple to add - documentation:

1. Add a data-netlify-recaptcha="true" attribute to your <form> tag.
2. In the place where you’d like the CAPTCHA to appear, add an empty <div> element inside your form with the same data-netlify-recaptcha="true" attribute.

[jon-sully]

Then I found this repo. I'll add it and see if the honeypot stops the same kind of spam.

Awesome. Do report back! If the spam continues then I'll definitely look at officially supporting reCaptcha in this library 💯

[avidsapp]

Well... I just received my first spam message, not more than 12 hours later. I can try adding the reCAPTCHA and sending a pull request.

Your name: Erick Barrios

Email: redacted

Message: DOMAIN SERVICES EXPIRATION NOTICE FOR redacted

Domain Notice Expiry ON: Mar 05, 2021

We have not gotten a settlement from you. We have actually tried to call you but were unable to contact you.

Check Out: https://redacted

For info as well as to post a discretionary settlement for your domain website service.

[jon-sully]

Wow. Alrighty! I'm sorry to hear that 🤔 Would you mind sharing your site URL just so I can double check a couple pieces?

Otherwise totally open to PRs if you want to implement yourself 👍🏻

[avidsapp]

I have now implemented your library across 8+ sites, but you may look at avidsapp.com as an example

[jon-sully]

Interesting. Your markup does indicate to me that the library is working as intended.. so unless that spammer is manually filling things out, I'm surprised they didn't hit the honeypot. Sounds like reCaptcha is a good option! Aside from that, would you mind checking your Spam Messages bucket in the Netlify UI to see if it is catching junk and just one happened to get through?

Appreciate your wide usage 🙂

[avidsapp]

I originally reached out to Netlify for support and they asked the same thing. The same types of messages were coming through both "verified" and "spam" and at alarming rates, so I highly doubt it is being manually submitted.

[jon-sully]

Interesting. Do you have particularly high-traffic sites?

No need to answer if you prefer not to btw, this is all moot and the reCaptcha functionality is clearly a good idea :)

[avidsapp]

Not really. Traffic is relatively low

[jon-sully]

Welp. That's the public internet for you 😆

[jon-sully]

@avidsapp I've spent a couple of days mulling over this without a clear answer on how to get reCaptcha on-board. There are a lot of moving parts with dynamically including external scripts onto the page (always a tricky endeavor with React) and maintaining the markup structure for holding the recaptcha, then there's the API keys bit... when we let Netlify inject the recaptcha there's no way of knowing what the server-side API key is (or if the client-side API key is the same for everyone or if they provision a new one for each site) — if folks were to use their own site keys, that could work but feels a little complicated 🤔

[avidsapp]

Using your own site key is the standard way to do it outside of Netlify

[jon-sully]

I realize that but the whole point of this package is to make Netlify Forms easy 😛 I'm not saying it doesn't fit, but it's something worth considering. This package also currently maintains no dependencies and I'm not sure I'd keep that with recaptcha. I'll continue thinking on it 👍🏻

[avidsapp]

Understandable. Initially, I tried adding the Netlify injected reCAPTCHA within the <NetlifyForm> component, but that didn't produce any results. I can attempt to add the custom reCAPTCHA with key and secret environment variables, adding the snippet before the closing </head> via Helmet, and adding data-netlify-recaptcha="true" attribute to the form. Is the form submitted via AJAX?

[jon-sully]

Yes it is. In your fork of the library I'd recommend pulling in something like https://www.npmjs.com/package/react-google-recaptcha to add the captcha functionality to the <NetlifyForm> and having the <NetlifyForm> validate the captcha value before executing the send. I think that's the only reasonable approach for this library. I may play with it more in the future taking this approach as well.

[avidsapp]

After updating all sites and ensuring this plugin was utilized correctly, it seems that the spam has significantly decreased. A few are still slipping through here and there, but I'm marking them as spam on Netlify to help improve their algorithms. At this time, I don't intend to mess with adding the reCAPTCHA, but will circle back if necessary. Closing this issue for now.

[avidsapp]

Well well. One year later and I'm getting spammed again. This time the bots are bypassing HTML and JS validation, honeypot, and reCAPTCHA.

I added reCAPTCHA via this repo and this tutorial.

This seems to only affect 1 site and may be on the Netlify or Cloudflare end. Any ideas?