Created
August 5, 2023 11:19
-
-
Save milaabl/268b678c7b9793a11e9f636d3ee3ba70 to your computer and use it in GitHub Desktop.
E2E RSA + AES encryption system (symmetric+asymmetric encryption for sensitive data transfers) | React, CryptoJS & Shell .sh (OpenSSL)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import CryptoJS from 'crypto-js'; | |
| import './app.css'; | |
| import FileInput from "./components/FileInput/FileInput"; | |
| import { FC, useEffect, useState } from "react"; | |
| const getAESEncrypted = (secret: string, password: string) => { | |
| const encrypted = CryptoJS.AES.encrypt(secret, password); | |
| return encrypted.toString(); | |
| } | |
| const fromBase64 = (base64String : string) => Uint8Array.from(atob(base64String), c => c.charCodeAt(0)); | |
| const getPkciDer = (pkciPem : string) => { | |
| console.log(pkciPem); | |
| const pkciPemHeader = "-----BEGIN PUBLIC KEY-----"; | |
| const pkciPemFooter = "-----END PUBLIC KEY-----"; | |
| console.log(pkciPem); | |
| pkciPem = pkciPem.substring(pkciPemHeader.length, pkciPem.length - pkciPemFooter.length); | |
| console.log(pkciPem); | |
| return fromBase64(pkciPem); | |
| } | |
| const importPublicKey = async (pkciPem : string) => { | |
| return await window.crypto.subtle.importKey( | |
| "spki", | |
| getPkciDer(pkciPem), | |
| { | |
| name: "RSA-OAEP", | |
| hash: "SHA-1", | |
| }, | |
| true, | |
| ["encrypt"] | |
| ); | |
| } | |
| const encryptRSA = async (key : CryptoKey, text : string) => { | |
| const enc = new TextEncoder(); | |
| const encrypted = await window.crypto.subtle.encrypt( | |
| { | |
| name: "RSA-OAEP" | |
| }, | |
| key, | |
| enc.encode(text) | |
| ); | |
| return encrypted; | |
| } | |
| const ab2str = (buf : ArrayBuffer) => { | |
| //@ts-ignore | |
| return String.fromCharCode.apply(null, new Uint8Array(buf)); | |
| } | |
| const getRSAEncrypted = async (text : string) => { | |
| if (!process.env.REACT_APP_PUBLIC_RSA_KEY) { | |
| throw new Error('No public key provided in the .env'); | |
| } | |
| const key = | |
| await importPublicKey(process.env.REACT_APP_PUBLIC_RSA_KEY); | |
| const encrypted = await encryptRSA(key, text); | |
| download(createTextFile(window.btoa(ab2str(encrypted))), 'cipher_to_retrieve_aes_password.txt'); | |
| } | |
| const dec2hex = (dec: number): string => { | |
| return dec.toString(16).padStart(2, "0"); | |
| }; | |
| const generateId = (len?: number): string => { | |
| let arr = new Uint8Array((len || 32) / 2); | |
| window.crypto.getRandomValues(arr); | |
| return Array.from(arr, dec2hex).join(""); | |
| }; | |
| const download = (url: string, filename: string): void => { | |
| let elm = document.createElement("a"); | |
| elm.href = url; | |
| elm.setAttribute("download", filename); | |
| elm.click(); | |
| document.body.append(elm); | |
| }; | |
| const encrypt = async (fileBase64: string): Promise<string> => { | |
| const key = generateId(); | |
| await getRSAEncrypted(key); | |
| const aesEncryptedPayload = await getAESEncrypted(fileBase64, key); | |
| download(createTextFile(aesEncryptedPayload), 'ciphered_file_contents.txt'); | |
| return aesEncryptedPayload; | |
| }; | |
| const createTextFile = (text : string) : string => { | |
| const data = new Blob([text], {type: 'text/plain'}); | |
| const textFile = window.URL.createObjectURL(data); | |
| return textFile; | |
| }; | |
| const App: FC = () => { | |
| const [uploadedFileName, setUploadedFileName] = useState<string>(); | |
| const [uploadedFileBase64, setUploadedFileBase64] = useState<string>(); | |
| useEffect(() => { | |
| if (!(uploadedFileBase64 && uploadedFileName)) return; | |
| (async function () { | |
| await encrypt(uploadedFileBase64.split(",")[1]); | |
| })(); | |
| }, [uploadedFileName, uploadedFileBase64]); | |
| return ( | |
| <main> | |
| <FileInput | |
| setUploadedFileName={setUploadedFileName} | |
| setUploadedFileBase64={setUploadedFileBase64} | |
| /> | |
| </main> | |
| ); | |
| }; | |
| export default App; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| base64 --decode cipher_to_retrieve_aes_password.txt > cipher_to_retrieve_aes_password_binary.txt | |
| openssl rsautl -decrypt -oaep -inkey private_key.pem -in cipher_to_retrieve_aes_password_binary.txt -out key_to_decrypt_aes.txt | |
| RANDOM_KEY=$(cat key_to_decrypt_aes.txt) | |
| base64 --decode ciphered_file_contents.txt > ciphered_file_contents_base64_decoded.txt | |
| openssl enc -d -aes-256-cbc -in ciphered_file_contents_base64_decoded.txt -k ${RANDOM_KEY} -md MD5 -out original_file_contents.txt | |
| base64 --decode original_file_contents.txt > original_file_contents_base64_decoded.txt | |
| read |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <!-- Do not edit this file with editors other than draw.io --> | |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="771px" height="856px" viewBox="-0.5 -0.5 771 856" content="<mxfile host="app.diagrams.net" modified="2023-08-05T11:19:29.438Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" etag="T7jFWuojLSwo0OvZqQ-Y" version="21.6.6" type="device"><diagram name="Page-1" id="XHx2dRsoNxlyEkHrv-Ij">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</diagram></mxfile>" style="background-color: rgb(255, 255, 255);"><defs/><g><path d="M 250 105 L 250 125 L 250 115 L 250 128.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 250 133.88 L 246.5 126.88 L 250 128.63 L 253.5 126.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="190" y="45" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 75px; margin-left: 191px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Retrieve file (accepts any format, up to 10MB)</div></div></div></foreignObject><text x="250" y="79" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Retrieve file (accep...</text></switch></g><path d="M 250 195 L 250 215 L 250 205 L 250 218.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 250 223.88 L 246.5 216.88 L 250 218.63 L 253.5 216.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="190" y="135" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 165px; margin-left: 191px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">File to Base64</div></div></div></foreignObject><text x="250" y="169" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">File to Base64</text></switch></g><path d="M 250 285 L 250 333.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 250 338.88 L 246.5 331.88 L 250 333.63 L 253.5 331.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="190" y="225" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 255px; margin-left: 191px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Generate random password to be used as AES key</div></div></div></foreignObject><text x="250" y="259" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Generate random pass...</text></switch></g><path d="M 310 395 L 330 395 L 318 395 L 331.63 395" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 336.88 395 L 329.88 398.5 L 331.63 395 L 329.88 391.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="190" y="340" width="120" height="110" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 395px; margin-left: 191px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Encrypt Base64 contents with the generated password and AES256 algorithm</div></div></div></foreignObject><text x="250" y="399" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Encrypt Base64 conte...</text></switch></g><path d="M 414 335 L 414 315 L 414 328 L 414 314.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 414 309.12 L 417.5 316.12 L 414 314.37 L 410.5 316.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="338" y="335" width="152" height="120" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 150px; height: 1px; padding-top: 395px; margin-left: 339px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Encrypt the AES password with RSA-OAEP encryption (w/ public key) & encode the encrypted password to Base64</div></div></div></foreignObject><text x="414" y="399" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Encrypt the AES password...</text></switch></g><rect x="348.5" y="238" width="131" height="70" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 129px; height: 1px; padding-top: 273px; margin-left: 350px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Save AES-encrypted Base64 file contents & RSA-encrypted AES password as text files</div></div></div></foreignObject><text x="414" y="277" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Save AES-encrypted Bas...</text></switch></g><path d="M 160 255 L 180 255 L 170 255 L 183.63 255" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 188.88 255 L 181.88 258.5 L 183.63 255 L 181.88 251.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 140 255 L 120 255 L 140 255 L 126.37 255" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 121.12 255 L 128.12 251.5 L 126.37 255 L 128.12 258.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 160 75 L 155 75 Q 150 75 150 85 L 150 245 Q 150 255 145 255 L 142.5 255 Q 140 255 145 255 L 147.5 255 Q 150 255 150 265 L 150 425 Q 150 435 155 435 L 160 435" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" transform="translate(150,0)scale(-1,1)translate(-150,0)rotate(-180,150,255)" pointer-events="all"/><rect x="0" y="225" width="120" height="60" rx="9" ry="9" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 255px; margin-left: 1px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Front-end</div></div></div></foreignObject><text x="60" y="259" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Front-end</text></switch></g><rect x="570" y="15" width="120" height="60" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 45px; margin-left: 571px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Back-end</div></div></div></foreignObject><text x="630" y="49" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Back-end</text></switch></g><path d="M 630 215 L 630 235 L 630 218 L 630 231.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 630 236.88 L 626.5 229.88 L 630 231.63 L 633.5 229.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="570" y="155" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 185px; margin-left: 571px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Base64 decode the RSA-encrypted AES password</div></div></div></foreignObject><text x="630" y="189" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Base64 decode the RS...</text></switch></g><path d="M 630 105 L 630 85 L 630 95 L 630 81.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 630 76.12 L 633.5 83.12 L 630 81.37 L 626.5 83.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 630 125 L 630 145 L 630 135 L 630 148.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 630 153.88 L 626.5 146.88 L 630 148.63 L 633.5 146.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 640 -25 L 635 -25 Q 630 -25 630 -15 L 630 105 Q 630 115 625 115 L 622.5 115 Q 620 115 625 115 L 627.5 115 Q 630 115 630 125 L 630 245 Q 630 255 635 255 L 640 255" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" transform="translate(0,115)scale(1,-1)translate(0,-115)rotate(-90,630,115)" pointer-events="all"/><path d="M 630 298 L 630 318 L 630 305 L 630 318.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 630 323.88 L 626.5 316.88 L 630 318.63 L 633.5 316.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="550" y="238" width="160" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 268px; margin-left: 551px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Decrypt the encrypted AES cipher with RSA-OAEP & private key</div></div></div></foreignObject><text x="630" y="272" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Decrypt the encrypted AES...</text></switch></g><path d="M 630 415 L 630 435 L 630 430 L 630 443.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 630 448.88 L 626.5 441.88 L 630 443.63 L 633.5 441.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="540" y="325" width="180" height="90" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 370px; margin-left: 541px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Save the retrieved (original) AES password to "key_to_decrypt_aes.txt"</div></div></div></foreignObject><text x="630" y="374" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Save the retrieved (original)...</text></switch></g><path d="M 630 525 L 630 545 L 630 535 L 630 548.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 630 553.88 L 626.5 546.88 L 630 548.63 L 633.5 546.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="555" y="450" width="150" height="75" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 488px; margin-left: 556px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Base64 decode the encrypted file contents</div></div></div></foreignObject><text x="630" y="491" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Base64 decode the encrypt...</text></switch></g><path d="M 320 30 L 320 0 L 550 0 L 550 30" fill="#b1ddf0" stroke="#10739e" stroke-miterlimit="10" pointer-events="all"/><path d="M 320 30 L 320 90 L 550 90 L 550 30" fill="none" stroke="#10739e" stroke-miterlimit="10" pointer-events="none"/><path d="M 320 30 L 550 30" fill="none" stroke="#10739e" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 228px; height: 1px; padding-top: 15px; margin-left: 321px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">Files to transfer</div></div></div></foreignObject><text x="435" y="19" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">Files to transfer</text></switch></g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 220px; height: 1px; padding-top: 45px; margin-left: 326px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 26px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">cipher_to_retrieve_aes_password.txt</div></div></div></foreignObject><text x="326" y="49" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">cipher_to_retrieve_aes_password.txt</text></switch></g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 220px; height: 1px; padding-top: 75px; margin-left: 326px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 26px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">ciphered_file_contents.txt</div></div></div></foreignObject><text x="326" y="79" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">ciphered_file_contents.txt</text></switch></g><path d="M 630 630 L 630 650 L 630 635 L 630 648.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/><path d="M 630 653.88 L 626.5 646.88 L 630 648.63 L 633.5 646.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/><rect x="550" y="555" width="160" height="75" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 593px; margin-left: 551px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">AES decrypt the encrypted file contents (from binary)</div></div></div></foreignObject><text x="630" y="596" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">AES decrypt the encrypted...</text></switch></g><rect x="555" y="655" width="150" height="80" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 695px; margin-left: 556px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">Base64 decode the decrypted (original) file contents</div></div></div></foreignObject><text x="630" y="699" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Base64 decode the decrypt...</text></switch></g><path d="M 500 795 L 500 765 L 770 765 L 770 795" fill="#fad9d5" stroke="#ae4132" stroke-miterlimit="10" pointer-events="none"/><path d="M 500 795 L 500 855 L 770 855 L 770 795" fill="none" stroke="#ae4132" stroke-miterlimit="10" pointer-events="none"/><path d="M 500 795 L 770 795" fill="none" stroke="#ae4132" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 780px; margin-left: 501px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">Original files in Shell script's directory</div></div></div></foreignObject><text x="635" y="784" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">Original files in Shell script's directory</text></switch></g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 260px; height: 1px; padding-top: 810px; margin-left: 506px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 26px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">original_file_contents_base64_decoded.txt</div></div></div></foreignObject><text x="506" y="814" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">original_file_contents_base64_decoded.txt</text></switch></g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 260px; height: 1px; padding-top: 840px; margin-left: 506px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 26px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">original_file_contents.txt</div></div></div></foreignObject><text x="506" y="844" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">original_file_contents.txt</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { FileInputProps } from "./FileInput.types"; | |
| import { useRef, FC } from "react"; | |
| const fileToBase64 = (file: File): Promise<string> => { | |
| return new Promise<string>((resolve, reject) => { | |
| const reader = new FileReader(); | |
| reader.readAsDataURL(file); | |
| reader.onload = () => resolve(reader.result?.toString() || ""); | |
| reader.onerror = (error) => reject(error); | |
| }); | |
| }; | |
| const FileInput: FC<FileInputProps> = ({ | |
| setUploadedFileName, | |
| setUploadedFileBase64, | |
| }) => { | |
| const inputElement = useRef<HTMLInputElement>(null); | |
| return ( | |
| <section> | |
| <input | |
| ref={inputElement} | |
| onChange={async (e) => { | |
| if (!e.target?.files?.[0]) { | |
| return; | |
| } | |
| const _fileSizeInMb = ( | |
| e.target.files[0].size / | |
| (1024 * 1024) | |
| ).toFixed(2); | |
| if (+_fileSizeInMb > 10) { | |
| alert("File is larger than 10 MB"); | |
| e.target.value = ""; | |
| if (!/safari/i.test(navigator.userAgent)) { | |
| e.target.type = ""; | |
| e.target.type = "file"; | |
| } | |
| return; | |
| } | |
| setUploadedFileName(e.target.files[0].name); | |
| setUploadedFileBase64(await fileToBase64(e.target.files[0])); | |
| }} | |
| type="file" | |
| /> | |
| </section> | |
| ); | |
| }; | |
| export default FileInput; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment