topic Re: Recaptcha Invalid domain for site key in APIs & Integrations

Recaptcha Invalid domain for site key

MSHydroNeo — Mon, 01 Jul 2024 04:00:11 GMT

Hi,

I am building a website using Flutter for Web. I am facing one issue when embedding my HubSpot Form into an iframe to display on the web. Code Below.

import 'package:flutter/material.dart'; import 'dart:html' as html; import 'dart:ui' as ui; class WhistleblowerForm extends StatefulWidget { const WhistleblowerForm({super.key}); @override State<WhistleblowerForm> createState() => _WhistleblowerFormState(); } class _WhistleblowerFormState extends State<WhistleblowerForm> { late html.IFrameElement _element; @override void initState() { _element = html.IFrameElement() // ..width = "200px" // ..height = "200px" ..style.border = 'none' ..srcdoc = """ <!DOCTYPE html> <html> <body> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script> <script> hbspt.forms.create({ region: "na1", portalId: "5586633", formId: "7b811c72-c39d-416f-a53b-46a64208cff0" }); </script> </body> </html> """; // ignore:undefined_prefixed_name ui.platformViewRegistry.registerViewFactory( 'HubspotForm', (int viewId) => _element, ); super.initState(); } @override Widget build(BuildContext context) { return const SizedBox( width: 867, height: 833, child: HtmlElementView(viewType: 'HubspotForm'), ); } }

The reCAPTCHA is producing the following error:

Seems that there is no way of accessing or updating the recaptcha key because it is all handled by reCAPTCHA. Disabling the reCAPTCHA allows the form to be submitted successfully but this is not my ideal scenario as I want to keep spam protection. The domain for the development is localhost.

Does anybody have any ideas on what I can do here?

Re: Recaptcha Invalid domain for site key

Humashankar — Mon, 01 Jul 2024 12:02:13 GMT

Hi @MSHydroNeo

This issue arises from a mismatch between the registered domain and localhost. To resolve this, you can either deploy your app to a temporary public domain during development and register that domain with your reCAPTCHA key which is recommended

Else, allowlist localhost in the reCAPTCHA admin console for testing purposes only -not recommended for production due to security risks.

To allowlist localhost, follow these steps - log in to the Google reCAPTCHA admin console, select your reCAPTCHA v2 project, and add localhost to the allowed domains under "Settings" -> "Domains".

Confirm the correct site and secret keys in your HubSpot form code and update the script to the latest HubSpot form embed script in the iframe. Consider to disable the allowlist before deployment.

By trying the above steps you may be able to fix the issue

Hope this helps - Happy to help further!!
Thank you very much and have a great one!
Warm regards

Re: Recaptcha Invalid domain for site key

MSHydroNeo — Tue, 02 Jul 2024 02:38:21 GMT

Hi Humashankar,

Yes, I had thought about this previously about allowlisting the domain. However, since the reCAPTCHA is handled through Hubspot Forms (just switch it on, no additional settings), I do not think I have access to an admin console or any additional settings in regards to the reCAPTCHA on Hubspot forms so I am unable to add localhost to the list of trusted domains.

Regards,

Mike

Re: Recaptcha Invalid domain for site key

Humashankar — Tue, 02 Jul 2024 11:47:38 GMT

Hi @MSHydroNeo

That's a valid thought!

While it might seem convenient to allow localhost in the reCAPTCHA admin console, it's not a feasible option since HubSpot has control over the reCAPTCHA settings for their forms.

Instead, the recommended approach is to set up a temporary subdomain in your local development environment, such as (dev.yourwebsite.com) Then, generate a new reCAPTCHA key pair specifically for this subdomain in the Google reCAPTCHA Admin

https://www.google.com/recaptcha/admin/create)

portal.

Ultimately, update your HubSpot form settings to utilize the newly generated keys, ensuring a secure and functional implementation.

Regards

Re: Recaptcha Invalid domain for site key

DevMca — Mon, 02 Jun 2025 13:34:13 GMT

"since the reCAPTCHA is handled through Hubspot Forms (just switch it on, no additional settings)"

There is no way to create and use our own keys in hubspot. Nor is it possible to specify the domains on which the key created by hubspot.

How can we do that ?