Recaptcha suddenly stoped working

[aphex008]

Hey,

I'm not sure what exactly happened here, but suddenly following message started appearing in Chrome console and recaptcha v3 stopped working.

_The resource https://www.recaptcha.net/recaptcha/api.js?render=6Ldd4v8cAAAAAHTv6F5WUKKunVITU-VKkJ5_6WkL&hl=en&onload=recaptchaCallback_student_login_captcha was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally._

No changes in application were made.

Upon further investigation I noticed that script from api.js is not executed. But when pasted contents of api.js directly to vendor/karser/karser-recaptcha3-bundle/Resources/views/Form/karser_recaptcha3_widget.html.twig it was working again.

When poking further I found that recaptcha starts working again if "defer" directive is removed from script tag. <script type="text/javascript" src="https://{{ form.vars.host }}/recaptcha/api.js?render={{ form.vars.site_key }}&hl={{ form.vars.locale }}&onload=recaptchaCallback_{{ validJsId }}" async{% if form.vars.script_nonce_csp is defined %} nonce="{{ form.vars.script_nonce_csp }}"{% endif %}></script>... but only when karser_recaptcha3.host is set to 'www.recaptcha.net'.

[pavel-kolar]

Hi, I have just been solving this very same issue. However the message in Chrome console was just the tip of the iceberg - the real problem was that the javascript function, specified in the onload parametr of the recaptcha URL, did not get called in the first place.

In my case, the real culprit was the integration of Cookiebot service which detected that these javascripts are using some cookie and there is no user consent for such cookie. Therefore the Cookiebot blocked these javascripts. Marking these javascripts with appropriate data attributes solved the issue: https://support.cookiebot.com/hc/en-us/articles/360009063660-Disable-automatic-cookie-blocking-for-a-specific-script

[karser]

Great sleuthing, @pavel-kolar. Hopefully, this will help others who have similar issues.

[aphex008]

@pavel-kolar Thank you sir!

[aphex008]

By the way, @pavel-kolar, how did you managed to add ignore tags on scripts that are part of bundle. Cookiebot instructions would require to modify vendor/karser/karser-recaptcha3-bundle/Resources/views/Form/karser_recaptcha3_widget.html.twig

My solution of overriding template is not very clean.

{% extends "@!KarserRecaptcha3/Form/karser_recaptcha3_widget.html.twig" %}
{% block karser_recaptcha3_widget %}
    {{ parent()|replace({'script type="text/javascript"': 'script type="text/javascript" data-cookieconsent="ignore"'})|raw }}
{% endblock %}

[pavel-kolar]

@aphex008 I have overridden that template (standard symfony way) = made a copy of that into /templates/bundles/KarserRecaptcha3Bundle/Form/karser_recaptcha3_widget.html.twig and added that ignore attribute for the <script> tags.

Not very clean either :(

[aphex008]

Hello, @karser, do you think I should reopen this issue as a feature request for posibility to configure script tag attributes? Or perhaps dedicated flag for cookie bot configuration in yaml?