Cómo crear un chat cifrado de extremo a extremo con Seald y PubNub

Hola 👋 Hoy, descubramos con y el cómo crear un chat cifrado de extremo a extremo Pubnub SDK sellado. 👉 Puede encontrar un ejemplo completamente funcional de cómo usar PubNub y Seald aquí: https://github.com/seald/pubnub-example-project ¿Qué es Pubnub? PubNub es un servicio de comunicación en tiempo real que se puede integrar en la mayoría de las aplicaciones. Fiable y escalable, se puede integrar fácilmente con los marcos más comunes. ¿Qué es Seald? Seald.io ofrece un SDK que permite realizar , con funciones de gestión avanzadas, Este SDK se puede integrar en aplicaciones web, backend, móviles o de escritorio. cifrado de extremo a extremo sin ningún conocimiento criptográfico previo. Descripción general del contenido ¿Por qué utilizar cifrado de extremo a extremo? ¿Por qué utilizar Seald.io en lugar del enlace de cifrado PubNub?👀 Metas 🏆 Implementación 🧠 Agregar cifrado de extremo a extremo con Seald 🔒💬 Conclusión ✅ ¿Por qué utilizar cifrado de extremo a extremo? 🔒 El cifrado de extremo a extremo ofrece Permite cifrar datos confidenciales tan pronto como se recopilan. Un cifrado temprano reducirá la superficie de ataque de su aplicación. Otra ventaja es que puedes Esto también protegerá cuando no esté dentro de su alcance, el más alto nivel de privacidad y seguridad. gestionar con precisión quién puede acceder a los datos. como servicios de terceros. El cifrado de extremo a extremo le permite cuando sus datos están en tránsito, cuando están en reposo e incluso cuando no están en su mano. Por tanto, ofrece una protección mucho más amplia que otras tecnologías de cifrado (TLS, cifrado de disco completo,...). mantener el control en todo momento, Siempre que se enfrente a un caso en el que (GDPR, HIPAA, SOC-2,...) o en el que tenga (médicos, de defensa,...), el cifrado de extremo a extremo es imprescindible. Pero incluso para datos más comunes, es una buena práctica tenerlos. Una violación de datos es un evento devastador que es importante el cumplimiento datos confidenciales cada vez es más frecuente. ¿Por qué utilizar Seald.io en lugar del enlace de cifrado PubNub?👀 PubNub SDK ofrece un enlace de cifrado simple, utilizando el argumento al crear una instancia de su SDK. Al hacerlo, se garantizará que todos los mensajes cargados estén cifrados Sin embargo, usted mismo debe realizar la administración de claves, que es de un sistema cifrado de extremo a extremo. cipherKey antes de enviarse. la parte más difícil Las vulnerabilidades rara vez provienen del cifrado en sí, sino más bien a través de fallas en el modelo de seguridad. de la filtración de claves El uso de un servicio de terceros para su seguridad le permite Seald.io propone un modelo de seguridad robusto, con control de gestión de acceso en tiempo real, revocación y recuperación de usuarios, 2FA y más. no tener un único punto de falla. certificado por ANSSI, Metas 🏆 Este artículo explica cómo integrar Seald con PubNub para proteger su chat con cifrado de extremo a extremo. Crearemos con las siguientes características: paso a paso una aplicación de mensajería de ejemplo, Salas de chat individuales y grupales. Cada miembro tiene una sala de chat dedicada con todos los demás usuarios. Cualquiera puede crear una sala de chat grupal con varios otros usuarios. Utilice cifrado de extremo a extremo para cada mensaje y archivo enviado. Permitir la gestión de acceso en tiempo real a los chats. Implementación 🧠 Configura una cuenta PubNub 👤 Para comenzar, necesitará Puedes registrarte . Una vez que haya iniciado sesión en su panel de control, debería ver que se ha creado con un conjunto de claves de demostración: una cuenta PubNub. aquí una aplicación de demostración y desplácese hasta la pestaña de configuración. Para nuestra demostración, necesitamos activar los permisos y . Para el permiso , usaremos los siguientes eventos: , y . Seleccione el conjunto de claves de demostración Files Objects Object User Metadata Events Channel Metadata Events Membership Events Una vez creado y configurado el conjunto de claves, debemos copiarlo a nuestra interfaz. Creemos un archivo JSON en la carpeta , llamado . Usaremos este archivo para todas las claves API que necesitemos. Comenzando con el conjunto de claves de PubNub: src/ settings.json { "PUBNUB_PUB_KEY": "pub-c-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", "PUBNUB_SUB_KEY": "sub-c-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" } Creando un chat básico usando PubNub 💬 Usaremos PubNub para casi Nuestro backend solo manejará el registro/inicio de sesión de usuarios y utilizará un modelo de usuario minimalista con solo una identificación, un nombre y un correo electrónico. todas las tareas de backend. En el frente, necesitamos una pequeña interfaz de autenticación: Una vez que el usuario tiene una cuenta, lo primero que necesita es una instancia del SDK de PubNub. debemos proporcionar un UUID. Para identificar al usuario en Pubnub, Para simplificar las cosas, usaremos la misma ID que en nuestro backend: /* frontend/src/App.js */ import settings from './settings.json' // our settings file for API keys /* ... */ const pubnub = new PubNub({ publishKey: settings.PUBNUB_PUB_KEY, subscribeKey: settings.PUBNUB_SUB_KEY, uuid: currentUser.id }) Para mantener nuestro backend lo más simple posible, usaremos los metadatos de usuario de PubNub para intercambiar información de los usuarios. simplemente llamamos a la función PubNub : Justo después de la creación de instancias del SDK, setUUIDMetadata /* frontend/src/App.js */ await pubnub.objects.setUUIDMetadata({ uuid: currentUser.id, data: { email: currentUser.emailAddress, name: currentUser.name } }) Obteniendo el estado inicial de la aplicación 🌱 que debe hacer con PubNub es recuperar todos los miembros existentes y almacenarlos en nuestro almacén de datos local: Lo primero /* frontend/src/App.js */ const existingMembers = await pubnub.objects.getAllUUIDMetadata() dispatch({ type: SET_USERS, payload: { users: existingMembers.data.map(u => new User({ id: u.id, name: u.name, emailAddress: u.email })) } }) Cada sala de chat corresponderá a un canal de PubNub. También agregaremos algunos metadatos a cada canal: : el ID del usuario que creó la sala. ownerId : Un booleano para diferenciar salas de mensajería directa y salas de grupos. one2one : un booleano, para ocultar una sala de grupo eliminada. archived Los metadatos se utilizarán más adelante al agregar el SDK de Seald. PubNub no tiene un concepto de propiedad, pero Seald sí. Definirá quién puede agregar o eliminar usuarios de un canal. Básicamente define un administrador de grupo. ownerId Comenzaremos También necesitaremos los metadatos de la sala, por lo que debemos incluir campos personalizados. Luego, debemos filtrar las salas archivadas y enviar todo a nuestro almacén de datos. recuperando las salas de chat existentes. Finalmente, nos al canal PubNub asociado a la sala, por lo que recibiremos nuevos mensajes: subscribe /* frontend/src/App.js */ // Retrieve rooms of which we are members const memberships = await pubnub.objects.getMemberships({ include: { customChannelFields: true } }) const knownRooms = [] // For each room, retrieve room members for (const room of memberships.data.filter(r => !r.channel.custom.archived)) { const roomMembers = await pubnub.objects.getChannelMembers({ channel: room.channel.id }) knownRooms.push(new Room({ id: room.channel.id, name: room.channel.name, users: roomMembers.data.map(u => u.uuid.id), ownerId: room.channel.custom.ownerId, one2one: room.channel.custom.one2one })) } // Store rooms in our data store dispatch({ type: SET_ROOMS, payload: { rooms: knownRooms } }) // Subscribe to channels to get new messages pubnub.subscribe({ channels: knownRooms.map(r => r.id) }) Ahora hemos recuperado todas las salas en las que nos encontramos. Necesitamos una última cosa para finalizar la inicialización de la aplicación: asegurarnos de tener una sala con todos los demás miembros, incluidos los recién registrados. one2one Para cada usuario recién encontrado, una nueva sala y le enviaremos un mensaje de saludo. crearemos Luego, configuraremos los metadatos de la sala y nos suscribiremos a ella: /* frontend/src/App.js */ // Ensure that we have a one2one room with everyone const one2oneRooms = knownRooms.filter(r => r.one2one) for (const m of existingMembers.data.filter(u => u.id!== currentUser.id)) { if (!one2oneRooms.find(r => r.users.includes(m.id))) { // New user found: generating a new one2one room const newRoomId = PubNub.generateUUID() const newRoom = new Room({ id: newRoomId, users: [currentUser.id, m.id], one2one: true, name: m.name, ownerId: currentUser.id }) // Add the new room to our local list dispatch({ type: EDIT_OR_ADD_ROOM, payload: { room: new Room({ id: newRoomId, users: [currentUser.id, m.id], one2one: true, name: m.name, ownerId: currentUser.id }) } }) // Publish a "Hello" message in the room await pubnub.publish({ channel: newRoomId, message: { type: 'message', data: (await sealdSession.encryptMessage('Hello 👋')) } }) // Subscribe to the new room pubnub.subscribe({ channels: [newRoomId] }) await pubnub.objects.setChannelMetadata({ channel: newRoomId, data: { name: 'one2one', custom: { one2one: true, ownerId: currentUser.id, }, } }) await pubnub.objects.setChannelMembers({ channel: newRoomId, uuids: [currentUser.id, m.id] }) } } Una vez hecho todo esto, el estado inicial de nuestra aplicación Sin embargo, debemos mantenerlo actualizado. estará completamente definido. Se puede hacer simplemente agregando un detector de eventos para eventos : membership /* frontend/src/App.js */ pubnub.addListener({ objects: async function(objectEvent) { if (objectEvent.message.type === 'membership') { if (objectEvent.message.event === 'delete') { // User is removed from a room /* Removing the room from store... */ } if (objectEvent.message.event === 'set') { // User is added to a room const metadata = await pubnub.objects.getChannelMetadata({ channel: objectEvent.message.data.channel.id }) const roomMembers = (await pubnub.objects.getChannelMembers({ channel: objectEvent.message.data.channel.id })).data.map(u => u.uuid.id) /* Adding new room to store + subscribing to new room channel... */ } } } }) pubnub.subscribe({ channels: [currentUser.id] }) // channel on which events concerning the current user are published Ahora podemos echar un vistazo a la propia sala de chat . Luego nos ocuparemos de las salas de grupos. one2one Recibir y enviar mensajes en una sala de chat 📩 En un archivo tendremos toda la lógica para mostrar los mensajes de una sala de chat. chat.js lo único que debemos hacer es recuperar todos los mensajes preexistentes. Para inicializar esta sala, Se puede hacer simplemente conociendo el ID de la habitación: /* frontend/src/components/Chat.jsx */ const fetchedMessages = (await pubnub.fetchMessages({ channels: [currentRoomId] })).channels[currentRoomId] Podemos suscribirnos al canal para recibir nuevos mensajes y agregar un oyente para mostrarlos en tiempo real: /* frontend/src/components/Chat.jsx */ pubnub.addListener({ message: handleReceiveMessage }) pubnub.subscribe({ channels: [currentRoomId] }) Para enviar un mensaje simplemente debemos publicarlo en el canal: /* frontend/src/components/Chat.jsx */ const handleSubmitMessage = async e => { /* Some checks that the room is in a correct state... */ await pubnub.publish({ channel: state.room.id, message: { type: 'message', data: state.message } }) } primero lo subiremos a PubNub. Luego obtendremos el URI del archivo cargado y lo publicaremos como un mensaje en la sala de chat: Para enviar un archivo, /* frontend/src/components/UploadButton.jsx */ // Upload Encrypted file const uploadData = await pubnub.sendFile({ channel: room.id, file: myFile, storeInHistory: false }) const fileURL = await pubnub.getFileUrl({ id: uploadData.id, name: uploadData.name, channel: room.id }) await pubnub.publish({ channel: state.room.id, message: { type: 'file', url: fileURL, fileName: await sealdSession.encryptMessage(selectedFiles[0].name) } }) Administrar el chat grupal 👨👩👦👦 Para crear y administrar grupos, necesitaremos una interfaz para seleccionar usuarios: podemos crear un canal PubNub para nuestra sala y luego configurar los metadatos y la membresía del canal. El código es muy similar al que se hace para las habitaciones one2one, por lo que no lo repetiremos aquí. Una vez seleccionados los miembros del grupo, Ahora tenemos una aplicación de chat completa. ¡Agreguemos cifrado de extremo a extremo para cada mensaje! Agregar cifrado de extremo a extremo con Seald 🔒💬 Configure una cuenta Seald 👤 Para comenzar con Seald, cree una cuenta de prueba gratuita aquí Al acceder al panel de Seald, se muestran algunas URL y tokens API. Obtenga los siguientes elementos: ID de aplicación apiURL claveAlmacenamientoURL Agregaremos estas claves a nuestro : settings.json { "PUBNUB_PUB_KEY": "pub-c-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", "PUBNUB_SUB_KEY": "sub-c-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", "SEALD_APP_ID": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", "SEALD_API_URL": "https://api.staging-0.seald.io", "SEALD_KEYSTORAGE_URL": "https://ssks.staging-0.seald.io" } cada usuario necesita una licencia JWT al registrarse. Para poder utilizar Seald SDK, Estos JWT deben generarse en el backend utilizando un secreto y una ID secreta. Desde la página de inicio del panel, copie el secreto JWT y su ID asociado en : backend/settings.json { "SEALD_JWT_SECRET_ID": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", "SEALD_JWT_SECRET": "XXXXXXXXXXXXXXXXXXXXXXXX" } Durante la llamada API de registro, generaremos una licencia JWT de Seald y la devolveremos: /* backend/routes/account.js */ const token = new SignJWT({ iss: settings.SEALD_JWT_SECRET_ID, jti: uuidv4(), /// Random string with enough entropy to never repeat. iat: Math.floor(Date.now() / 1000), // JWT valid only for 10 minutes. `Date.now()` returns the in milliseconds, this needs it in seconds. scopes: [3], // PERMISSION_JOIN_TEAM join_team: true }) .setProtectedHeader({ alg: 'HS256' }) const signupJWT = await token.sign(Buffer.from(settings.SEALD_JWT_SECRET, 'ascii')) Para obtener más información sobre esto, consulte . nuestro artículo de documentación sobre JWT Luego, necesitamos instalar el SDK de Seald. para identificar a los usuarios en el servidor Seald. Para hacerlo, usaremos el paquete . También necesitamos instalar un complemento sdk-plugin-ssks-password Este complemento permite una autenticación de contraseña simple de nuestros usuarios: npm i -S @seald-io/sdk @seald-io/sdk-plugin-ssks-password Creación de instancias del SDK de Seald 💡 Luego, crearemos un archivo . En este archivo, comenzaremos creando una función para crear una instancia del SDK de Seald: seald.js /* frontend/src/services/seald.js */ import SealdSDK from '@seald-io/sdk-web' import SealdSDKPluginSSKSPassword from '@seald-io/sdk-plugin-ssks-password' import settings from './settings.json' let sealdSDKInstance = null const instantiateSealdSDK = async () => { sealdSDKInstance = SealdSDK({ appId: settings.SEALD_APP_ID, apiURL: settings.SEALD_API_URL, plugins: [SealdSDKPluginSSKSPassword(settings.SEALD_KEYSTORAGE_URL)] }) } Creando y recuperando identidades Seald 🔑 En , también agregaremos dos funciones: una para crear una identidad y otra para recuperar una. también necesitamos la licencia JWT devuelta al crear la cuenta: seald.js Para crear una identidad, /* frontend/src/services/seald.js */ export const createIdentity = async ({ userId, password, signupJWT }) => { await instantiateSealdSDK() await sealdSDKInstance.initiateIdentity({ signupJWT }) await sealdSDKInstance.ssksPassword.saveIdentity({ userId, password }) } export const retrieveIdentity = async ({ userId, password }) => { await instantiateSealdSDK() await sealdSDKInstance.ssksPassword.retrieveIdentity({ userId, password }) } Durante nuestros flujos de registro e inicio de sesión, solo necesitamos llamar a estas funciones después de que el usuario haya iniciado sesión. En este punto, cada vez que nuestro usuario se conecta, tiene un SDK de Seald en funcionamiento, ¡listo para cifrar y descifrar! Para una seguridad adecuada, la contraseña debe tener un hash previo antes de enviarse al servidor de autenticación. Para obtener más detalles sobre esto, consulte . Advertencia: el párrafo sobre autenticación de contraseña en nuestra documentación Comience a cifrar y descifrar mensajes 🔒🔓 Cada sala de chat se asociará con una en el SDK de Seald. encryptionSession Cada vez que creamos una sala de chat, luego usarla: simplemente debemos agregar una línea para crear la sesión de cifrado y /* frontend/src/App.js */ // Create a Seald session const sealdSession = await getSealdSDKInstance().createEncryptionSession( { userIds: [currentUser.id, m.id] }, { metadata: newRoomId } ) // Publish a "Hello" message in the room await pubnub.publish({ channel: newRoomId, message: { type: 'message', data: (await sealdSession.encryptMessage('Hello 👋')) } }) Tenga en cuenta que nuestro usuario está incluido de forma predeterminada como destinatario de la encryptionSession. Al acceder a una sala, necesitamos obtener la correspondiente. Se puede recuperar de cualquier mensaje o archivo cifrado. Una vez que lo tengamos, lo mantendremos como referencia de componentes. encryptionSession Entonces podemos simplemente usar las funciones , , y . session.encryptMessage session.encryptFile session.decryptMessage session.decryptFile Empecemos por los mensajes. Para enviar un mensaje: /* frontend/src/components/Chat.js */ const handleSubmitMessage = async m => { /* Some validation that we are in a valid room... */ // if there is no encryption session set in cache yet, create one // (should never happen, as a "Hello" is sent on room creation) if (!sealdSessionRef.current) { sealdSessionRef.current = await getSealdSDKInstance().createEncryptionSession( { userIds: state.room.users }, { metadata: state.room.id } ) } // use the session to encrypt the message we are trying to send const encryptedMessage = await sealdSessionRef.current.encryptMessage(state.message) // publish the encrypted message to pubnub await pubnub.publish({ channel: state.room.id, message: { type: 'message', data: encryptedMessage } }) /* Some cleanup... */ } Y cuando recibimos un mensaje: /* frontend/src/components/Chat.js */ const decryptMessage = async m => { /* Filter out files... */ let encryptedData = m.message.data if (!sealdSessionRef.current) { // no encryption session set in cache yet // we try to get it by parsing the current message sealdSessionRef.current = await getSealdSDKInstance().retrieveEncryptionSession({ encryptedMessage: encryptedData }) // now that we have a session loaded, let's decrypt } const decryptedData = await sealdSessionRef.current.decryptMessage(encryptedData) // we have successfully decrypted the message return { ...m, uuid: m.uuid || m.publisher, value: decryptedData } /* Some error handling... */ } /* Other stuff... */ const handleReceiveMessage = async m => { const decryptedMessage = await decryptMessage(m) setState(draft => { draft.messages = [...draft.messages, decryptedMessage] }) } Además, utilizamos esta función para descifrar todos los mensajes que ya están en la sesión al abrir una sala: decryptMessage /* frontend/src/components/Chat.js */ const fetchedMessages = (await pubnub.fetchMessages({ channels: [currentRoomId] })).channels[currentRoomId] const clearMessages = fetchedMessages ? await Promise.all(fetchedMessages.map(decryptMessage)) : [] Y ahora los archivos. Para cargar un archivo: /* frontend/src/components/UploadButton.js */ // Encrypt file const encryptedBlob = await sealdSession.encryptFile( selectedFiles[0], selectedFiles[0].name, { fileSize: selectedFiles[0].size } ) const encryptedFile = new File([encryptedBlob], selectedFiles[0].name) // Upload Encrypted file const uploadData = await pubnub.sendFile({ channel: room.id, file: encryptedFile, storeInHistory: false }) Y para descifrar un archivo: /* frontend/src/components/Message.js */ const onClick = async () => { if (state.data.type === 'file') { const response = await fetch(state.data.url) const encryptedBlob = await response.blob() const { data: clearBlob, filename } = await sealdSession.decryptFile(encryptedBlob) const href = window.URL.createObjectURL(clearBlob) /* Create an element and simulate a click on it to download the created objectURL */ } } Administrar miembros del grupo 👨👩👦 Los chats grupales también tendrán su . Cada vez que se crea un grupo, debemos crear uno: encryptionSession /* frontend/src/components/ManageDialogRoom.js.js */ // To create the encryptionSession const sealdSession = await getSealdSDKInstance().createEncryptionSession( { userIds: dialogRoom.selectedUsersId }, { metadata: newRoomId } ) Luego, necesitaremos agregarlos o eliminarlos del mismo: cada vez que modifiquemos miembros del grupo, /* frontend/src/components/ManageDialogRoom.js.js */ // we compare old and new members to figure out which ones were just added or removed const usersToRemove = dialogRoom.room.users.filter(id => !dialogRoom.selectedUsersId.includes(id)) const usersToAdd = dialogRoom.selectedUsersId.filter(id => !dialogRoom.room.users.includes(id)) if (usersToAdd.length > 0) { // for every added user, add them to the Seald session await dialogRoom.sealdSession.addRecipients({ userIds: usersToAdd }) // then add them to the pubnub channel await pubnub.objects.setChannelMembers({ channel: dialogRoom.room.id, uuids: usersToAdd }) } if (usersToRemove.length > 0) { // for every removed user, revoke them from the Seald session await dialogRoom.sealdSession.revokeRecipients({ userIds: usersToRemove }) // then remove them from the pubnub channel for (const u of usersToRemove) { await pubnub.objects.removeMemberships({ channels: [dialogRoom.room.id], uuid: u }) } } Conclusión ✅ Una vez hecho esto, ¡habremos terminado! Logramos con solo unas pocas líneas de código. integrar Seald en PubNub Ahora que puede asegurar a sus usuarios que sus datos seguirán siendo confidenciales, el chat está cifrado de extremo a extremo, incluso en caso de vulneración de datos. Como siempre, si necesita alguna orientación adicional. no dudes en Contáctenos No puedo esperar a ver lo que has creado 🥳. También publicado aquí.