Detecta y evita la apropiación de cuentas

En esta página, se describe cómo detectar y prevenir las apropiaciones de cuentas (ATO) con reCAPTCHA.

Por lo general, los ataques de ATO ocurren cuando un atacante envía solicitudes para acceder a los extremos de la API con credenciales obtenidas de una violación de la seguridad de los datos, también conocida como volcado de contraseñas. Este tipo de ataque puede tener éxito, incluso si la filtración de contraseñas proviene de un sitio no relacionado, ya que las personas tienden a reutilizar contraseñas en varias cuentas. Este tipo de ataque no afecta a los usuarios que practican una higiene de contraseñas adecuada, como el uso de un administrador de contraseñas.

Antes de comenzar

Prepara tu entorno para reCAPTCHA.

Detecta y evita los ATO

Con reCAPTCHA, puedes detectar y prevenir los ATO con una de las siguientes opciones:

Cómo usar la casilla de verificación No soy un robot

Agregar la casilla de verificación No soy un robot a tu sitio es la forma más rápida y sencilla de brindar cierta protección contra los ATO sin tener que integrar funciones adicionales, como la verificación por SMS o correo electrónico. Un atacante tiene un costo por romper esta protección, y esta opción podría ser suficiente para algunos sitios.

Agrega la casilla de verificación "No soy un robot" a tus páginas web.

El siguiente código es un ejemplo en vivo de una página de acceso protegida por la casilla de verificación:

function onSuccess(token) {
  // The token is included in the POST data in the g-recaptcha-response
  // parameter. The backend must create an Assessment with the token
  // and verify the token is valid.
  console.log(token);
}
 
<form id="loginForm" action="?" method="POST">
  Username: <input type="text" name="username"/><br/>
  Password: <input type="password" name="password"/><br/>
  <div class="g-recaptcha" data-sitekey="reCATCHA_sitekey"
       data-action="account_login" data-callback="onSuccess"></div>
</form>
 
<script src="https://www.google.com/recaptcha/enterprise.js" async defer></script>

Puedes experimentar con este código en JSFiddle si haces clic en el icono <> en la esquina superior derecha de la ventana de código.

<html>
  <head>
    <title>Account Login - Checkbox</title>
    <script src="https://www.google.com/recaptcha/enterprise.js" async defer></script>
    <script>
    function onSuccess(token) {
      // The token is included in the POST data in the g-recaptcha-response
      // parameter. The backend must create an Assessment with the token
      // and verify the token is valid.
      console.log(token);
    }
    </script>
  </head>
  <body>
    <form id="loginForm" action="?" method="POST">
      Username: <input type="text" name="username"/><br/>
      Password: <input type="password" name="password"/><br/>
      <div class="g-recaptcha" data-sitekey="6LeAkOgUAAAAACcy3uY6N9H9SJMS27n3Zx2OOnYK"
           data-action="account_login" data-callback="onSuccess"></div>
    </form>
  </body>
</html>

Cómo usar puntuaciones y desafíos personalizados

Para protegerte contra las ATO, usa las claves basadas en puntuaciones de reCAPTCHA y los desafíos de autenticación de varios factores (MFA), como los desafíos de correo electrónico y SMS en los que se envían códigos únicos (OTP) al usuario.

Para usar claves basadas en la puntuación y desafíos personalizados, considera las siguientes opciones:

Según tu caso de uso, puedes usar la MFA por sí sola o con claves basadas en la puntuación. Por ejemplo, es posible que prefieras usar desafíos de MFA solo para las puntuaciones por debajo de un cierto umbral para reducir la fricción.

En el siguiente ejemplo, se muestra cómo integrar claves basadas en la puntuación en la situación de acceso.

function submitForm() {
  grecaptcha.enterprise.ready(function() {
    grecaptcha.enterprise.execute(
      'reCAPTCHA_site_key', {action: 'account_login'}).then(function(token) {
       document.getElementById("token").value = token;
       document.getElementByID("loginForm").submit();
    });
  });
}
 
<form id="loginForm" action="?" method="POST">
  Username: <input type="text" name="username"/><br/>
  Password: <input type="password" name="password"/><br/>
  <input type="hidden" id="token" name="recaptcha_token"/>
  <button onclick="submitForm()">Login</button>
</form>
 
<script src="https://www.google.com/recaptcha/enterprise.js" async defer></script>

Puedes experimentar con este código en JSFiddle si haces clic en el icono <> en la esquina superior derecha de la ventana de código.

<html>
  <head>
    <title>Account Login - Score</title>
    <script src="https://www.google.com/recaptcha/enterprise.js" async defer></script>
    <script>
    function submitForm() {
      grecaptcha.enterprise.ready(function() {
        grecaptcha.enterprise.execute(
          'reCAPTCHA_site_key', {action: 'account_login'}).then(function(token) {
           document.getElementById("token").value = token;
           document.getElementByID("loginForm").submit();
        });
      });
    }
    </script>
  </head>
  <body>
    <form id="loginForm" action="?" method="POST">
      Username: <input type="text" name="username"/><br/>
      Password: <input type="password" name="password"/><br/>
      <input type="hidden" id="token" name="recaptcha_token"/>
      <button onclick="submitForm()">Login</button>
    </form>
  </body>
</html>

¿Qué sigue?