Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

invisible recaptcha submitting form before getting data

I am using the recaptcha gem. Rails 5.2.

I have the following form:

= simple_form_for @quote_request_form, url: quote_requests_path, html: {id: "invisible-recaptcha-form"} do |f|
  .form-group
    = f.input :name, label: false, placeholder: 'First and Last Name', 
  .form-group.actions.mt-5
    button.btn.btn-primary.btn-lg.btn-block#submit-btn Submit
  = invisible_recaptcha_tags ui: :invisible, callback: 'submitInvisibleRecaptchaForm'

I have added the following javascript for the form:

javascript:


  document.getElementById('submit-btn').addEventListener('click', function (e) {
      e.preventDefault();
      grecaptcha.execute();
  });

  var submitInvisibleRecaptchaForm = function () {
    document.getElementById("invisible-recaptcha-form").submit();
  };

I check the value from the recaptcha in my controller as follows:

  if verify_recaptcha(model: @quote_request_form) && @quote_request_form.save
    redirect_to quote_confirm_path, notice: "Your quotation request is being processed"
  else
    render :new
  end

It all works as long as I use the e.preventDefault(); line. If I remove this line I get a failure with the recaptcha and I can see in the parameters that the recaptcha attriburte is sending in blank data.

I don't understand why I need it as none of the documentation specify it. So I'm doing something wrong but I can't figure it out.

Can anyone see how I can fix this?

like image 563
chell Avatar asked Dec 10 '18 03:12

chell


People also ask

How do I trigger an invisible reCAPTCHA?

To invoke the invisible reCAPTCHA, you can either: Automatically bind the challenge to a button or. Programmatically bind the challenge to a button or. Programmatically invoke the challenge.

Does reCAPTCHA collect data?

If you've added reCAPTCHA to your website or mobile app, you must include a Privacy Policy. ReCAPTCHA is a Google service that collects the personal information of users when it is integrated into a website or app to protect against bots.

Can bots get through reCAPTCHA?

In short, yes they can. While reCAPTCHA v2 and v3 can help limit simple bot traffic, both versions come with several problems: User experience suffers, as human users hate the image/audio recognition challenges. CAPTCHA farms and advances in AI allow cybercriminals and advanced bots to bypass reCAPTCHAs easily.

Should reCAPTCHA site key be hidden?

The site key is used to invoke reCAPTCHA service on your site or mobile application. The secret key authorizes communication between your application backend and the reCAPTCHA server to verify the user's response. The secret key needs to be kept safe for security purposes.


1 Answers

You need the e.preventDefault() statement otherwise the form will be submitted before recaptcha executes the callback.

This happens because <button> with no type attribute has submit as the default value/ behavior. If you look at recaptcha documentation, the <button> tag has the type attribute defined as button, which has no behavior associated, thus no action happens when you click at it.

Returning to your case, either you keep the e.preventDefault() statement or you set the type attribute as button:

.form-group.actions.mt-5
   button.btn.btn-primary.btn-lg.btn-block#submit-btn type="button" Submit
 = invisible_recaptcha_tags ui: :invisible, callback: 'submitInvisibleRecaptchaForm'
like image 145
Thiago Lewin Avatar answered Nov 14 '22 23:11

Thiago Lewin