Merge pull request #20 from phillip-che/encryption-branch

merge
phillip-che · Dec 8, 2023 · be836a0 · be836a0
2 parents 693c893 + 91b0a31
commit be836a0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 18 deletions.
diff --git a/client/components/MessageInput.tsx b/client/components/MessageInput.tsx
@@ -5,10 +5,11 @@ import { useSocket } from "@/context/socket.context"
 import UploadButton from "./UploadButton";
 import SendOutlinedIcon from '@mui/icons-material/SendOutlined';
 import EVENTS from '@/config/events';
+import crypto from 'crypto'
 
 const MessageInput = () => {
 
-    const { socket, username, messages, setMessages, roomID } = useSocket();
+    const { socket, username, messages, setMessages, roomID, aesKey } = useSocket();
     const [ textInput, setTextInput ] = useState("");
 
     const handleChange = (e: any) => {
@@ -28,12 +29,24 @@ const MessageInput = () => {
 
         const date = new Date();
         const timestamp = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });;
+
+        const iv = crypto.randomBytes(16);
+        const ivString = iv.toString('hex');
+        const encryptedMessage = encrypt(textInput, iv);
         setMessages([...messages, {type: "text", username: username, body: textInput, timestamp: timestamp}]);
-        socket.emit(EVENTS.CLIENT.SEND_MESSAGE, {type: "text", roomID: roomID, username: username, body: textInput, timestamp: timestamp});    
+        socket.emit(EVENTS.CLIENT.SEND_MESSAGE, {type: "text", roomID: roomID, username: username, body: encryptedMessage, timestamp: timestamp, iv: ivString});    
 
         setTextInput("");
     };
 
+    const encrypt = (text: string, iv: any) => {
+        const cipher = crypto.createCipheriv('aes-256-cbc', aesKey, iv);
+        let encryptedMessage = cipher.update(text, 'utf-8', 'hex');
+        encryptedMessage += cipher.final('hex');
+
+        return encryptedMessage;
+    };
+
     return (
         <div className="message-input">
             <UploadButton />

diff --git a/client/context/socket.context.tsx b/client/context/socket.context.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { createContext, useContext, useState, useEffect } from 'react';
+import { createContext, useContext, useState, useEffect, useRef } from 'react';
 import io, { Socket } from 'socket.io-client';
 import EVENTS from '@/config/events';
+import crypto from 'crypto'
 
 interface Context {
   socket: Socket;
@@ -11,13 +12,13 @@ interface Context {
   messages: {
     type: string;
     username: string;
-    body: string;
+    body: any;
     timestamp: string;
   }[];
   setMessages: Function;
   roomID?: string;
   usersConnected: [];
-  setUsersConnected: Function;
+  aesKey: Buffer;
 }
 
 const SOCKET_URL =
@@ -29,13 +30,16 @@ const socket = io(SOCKET_URL, {
   transports: ['websocket', 'polling'],
 });
 
+const aesKeyString = "fcba69ac69c7182417c68a5f6f78f6a24072156dd444013e69a2820f631164e7";
+const aesKey = Buffer.from(aesKeyString, 'hex');
+
 const SocketContext = createContext<Context>({
   socket,
   messages: [],
   usersConnected: [],
+  aesKey,
   setUsername: () => false,
-  setMessages: () => false,
-  setUsersConnected: () => false
+  setMessages: () => false
 });
 
 const SocketsProvider = (props: any) => {
@@ -44,32 +48,43 @@ const SocketsProvider = (props: any) => {
     { type: string; username: string; body: string; timestamp: string }[]
   >([]);
   const [roomID, setRoomID] = useState<string>('');
-  const [ usersConnected, setUsersConnected ] = useState<any>([]);
+  const [usersConnected, setUsersConnected] = useState<any>([]);
 
   useEffect(() => {
     socket.on(
       EVENTS.SERVER.SEND_MESSAGE,
-      ({ type, username, body, timestamp }) => {
-        setMessages([...messages, { type, username, body, timestamp }]);
-      }
+    ({ type, username, body, timestamp, iv }) => {
+
+      const decipher = crypto.createDecipheriv('aes-256-cbc', aesKey, Buffer.from(iv, 'hex'));
+      let decryptedMessage: any= decipher.update(body, 'hex', 'utf-8');
+      decryptedMessage += decipher.final('utf-8');
+      body = decryptedMessage;
+
+      setMessages([...messages, { type, username, body, timestamp }]);
+    }
     );
   }, [socket]);
 
   useEffect(() => {
     setMessages([]);
   }, [roomID]);
 
-  socket.on(EVENTS.UPDATE_USERS, ({ usersConnected }) => {
-    setUsersConnected(usersConnected);
-  });
-
   socket.on(
     EVENTS.SERVER.SEND_MESSAGE,
-    ({ type, username, body, timestamp }) => {
+    ({ type, username, body, timestamp, iv }) => {
+      const decipher = crypto.createDecipheriv('aes-256-cbc', aesKey, Buffer.from(iv, 'hex'));
+      let decryptedMessage: any= decipher.update(body, 'hex', 'utf-8');
+      decryptedMessage += decipher.final('utf-8');
+      body = decryptedMessage;
+
       setMessages([...messages, { type, username, body, timestamp }]);
     }
   );
 
+  socket.on(EVENTS.UPDATE_USERS, ({ usersConnected }) => {
+    setUsersConnected(usersConnected);
+  });
+
   socket.on(EVENTS.SERVER.JOIN_ROOM, ({ roomID }) => {
     setRoomID(roomID);
     setMessages([]);
@@ -81,7 +96,7 @@ const SocketsProvider = (props: any) => {
 
   return (
     <SocketContext.Provider
-      value={{ socket, username, setUsername, messages, setMessages, roomID, usersConnected, setUsersConnected }}
+      value={{ socket, username, setUsername, messages, setMessages, roomID, usersConnected, aesKey }}
       {...props}
     />
   );

diff --git a/server/src/app.ts b/server/src/app.ts
@@ -2,6 +2,7 @@ import express from 'express';
 import { createServer } from 'http';
 import { Server, Socket } from 'socket.io';
 import { nanoid } from 'nanoid';
+import crypto from 'crypto'
 
 const port = process.env.PORT || 4000;
 const corsOrigin = '*';
@@ -61,12 +62,14 @@ httpServer.listen(port, () => {
 
     socket.on(EVENTS.CLIENT.SEND_MESSAGE, (data) => {
       console.log(`${data.username} sent a ${data.type} to room: ${data.roomID}`);
+
       socket.to(data.roomID).emit(EVENTS.SERVER.SEND_MESSAGE, 
         {
           type: data.type,
           username: data.username,
           body: data.body,
-          timestamp: data.timestamp
+          timestamp: data.timestamp,
+          iv: data.iv,
       });
     });