Como construir um bate-papo criptografado de ponta a ponta com Seald e PubNub

Olá 👋 Hoje, vamos descobrir bate- com e o como construir um papo criptografado de ponta a ponta Pubnub seald SDK. 👉 Um exemplo totalmente funcional de como usar PubNub e Seald pode ser encontrado aqui: https://github.com/seald/pubnub-example-project O que é Pubnub? PubNub é um serviço de comunicação em tempo real que pode ser integrado à maioria dos aplicativos. Confiável e escalável, pode ser facilmente integrado aos frameworks mais comuns. O que é selo? Seald.io oferece um SDK que permite realizar , com recursos avançados de gerenciamento, Este SDK pode ser integrado a aplicativos web, back-end, móveis ou desktop. criptografia ponta a ponta sem nenhum conhecimento criptográfico prévio. Visão geral do conteúdo Por que usar criptografia de ponta a ponta? Por que usar Seald.io em vez do gancho de criptografia PubNub?👀 Metas 🏆 Implementação 🧠 Adicionando criptografia ponta a ponta com Seald 🔒💬 Conclusão ✅ Por que usar criptografia de ponta a ponta? 🔒 A criptografia ponta a ponta oferece Permite criptografar dados confidenciais assim que são coletados. Uma criptografia antecipada reduzirá a superfície de ataque do seu aplicativo. Outra vantagem é que você pode Isso também protegerá quando não estiver no seu escopo, o mais alto nível de privacidade e segurança. gerenciar com precisão quem pode acessar os dados. como serviços de terceiros. A criptografia ponta a ponta permite que você quando seus dados estão em trânsito, quando estão em repouso e até mesmo quando não estão em suas mãos. Assim, oferece uma proteção muito mais ampla do que outras tecnologias de criptografia (TLS, criptografia de disco completo, ...). mantenha o controle em todos os momentos, Sempre que você enfrentar um caso onde (GDPR, HIPAA, SOC-2,...) ou onde você tem (médicos, defesa,...), a criptografia ponta a ponta é obrigatória. Mas mesmo para dados mais comuns, é uma boa prática ter. Uma violação de dados é um evento devastador que se torna é importante a conformidade dados confidenciais cada vez mais frequente. Por que usar Seald.io em vez do gancho de criptografia PubNub?👀 PubNub SDK oferece um gancho de criptografia simples, usando o argumento ao instanciar seu SDK. Isso garantirá que todas as mensagens enviadas sejam criptografadas No entanto, você mesmo deve fazer o gerenciamento das chaves, que é de um sistema criptografado de ponta a ponta. cipherKey antes de serem enviadas. a parte mais difícil As vulnerabilidades raramente vêm da criptografia em si, mas na maioria das vezes por meio de falhas no modelo de segurança. do vazamento de chaves Usar um serviço de terceiros para sua segurança permite que você Seald.io propõe um modelo de segurança robusto, com controle de gerenciamento de acesso em tempo real, revogação e recuperação de usuários, 2FA e muito mais. não tenha um único ponto de falha. certificado pela ANSSI, Metas 🏆 Este artigo explica como integrar o Seald ao PubNub para proteger seu bate-papo com criptografia ponta a ponta. Construiremos com os seguintes recursos: passo a passo, um exemplo de aplicativo de mensagens, Salas de bate-papo individuais e em grupo. Cada membro tem uma sala de chat dedicada com todos os outros usuários. Qualquer pessoa pode criar uma sala de chat em grupo com vários outros usuários. Use criptografia ponta a ponta para cada mensagem e arquivo enviado. Permitir gerenciamento de acesso em tempo real aos chats. Implementação 🧠 Configure uma conta PubNub 👤 Para começar, você precisará Você pode se inscrever . Uma vez logado em seu painel, você verá que com um conjunto de chaves de demonstração foi criado: de uma conta PubNub. aqui um aplicativo de demonstração e vá até a guia de configuração. Para nossa demonstração, precisamos ativar as permissões e . Para a permissão do , usaremos os seguintes eventos: , e . Selecione o conjunto de chaves de demonstração Files Objects Object User Metadata Events Channel Metadata Events Membership Events Depois que o conjunto de chaves for criado e configurado, precisamos copiá-lo para nosso frontend. Vamos criar um arquivo JSON na pasta , chamado . Usaremos este arquivo para todas as chaves de API que precisaremos. Começando com o conjunto de chaves PubNub: src/ settings.json { "PUBNUB_PUB_KEY": "pub-c-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", "PUBNUB_SUB_KEY": "sub-c-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" } Construindo um chat básico usando PubNub 💬 Usaremos o PubNub para quase Nosso back-end lidará apenas com a inscrição/login do usuário e usará um modelo de usuário minimalista com apenas um ID, um nome e um e-mail. todas as tarefas de back-end. Na parte frontal, precisamos de uma pequena interface de autenticação: Assim que o usuário tiver uma conta, a primeira coisa que ele precisa é de uma instância do PubNub SDK. precisamos fornecer um UUID. Para identificar o usuário no Pubnub, Para simplificar, usaremos o mesmo ID do nosso 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 manter nosso backend o mais simples possível, usaremos os metadados de usuário do PubNub para trocar informações dos usuários. simplesmente chamamos a função PubNub : Logo após a instanciação do SDK, setUUIDMetadata /* frontend/src/App.js */ await pubnub.objects.setUUIDMetadata({ uuid: currentUser.id, data: { email: currentUser.emailAddress, name: currentUser.name } }) Obtendo o estado inicial do aplicativo 🌱 a fazer com o PubNub é recuperar todos os membros existentes e armazená-los em nosso armazenamento de dados local: A primeira coisa /* 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 um canal PubNub. Também adicionaremos alguns metadados a cada canal: : o ID do usuário que criou a sala. ownerId : Um booleano para diferenciar salas de mensagens diretas e salas de grupo. one2one : um booleano, para ocultar uma sala de grupo excluída. archived Os metadados serão usados posteriormente ao adicionar o Seald SDK. O PubNub não tem um conceito de propriedade, mas o Seald tem. Ele definirá quem pode adicionar ou remover usuários de um canal. Basicamente define um administrador de grupo. ownerId Começaremos Também precisaremos dos metadados da sala, por isso precisamos incluir campos personalizados. Então, precisamos filtrar as salas arquivadas e enviar tudo para nosso armazenamento de dados. recuperando salas de chat existentes. Por fim, o canal PubNub associado à sala, para recebermos novas mensagens: 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) }) Agora buscamos todas as salas em que estamos. Precisamos de uma última coisa para finalizar a inicialização do aplicativo: garantir que tenhamos uma sala com todos os outros membros, incluindo os recém-registrados. one2one Para cada usuário recém-encontrado, uma nova sala e enviaremos uma mensagem de alô. criaremos Em seguida, definiremos os metadados da sala e assinaremos: /* 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] }) } } Depois de tudo isso feito, nosso estado inicial do aplicativo No entanto, precisamos mantê-lo atualizado. está totalmente definido. Isso pode ser feito simplesmente adicionando um ouvinte de evento 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 Agora podemos dar uma olhada na própria sala de bate-papo . Então cuidaremos das salas de grupo. one2one Receber e enviar mensagens em uma sala de chat 📩 Em um arquivo teremos toda a lógica para exibir as mensagens de uma sala de chat. chat.js a única coisa que precisamos fazer é buscar todas as mensagens pré-existentes. Para inicializar esta sala, Isso pode ser feito simplesmente conhecendo o ID do quarto: /* frontend/src/components/Chat.jsx */ const fetchedMessages = (await pubnub.fetchMessages({ channels: [currentRoomId] })).channels[currentRoomId] Podemos assinar o canal para receber novas mensagens e adicionar um ouvinte para exibi-las em tempo real: /* frontend/src/components/Chat.jsx */ pubnub.addListener({ message: handleReceiveMessage }) pubnub.subscribe({ channels: [currentRoomId] }) Para enviar uma mensagem, basta publicá-la no 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 } }) } primeiro iremos carregá-lo no PubNub. Em seguida, obteremos o URI do arquivo enviado e o publicaremos como uma mensagem na sala de chat: Para enviar um arquivo, /* 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) } }) Gerenciando bate-papo em grupo 👨👩👦👦 Para criar e gerenciar grupos, precisaremos de uma interface para seleção de usuários: podemos criar um canal PubNub para nossa sala e, em seguida, definir metadados e associação para o canal. O código é muito semelhante ao que é feito para as salas one2one, por isso não vamos repeti-lo aqui. Depois que os membros do grupo forem selecionados, Agora temos um aplicativo de chat completo. Vamos adicionar criptografia ponta a ponta para cada mensagem! Adicionando criptografia ponta a ponta com Seald 🔒💬 Configure uma conta Seald 👤 Para começar com Seald, crie uma conta de teste gratuita aqui Ao acessar o painel do Seald, alguns URLs e tokens de API são exibidos. Obtenha os seguintes elementos: ID do aplicativo APIURL keyStorageURL Adicionaremos essas chaves ao nosso : 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 usuário precisa de uma licença JWT ao se inscrever. Para poder usar o Seald SDK, Esses JWT precisam ser gerados no back-end usando um segredo e um ID secreto. Na página inicial do painel, copie o segredo JWT e seu ID associado em : backend/settings.json { "SEALD_JWT_SECRET_ID": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", "SEALD_JWT_SECRET": "XXXXXXXXXXXXXXXXXXXXXXXX" } Durante a chamada da API de inscrição, geraremos um JWT de licença Seald e o retornaremos: /* 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 obter mais informações sobre isso, consulte . nosso artigo de documentação sobre JWT Então, precisamos instalar o Seald SDK. para identificar usuários no servidor Seald. Para fazer isso, usaremos o pacote . Também precisamos instalar um plugin sdk-plugin-ssks-password Este plugin permite a autenticação simples por senha de nossos usuários: npm i -S @seald-io/sdk @seald-io/sdk-plugin-ssks-password Instanciando o Seald SDK 💡 Em seguida, criaremos um arquivo . Neste arquivo, começaremos criando uma função para instanciar o Seald SDK: 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)] }) } Criando e recuperando identidades Seald 🔑 Em , também adicionaremos duas funções: uma para criar uma identidade e outra para recuperá-la. também precisamos do JWT de licença retornado na criação da conta: seald.js Para criar uma identidade, /* 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 nossos fluxos de inscrição e login, só precisamos chamar essas funções depois que o usuário fizer login. Neste ponto, toda vez que nosso usuário estiver conectado, ele terá um Seald SDK funcionando, pronto para criptografar e descriptografar! Para segurança adequada, a senha deve ser previamente criptografada antes de ser enviada ao servidor de autenticação. Para mais detalhes sobre isso, consulte . Aviso: o parágrafo sobre autenticação por senha em nossa documentação Comece a criptografar e descriptografar mensagens 🔒🔓 Cada sala de bate-papo será associada a uma no Seald SDK. encryptionSession Cada vez que criamos uma sala de chat, usá-la: basta adicionar uma linha para criar a sessão de criptografia e /* 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 👋')) } }) Observe que nosso usuário é incluído por padrão como destinatário da encryptionSession. Ao acessar uma sala, precisamos obter a correspondente. Ele pode ser recuperado de qualquer mensagem ou arquivo criptografado. Assim que tivermos isso, iremos mantê-lo na referência do componente. encryptionSession Então podemos simplesmente usar as funções , , e . session.encryptMessage session.encryptFile session.decryptMessage session.decryptFile Vamos começar com as mensagens. Para enviar uma mensagem: /* 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... */ } E quando recebemos uma mensagem: /* 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] }) } Além disso, usamos esta função para descriptografar todas as mensagens já na sessão ao abrir uma 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)) : [] E agora para arquivos. Para fazer upload de um arquivo: /* 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 }) E para descriptografar um arquivo: /* 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 */ } } Gerenciando membros do grupo 👨👩👦 Os bate-papos em grupo também terão . Cada vez que um grupo é criado, precisamos criar um: encryptionSession /* frontend/src/components/ManageDialogRoom.js.js */ // To create the encryptionSession const sealdSession = await getSealdSDKInstance().createEncryptionSession( { userIds: dialogRoom.selectedUsersId }, { metadata: newRoomId } ) Então, precisaremos adicioná-los ou removê-los dele: toda vez que modificarmos membros do 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 }) } } Conclusão ✅ Feito isso, terminamos! Conseguimos com apenas algumas linhas de código. integrar o Seald ao PubNub Agora que você pode garantir aos seus usuários que seus dados permanecerão confidenciais, o chat está criptografado de ponta a ponta, mesmo em caso de violação de dados. Como sempre, se você precisar de alguma orientação adicional. não hesite em Contate-nos Mal posso esperar para ver o que você construiu 🥳. Também publicado aqui.