Google ReCaptcha v2 on Gatsby got Bypass

[shuin]

Hi Guys I’m trying to put google reCaptcha v2 on my gatsby site https://frustratedcoder.netlify.app/contact

I already followed this links and tutorials
https://github.com/imorente/gatsby-netlify-form-example
https://github.com/sw-yx/gatsby-netlify-form-example-v2
https://answers.netlify.com/t/form-submission-failing-when-using-recaptcha-v2/9903

Actually the google recaptcha appears and I also getting the value from it, the Problem is that when I tried any of the codes on the example, it can just bypass the captcha and can just submit the form without checking the captcha box. Just to be clear even without the captcha value from the box the form can be submitted. What i’m doing wrong?

Here’s my code

  constructor(props) {
    super(props)
    const { data } = props
    this.recaptchaRef = React.createRef()
    this.state = {
      data,
    }
  }

  handleSubmit = async e => {
    e.preventDefault()
    const form = e.target
    const recaptchaValue = await this.recaptchaRef.current.getValue()
    if(recaptchaValue === null || recaptchaValue === "")
        console.log("no val")

    console.log("RECAP VALUE")
    console.log(recaptchaValue)
    await fetch("/?no-cache=1", {
      method: "POST",
      headers: { Accept: "application/json","Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": form.getAttribute("name"),
        'g-recaptcha': RECAPTCHA_KEY,
        "g-recaptcha-response": recaptchaValue,
        ...this.state,
      }),
    })
      .then((val)=>console.log(val))
      .then(() => navigate(form.getAttribute("action")))
      .catch(error => alert(error))
  }

Form

  <form
            className="contact-form"
            action="/"
            name="contact"
            method="POST"
            data-netlify="true"
            data-netlify-honeypot="bot-field"
            data-netlify-recaptcha="true"
            onSubmit={e => this.handleSubmit(e)}
          >
            <input hidden name="bot-field" />
            <input type="hidden" name="form-name" value="contact" />
            <p>
              <label>
                Name
                <input
                  type="text"
                  name="name"
                  required
                />
              </label>
            </p>
            <p>
              <label>
                Email
                <input
                  type="email"
                  name="email"
                  required
                />
              </label>
            </p>
            <p>
              <label>
                Subject
                <input
                  type="text"
                  name="subject"
                  required
                />
              </label>
            </p>
            <p>
              <label>
                Message
                <textarea
                  name="message"
                  required
                ></textarea>
              </label>
            </p>
            <ReCAPTCHA
              name="g-recaptcha-response"
              ref={this.recaptchaRef}
              sitekey={RECAPTCHA_KEY}
            />
            <p className="text-align-right">
              <button className="button" type="submit">
                Send Message{" "}
                <span className="icon -right">
                  <RiSendPlane2Line />
                </span>
              </button>
            </p>
          </form>

And the domains I registered

[jen]

Hey @shuin,
I took a quick look and from what I can see, it looks like a form can be submitted, but are you getting any submissions in your form dashboard for this form? That’ll help us know what to do for next steps. Thanks!

[shuin]

@jen I just recently check with recaptcha, with just honeypot it was working fine but now with recaptcha got problems.

1. Unchecked captcha but got submitted doesn’t appear in dashboard.
2. Check captcha and submitted form appear in dashboard but didn’t get the value from the field.
   
   

[shuin]

Hi @jen any updates on what to do next for this case?

[jen]

Hey @shuin,
I think there are a few different things happening here:

1. You are submitting ...state, which is an object called data:

   this.state = {
     data,
   }
   

   But I don’t see where you are capturing the user inputs to the name, email, etc. fields with this code. You will need some way to capture that input and then update your state accordingly. That’s not Netlify-related, so it’s out of the scope of what we can help with, but maybe you’ll find this tutorial helpful? https://rangle.io/blog/simplifying-controlled-inputs-with-hooks/

   This post may also be useful for you: Netlify + Gatsby + Google Recaptcha

2. As for the reCAPTCHA, it actually seems to be working. If you submit the form without filling out the reCAPTCHA, the browser returns a 303; the submission is not successful. At the same time, there is no error thrown, and your site does redirect the user in a way that looks like the form submission was successful, so that’s definitely a bit confusing and something we should probably look into on our end in terms of user experience! But if you do fill out the reCAPTCHA, the submission is successful (even though it’s missing the inputs for the reason I described above).

Let us know if this helps!

[shuin]

Hi @jen I already update my code from the the links you’ve given to me, got the values captured but still the same with my main issue, the recaptcha can still bypass without checking the box. Is this a bug with no solution at the moment?

Updated Code

class Contact extends React.Component {
  constructor(props) {
    super(props)
    this.data = props
    this.recaptchaRef = React.createRef()
    this.state = {
      name: '',
      email: '',
      subject: '',
      message: '',
    }

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange = (e) => {
    const value = e.target.value;
    this.setState({
      ...this.state,
      [e.target.name]: value
    });
  }

  handleSubmit = async e => {
    e.preventDefault()
    const form = e.target
    const recaptchaValue = await this.recaptchaRef.current.getValue()
    if(recaptchaValue === null || recaptchaValue === "")
        console.log("no val")

    console.log("RECAP VALUE")
    console.log(recaptchaValue)
    await fetch("/?no-cache=1", {
      method: "POST",
      headers: { Accept: "application/json","Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": form.getAttribute("name"),
        'g-recaptcha': RECAPTCHA_KEY,
        "g-recaptcha-response": recaptchaValue,
        ...this.state,
      }),
    })
      .then((val)=>console.log(val))
      .then(() => navigate(form.getAttribute("action")))
      .catch(error => alert(error))
  }

  render() {
    const { data } = this.data
    const { markdownRemark, site } = data // data.markdownRemark holds your post data
    const { frontmatter, html } = markdownRemark

    return (
      <Layout className="contact-page">
        <SEO
          title={frontmatter.title}
          description={frontmatter.title + " " + site.siteMetadata.title}
        />
        <div className="wrapper">
          <h1>{frontmatter.title}</h1>
          <div
            className="description"
            dangerouslySetInnerHTML={{ __html: html }}
          />
          <form
            className="contact-form"
            action="/"
            name="contact"
            method="POST"
            data-netlify="true"
            data-netlify-honeypot="bot-field"
            data-netlify-recaptcha="true"
            onSubmit={e => this.handleSubmit(e)}
          >
            <input hidden name="bot-field" />
            <input type="hidden" name="form-name" value="contact" />
            <p>
              <label>
                Name
                <input
                  type="text"
                  name="name"
                  value={this.state.name}
                  onChange={this.handleChange}
                  required
                />
              </label>
            </p>
            <p>
              <label>
                Email
                <input
                  type="email"
                  name="email"
                  value={this.state.email}
                  onChange={this.handleChange}
                  required
                />
              </label>
            </p>
            <p>
              <label>
                Subject
                <input
                  type="text"
                  name="subject"
                  value={this.state.subject}
                  onChange={this.handleChange}
                  required
                />
              </label>
            </p>
            <p>
              <label>
                Message
                <textarea
                  name="message"
                  value={this.state.message}
                  onChange={this.handleChange}
                  required
                ></textarea>
              </label>
            </p>
            <ReCAPTCHA
              name="g-recaptcha-response"
              ref={this.recaptchaRef}
              sitekey={RECAPTCHA_KEY}
            />
            <p className="text-align-right">
              <button className="button" type="submit">
                Send Message{" "}
                <span className="icon -right">
                  <RiSendPlane2Line />
                </span>
              </button>
            </p>
          </form>
        </div>
      </Layout>
    )
  }
}

Success Form Submission in Dashboard

[shuin]

@jen I’ve also notice that it seems newly created forms with duplicated name and recaptcha enabled are made whenever I update my code. The form values are only submitted to the one with honeypot enabled(just like in my recent screenshot) while empty submission on those duplicated forms with recaptcha enabled. What’s happening?

[shuin]

@jen Since this was so buggy, I’ll be removing recaptcha v2 from my netlify form, can you help me remove these duplicated forms or all of them?

[shuin]

@perry @Pie can you help me delete this forms? already 31 now.

[jen]

Hey @shuin,
Turns out we did unfortunately introduce a form bug recently Apologies for that! I know it was frustrating to deal with. The issue should now be fixed though, which is maybe why I’m seeing only these three forms in your site now, instead of 33:

• contact-us
• contact-form
• contact

Please let me know if you’d still like for me to delete those and I’d be happy to go ahead. Thanks!

[abu]

Hi @jen!

I have the same issue with my page. Form does not ask for captcha validation when I hit submit. Any solutions here? Should I use a basic g-captcha implementation?

[fool]

hiya and sorry to be slow to get back to you!

As you may have already discovered, that won’t work on our systems by default; you need to run some code at browse time to power a recaptcha and our implementation handles that for you.

The usual culprit for it not working is that you don’t have it configured in our system. Could you link me to the form in our UI (URL will look like https://app.netlify.com/sites/sitename/forms/1234566abcd) and also on the web, so I can confirm you have configured it correctly?