Method used for Recaptcha V3 no longer recommended

[matdave]

https://github.com/sepiariver/recaptchav2/blob/master/core/components/recaptchav2/elements/chunks/recaptchav3_html.chunk.tpl

The method currently used in the recaptchav3 chunk invokes the challenge immediately on page load. However, the recommendation is to invoke it on submit: https://developers.google.com/recaptcha/docs/v3#programmatically_invoke_the_challenge

The main issue is that invoking on page load is causing the token to expire prematurely on longer forms.

[sepiariver]

Hi @matdave

Thanks for reporting this and for all your efforts on open-source projects. I'm grateful for you and your work.

This particular issue has been raised and the "Trigger on user-initiated action" section of this blog post is meant to address it: https://sepiariver.com/modx/a-guide-to-recaptcha-v3-for-modx-cms/

TLDR;

The chunk enables customization of the script's behavior. If we override the default chunk we could make the wrong decision for a lot of implementations. Example: what event should we listen to? Does every single website have the same requirements for that?

The default chunk is meant as a guide and the page load event is reliably going to be there, if not reliably the best solution.

Perhaps additional Chunks could be added, which illustrate some options like those in the blog post. That said, including Chunks in packages tends to introduce other issues and I started to regret ever doing that lol

What do you think?

[matdave]

I think a recaptchav3_submit.sample chunk would make sense. It could just be a sample submit button with the logic:

<script src="https://www.google.com/recaptcha/api.js?hl=[[++cultureKey]]"></script>
 <script>
   function onSubmit(token) {
     document.getElementById("[[+form_id]]").submit();
   }
 </script>
<button class="g-recaptcha" 
        data-sitekey="[[+site_key]]" 
        data-callback='onSubmit' 
        data-action='[[+action_key]]'>Submit</button>

Or something like that...

[sepiariver]

Yea adding that makes a ton of sense. I'll get it into the next batch of releases. I have a PR of yours to package up for CssSweet as well. I'm so sorry for the delays

[sepiariver]

@matdave just pushed some changes with a new 3.3.0 package. Unfortunately I haven't had a chance to test it out as Recaptcha won't load on my localhost (I suspect some very responsible self-signed SSL rejection on Google's part)

Do you have an implementation somewhere, on which the new Chunk can be tested?

[matdave]

I FINALLY got around to testing this. It works great, my main issue is that I didn't realize it is chaging the "form_id" value, so it was taking my "form-name" and changing it to "formname".