Ir al contenido

4. Permite tu sitio web

Tu formulario contendrá tu clave pública. No pasa nada, está pensada para ser pública, pero cualquiera puede copiarla del código fuente de tu página. Dos cosas se aseguran de que solo funcione para tu formulario: la lista de sitios web permitidos y la CAPTCHA de la plantilla.

  1. Abre Seguridad. La tarjeta Sitios web permitidos muestra los dominios que pueden enviar con tu clave pública.

  2. Escribe tu dominio en Añadir dominio y haz clic en Añadir. Formatos aceptados:

    Entrada Permite
    example.com exactamente example.com
    *.example.com cualquier subdominio, p. ej. www.example.com o shop.example.com, pero no el propio example.com
    localhost:3000 un host y un puerto concretos
    localhost localhost en cualquier puerto, práctico para el desarrollo local

    La mayoría de los sitios responden con y sin www, así que añade example.com y *.example.com (o www.example.com).

  3. Haz clic en Guardar en la parte superior de la página.

La página Seguridad con la clave pública, las claves privadas, Sitios web permitidos con tres dominios, Protección contra abusos y las opciones para cuando se agotan los créditos

Frontmail compara la cabecera Origin de cada solicitud del navegador con esta lista:

  • Ningún dominio: la tarjeta avisa de que no hay dominios definidos: cualquier sitio web puede usar tu clave pública. El envío funciona desde cualquier sitio, lo que es cómodo para una primera prueba, pero permite que otros gasten tus créditos. No publiques tu web así.
  • Un dominio que no está en la lista: la solicitud se rechaza con origin_not_allowed y no se envía nada. Si ves este error, comprueba el host exacto en la barra de direcciones (con o sin www, número de puerto).

Los sitios web permitidos frenan a otras webs, pero no a un bot que envía directamente a la API. Una CAPTCHA de Cloudflare Turnstile sí lo hace, normalmente como una comprobación invisible, sin acertijos. Las solicitudes sin un token válido fallan con captcha_required antes de costarte un crédito.

En los sitios web, Turnstile funciona con tu propio widget gratuito de Cloudflare (el plan gratuito de Cloudflare solo permite 10 nombres de host por widget, así que Frontmail no puede compartir una misma clave entre las webs de todos). Se configura en unos dos minutos:

  1. Inicia sesión en el panel de Cloudflare (basta con una cuenta gratuita), abre Turnstile y haz clic en Add widget.

  2. Ponle nombre al widget, añade los nombres de host de tu web (p. ej. example.com y www.example.com), deja Widget mode en Managed y haz clic en Create.

  3. Copia la Site Key y la Secret Key.

  4. De vuelta en Frontmail, en la página Seguridad, pega las dos claves en la tarjeta Protección contra bots (Turnstile) y haz clic en Guardar claves. Frontmail comprueba la clave secreta con Cloudflare, la guarda cifrada y no vuelve a mostrarla nunca.

  5. Haz clic en Activar la CAPTCHA en todas las plantillas. La plantilla de contacto de este tutorial tiene ahora activado Exigir CAPTCHA (Turnstile) (en la plantilla, Ajustes → Protección); la plantilla de respuesta automática se omite porque la envía Frontmail, no tu formulario.

Ten a mano la clave de sitio (site key): la pondrás en el formulario en el siguiente paso. Los componentes para frameworks (FrontmailForm para React, Vue y Svelte) renderizan el widget por ti. A partir de ahora, cada plantilla nueva tiene la CAPTCHA activada por defecto.

La tarjeta Protección contra abusos ofrece Bloquear navegadores headless y Parámetros estrictos, y más abajo puedes definir un Rate limit por IP y una Lista de bloqueo. Los valores predeterminados sirven para este tutorial; consulta Protección contra bots y Ajustes de seguridad cuando quieras reforzar la protección.

Más: Orígenes permitidos.