How to use the validation API in browser

[gromain]

Hello,

I'm trying to setup FriendlyCaptcha with a lightweight Hugo website. I'm using the getform.io form backend, but it doesn't support FriendlyCaptcha.

I'm wondering if it's possible (and if it's a good idea too) to use in browser validation through a javascript request via the callback function.

It doesn't work as expected because of a CORS issue (more specifically this issue https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin ). My script can't access the content response.

Right now, my script looks like this:

function cb_valid(solution) {
    console.log("Captcha finished with solution " + solution);
    let formData = new FormData();
    formData.append('solution',solution);
    formData.append("secret",{{ .friendlycaptcha_API_key }});
    formData.append("sitekey",{{ .friendlycaptcha_site_key }});
    fetch( "https://api.friendlycaptcha.com/api/v1/siteverify", {
        body: formData, //mode: "no-cors",
        method: "POST"
        } )
    .then( (response) => {
        console.log("Server response " + response);
        if (response.body.success) {
            console.log("Disabling button");
            document.getElementById("contact_submit").removeAttribute("disabled");
        };
    }
    );
}

[merlinfuchs]

Calling the /siteverify endpoint from the frontend isn't a good idea. An attacker could still make the request to your backend directly and bypass the frontend validation. This is why we block CORS requests on that endpoint.