Invisible Keys Snap: almacenamiento de claves privadas en múltiples nubes

MetaMask Snaps es la hoja de ruta para convertir a MetaMask en la wallet más extensible del mundo. Como desarrollador, puedes llevar tus funciones y APIs a MetaMask de formas completamente nuevas. Los desarrolladores de Web3 son el núcleo de este crecimiento, y esta serie tiene como objetivo destacar los novedosos MetaMask Snaps que se están construyendo hoy en día.

Invisible Keys Snap

¿Por qué lo construiste?

Las cuentas de propiedad externa son el núcleo de prácticamente cada dapp o servicio en el ecosistema Ethereum. Sin embargo, diseñar e implementar una aplicación de wallet que sea a la vez segura y fácil de usar está lejos de ser trivial. Normalmente, para brindar control total al usuario y altos niveles de seguridad, terminamos recurriendo a mecanismos complejos y poco prácticos. Por otro lado, una experiencia de usuario sencilla y agradable solo se logra pidiendo a los usuarios que cedan el control sobre sus claves.

Con InvisibleKeys, nos apoyamos en la reconocida experiencia de usuario de MetaMask para proponer un nuevo equilibrio entre experiencia de usuario y seguridad, permitiendo que MetaMask se conecte a una innovadora wallet multi-nube externa.

¿Cómo? La wallet multi-nube de InvisibleKeys almacena las claves privadas del usuario en dos o más servicios de almacenamiento en la nube (por ejemplo, Google Drive, Dropbox, etc.) de tal manera que, incluso si uno de estos servicios se ve comprometido, las claves nunca lo están. Este enfoque multi-nube sigue un flujo de trabajo patentado (patente US20190095628), que garantiza niveles de seguridad muy altos al tiempo que permite la sincronización entre múltiples dispositivos.

Para importar una cuenta desde la nube, MetaMask lee un archivo JSON en tu Google Drive (o cualquier otro servicio de almacenamiento) con un array de tus claves públicas. Luego, para firmar una transacción, tu clave privada (PK) se reconstruye de forma temporal y local en una aplicación web externa que recibe las solicitudes de firma de MetaMask, firma la transacción y devuelve la transacción firmada a MetaMask. Las claves nunca se persisten y solo existen temporalmente en memoria. Además, para preservar el control total del usuario, la PK nunca es accedida por la extensión de MetaMask. Incluso si la wallet está desbloqueada o comprometida, la PK no puede ser robada.

InvisibleKeys permite a los usuarios acceder a su wallet desde cualquier lugar del mundo, ya que todo está almacenado en la nube, complementando el enfoque tradicional de MetaMask y manteniendo sus altos estándares de usabilidad e interfaz de usuario.

Arquitectura

InvisibleKeys funciona con dos componentes principales: la wallet de MetaMask y la aplicación web externa.

Como pretendemos firmar la transacción fuera de la wallet, aprovechamos la parte del código correspondiente a la conexión y firma de la hardware wallet. En lugar de enviar la transacción a firmar a un hardware específico, se abre una ventana emergente con nuestra aplicación web donde se ejecutará la firma.

En la aplicación web, el usuario se autentica con sus credenciales en la nube, se recupera la clave privada, se firma la transacción y la clave se elimina de la memoria. Finalmente, la ventana emergente se cierra y el usuario regresa a la wallet de MetaMask, que estaba en estado de espera aguardando una transacción firmada para ser enviada.

Los dos componentes se comunican a través de la API web de ventanas del navegador. Esto es suficiente en este contexto, ya que nunca se intercambia información privada entre ambos.

Cambios en la UI

En primer lugar, tuvimos que realizar algunos cambios en la UI de MetaMask para añadir nuestra estrategia de conexión de InvisibleKeys. Se añade de la misma manera en que se agregaría una nueva hardware wallet compatible a la aplicación.

Estos son algunos de los cambios realizados en el código: se añadió un nuevo dispositivo y tipo, y el nuevo botón para la UI.

app/scripts/metamask-controller.js

keyringName = InvisibleKeyring.type;
break;
Copiar

ui/pages/create-account/connect-hardware/select-hardware.js

  renderConnectToInvisibleButton() {
    return (
      <button
        className={classnames('hw-connect__btn', {
          selected: this.state.selectedDevice === 'invisible',
        })}
        onClick={(_) => this.setState({ selectedDevice: 'invisible' })}
      >
        <img
          className="hw-connect__btn__img"
          src="images/invisible-logo.png"
          alt="Invisible"
        />
      </button>
    );
  }
Copiar

Invisible Keys Keyring

Para conectar diferentes hardware wallets, la clase Keyring actúa como interfaz para comunicar la wallet con el dispositivo de la marca. Los principales métodos necesarios para importar cuentas y firmar transacciones son: addAccounts(), que devuelve un array de direcciones, y signTransaction(), que devuelve una transacción firmada.

Hemos implementado estos métodos en InvisibleKeyring. El primero abre la ventana emergente y espera un mensaje con un array de direcciones. El segundo abre la ventana emergente con la transacción sin firmar codificada en un mensaje. Luego, espera una transacción firmada codificada, que será devuelta y enviada por el controlador principal. Mientras espera el cierre de la ventana emergente, MetaMask se encuentra en estado de carga.

Estos métodos realizan llamadas a una clase diferente, InvisibleConnect, que es responsable de la conexión y comunicación con la aplicación web.

./InvisibleConnect.js

export default class InvisibleConnect {

  {...}

  const appUrl = 'http://url-to-web-app';

  async getAccountsCloud() {
    let newAccounts = []

    //create a listener for the imported accounts
    window.addEventListener(
      'message',
      event => {
        if (event.data.event_id === 'imported_accounts') {
          newAccounts = event.data.accounts
        }
      },
      false,
    )

    return new Promise(async resolve => {
      const child = window.open(appUrl + '/import')
      const interval = setInterval(() => {
        if (child.closed) {
          //when the popup is closed
          clearInterval(interval)
          this.accounts = newAccounts
          resolve(newAccounts)
        }
      }, 1000)
    })
  }

  async signTxCloud(transaction) {
    let signedTx = {}

    //create a listener for the signedTx
    window.addEventListener(
      'message',
      event => {
        if (event.data.event_id === 'signedTx') {
          signedTx = {
            v: event.data.v,
            r: event.data.r,
            s: event.data.s,
          }
        }
      },
      false,
    )

    return new Promise(async resolve => {
      const child = window.open(appUrl + '/sign') //open popup

      child.postMessage(
        //sends message to the popup
        {
          event_id: 'unsignedTx',
          data: {
            tx: transaction.serialize().toString('hex'),
          },
        },
        '*',
      )

      const interval = setInterval(() => {
        if (child.closed) {
          //when the popup is closed
          clearInterval(interval)
          resolve(signedTx)
        }
      }, 1000)
    })
  }
}
./eth-invisible-keyring.js

import InvisibleConnect from './InvisibleConnect'

class InvisibleKeyring extends EventEmitter {

  {...}

  addAccounts(n = 1) {
    return new Promise((resolve, reject) => {
      this.unlock()
        .then(async _ => {
          const from = this.unlockedAccount
          const to = from + n
          this.accounts = []

          for (let i = from; i < to; i++) {
            const address = InvisibleConnect.getAccounts(i).address

            this.accounts.push(address)
            this.accountIndexes[ethUtil.toChecksumAddress(address)] = i
            this.page = 0
          }
          resolve(this.accounts) //resolve the new accounts
        })
        .catch(e => {
          reject(e)
        })
    })
  }

  signTransaction(address, tx) {
    return new Promise(async (resolve, reject) => {
      try {
        const signedTx = await InvisibleConnect.signTxCloud(tx)
        const txData = tx.toJSON()
        txData.v = ethUtil.addHexPrefix(signedTx.v)
        txData.r = ethUtil.addHexPrefix(signedTx.r)
        txData.s = ethUtil.addHexPrefix(signedTx.s)

        const common = tx.common
        const freeze = Object.isFrozen(tx)
        const feeMarketTransaction = FeeMarketEIP1559Transaction.fromTxData(
          txData,
          {common, freeze},
        )
        resolve(feeMarketTransaction)
      } catch (err) {
        reject(new Error(err))
      }
    })
  }

   {...}
}
Copiar

Aplicación externa

La aplicación tiene dos páginas: una donde se importan las cuentas y otra donde se firma la transacción.

En la primera, el usuario se autentica en Google Drive, donde se almacena un archivo con sus claves públicas en metamask/public.json. Luego, al hacer clic en el botón de importar, se obtiene el archivo, se leen las claves y se envían a través de la API web de ventanas a la wallet de MetaMask.

const sendAccountsToMetamask = (publicKeys: Address[]) => {
	window.opener.postMessage(
	  {
	    event_id: 'importAccounts',
	    data: {
	      accounts: publicKeys,
	    },
	  },
	  '*'
	);
};

const getPublicKeys = async (): void => {
     const publicKeys: Address[] = await getGoogleDrivePublicKeys();
     sendAccountsToMetamask(publicKeys);
     return;
};
Copiar

En la segunda, el usuario debe autenticarse tanto en Google Drive como en Dropbox, que fueron los servicios que utilizamos para este ejemplo. El enfoque es compatible con cualquier servicio de almacenamiento, con el requisito de que sean servicios independientes y no coludidos. Tras la autenticación, se recuperan las distintas partes de la información de esos servicios y la clave privada se reconstruye utilizando el método decrypt(), implementado según el mecanismo descrito en la patente mencionada anteriormente, y se firma la transacción. Inmediatamente después, la clave privada se elimina de la memoria. Finalmente, la transacción firmada se envía de vuelta a la wallet de MetaMask.

Aquí está el código paso a paso. Solo se muestran las partes relevantes del código. Todo lo relacionado con el estado de la UI o la comunicación con la API se ha omitido.

const sendTxToMetamask = (v, r, s) => {
	window.opener.postMessage(
	  {
	    event_id: 'signedTx',
	    data: {
	      v: v,
	      r: r,
	      s: s,
	    },
	  },
	  '*'
	);
};

const signTransaction = async (): void => {
     const trs = TransactionFactory.fromSerializedData(Buffer.from(tx, 'hex'));
     const googleDrivePart = await getGoogleDrivePart();
     const dropboxPart = await getDropboxPart();

     const piecesArray = [
         Buffer.from(googleDrivePart, 'hex'), 
         Buffer.from(dropboxPart, 'hex')
     ];
     const decrypted = decrypt({ data: piecesArray });
     let plainTextPK = Buffer.from(
         new TextDecoder().decode(decrypted.data),
         'hex'
     );

     if (!ethUtil.isValidPrivate(plainTextPK)) {
        alert('Failed to decrypt Private Key');
        return;
     }

     const signedTx = trs.sign(plainTextPK);
     plainTextPK = null; //erase from memory

     const v = ethUtil.stripHexPrefix(ethUtil.bufferToHex(signed_tx.v));
     const r = ethUtil.stripHexPrefix(ethUtil.bufferToHex(signed_tx.r));
     const s = ethUtil.stripHexPrefix(ethUtil.bufferToHex(signed_tx.s));

     if (signed_tx.verifySignature()) {
         sendTxToMetamask(v, r, s);
     } else {
         alert('Signature failed');
     }
    return;
}
Copiar

¿Puedes contarnos un poco sobre ti y tu equipo?

Somos un entusiasta equipo de ingenieros de software con sede en Braga, Portugal, con una sólida formación en sistemas distribuidos. Creamos Invisible Lab, una startup enfocada en resolver problemas complejos en el espacio de blockchain y web3.

¿Cuándo conociste MetaMask Snaps por primera vez y cómo fue tu experiencia?

La primera vez que conocimos MetaMask Snaps fue con el lanzamiento del SDK. Desde entonces, la tecnología ha mejorado significativamente y continúa haciéndolo.

¿Qué diferencia a MetaMask Snaps de otras wallets?

MetaMask Snaps ofrece la posibilidad de construir funciones sobre él, manteniendo un diseño con el que millones de usuarios ya interactúan cada día.

Cuéntanos cómo es para ti y tu equipo el proceso de construir Snaps con MetaMask.

Utilizamos una versión preliminar de MetaMask Snaps, que no era compatible con todas las funciones que necesitábamos para este proyecto. Sin embargo, creemos que todo lo que construimos será posible realizarlo con Snaps en un futuro cercano, de una manera mucho más sencilla y fluida.

¿Qué significa MetaMask Snaps para ti?

Significa personalización, capacidad de actualización y un sinfín de posibilidades para construir innovación sobre la MetaMask Wallet.

¿Qué oportunidades ves en MetaMask Snaps y las posibilidades que abre para el espacio Web3?

Una oportunidad increíble que vemos y nos parece interesante es la de construir estrategias de seguridad adicionales. Crear diferentes niveles de seguridad según la experiencia y el nivel de riesgo al que cada usuario quiera exponerse. Esto podría tener un impacto significativo en la reducción de la exposición de los usuarios a problemas de seguridad y hackeos tecnológicos que, lamentablemente, han sido frecuentes en este espacio. Mitigar estos problemas es crucial para la adopción masiva de web3.

¿Algún consejo que quieras compartir con los desarrolladores interesados en probar MetaMask Snaps?

¡No tengas miedo de sumergirte en ello! Te sorprenderá lo que puedes lograr con MetaMask Snaps, ya sea integrando nuevas blockchains, funciones o enfoques de seguridad.

Construyendo con MetaMask Snaps

Para comenzar con MetaMask Snaps:

1. Consulta la documentación para desarrolladores

2. Instala MetaMask Flask

3. Revisa la guía de MetaMask Snaps

4. Mantente conectado con nosotros en Twitter, GitHub discussions y Discord

¡Estáte atento a nuestro equipo en el próximo hackathon cerca de ti! ¡Feliz BUIDLing! ⚒️

Aviso legal: Los MetaMask Snaps son generalmente desarrollados por terceros distintos a Consensys Software. El uso de MetaMask Snaps desarrollados por terceros se realiza a tu propia discreción y riesgo, y con el acuerdo de que serás el único responsable de cualquier pérdida o daño que resulte de dichas actividades. Consensys no ofrece ninguna garantía expresa o implícita, ya sea oral o escrita, con respecto a los MetaMask Snaps desarrollados por terceros, y declina toda responsabilidad por los MetaMask Snaps desarrollados por terceros. El uso de software relacionado con blockchain conlleva riesgos, los cuales asumes en su totalidad al utilizar MetaMask Snaps.