Adding hCaptcha to Signup Form

Integrations & API
1

I have the following code running in code injections in the site footer:

<script>
$(function() {
    const captchaContainerHTML = '<div id="h-captcha" class="h-captcha" data-sitekey="sitekey"></div>';
    function addHCaptcha() {
        const $iframeContents = $("#ghost-portal-root").find("iframe").contents();
        $iframeContents.find(".gh-portal-content.signup .gh-portal-section").prepend(captchaContainerHTML);
        $iframeContents.find('#h-captcha').each(function () {
            hcaptcha.render(this);
        });
    }
    window.addEventListener('hashchange', function() {
        if (location.hash.startsWith('#/portal')) {
            setTimeout(addHCaptcha, 200);
        }
    });
    setTimeout(function() {
        $("#ghost-portal-root").find("iframe").contents().find('.gh-portal-triggerbtn-container').click(function() {
            setTimeout(addHCaptcha, 200);
        });
    }, 200);
});
</script>

Obviously with sitekey being the actual site key that I have confirmed numerous times.

However, when I open up the signup form it states:

ERROR for site owner: Invalid site key

Further, when I instead place the hCaptcha in the footer of the entire page, it works fine, which makes me think it is due to the fact that the signup form is an IFrame and there is something like a CORS issue preventing the hCaptcha from loading.

Has anyone got this sort of thing working or would be able to help me out?

2

makes me think it is due to the fact that the signup form is an IFrame and there is something like a CORS issue preventing the hCaptcha from loading.

Yes, CORS prevents Captcha from working.

It’s better to use a custom signup page If you want to use Captcha.

Another option: if you can identify characteristics of spam requests, such as IP, user agent, you can use Cloudflare Web Application Firewall (WAF) to custom rule to block requests to /api/send-magic-link (the API that sends email with login link)