Create keylock.js

keylock.js

@@ -0,0 +1,351 @@
+// keylock.js
+
+class KeyLock {
+
+    constructor() {
+        this.PREFERRED_FONTS = "bold 30px Arial, 'DejaVu Sans', Helvetica, sans-serif";
+    }
+
+    // --- Core Cryptography Methods ---
+
+    /**
+     * Converts a PEM-formatted key string to an ArrayBuffer.
+     * @param {string} pem - The PEM string (e.g., -----BEGIN...-----).
+     * @returns {ArrayBuffer} The raw binary data of the key.
+     */
+    _pemToBinary(pem) {
+        const lines = pem.split('\n');
+        const base64 = lines
+            .filter(line => !line.startsWith('-----'))
+            .join('');
+        const binaryDer = window.atob(base64);
+        const uint8Array = new Uint8Array(binaryDer.length);
+        for (let i = 0; i < binaryDer.length; i++) {
+            uint8Array[i] = binaryDer.charCodeAt(i);
+        }
+        return uint8Array.buffer;
+    }
+    
+    /**
+     * Converts an ArrayBuffer key to a PEM-formatted string.
+     * @param {ArrayBuffer} buffer - The raw binary data of the key.
+     * @param {string} label - The label for the PEM file (e.g., "PRIVATE KEY").
+     * @returns {string} The PEM-formatted key string.
+     */
+    _binaryToPem(buffer, label) {
+        const binaryStr = String.fromCharCode.apply(null, new Uint8Array(buffer));
+        const base64 = window.btoa(binaryStr);
+        let pem = `-----BEGIN ${label}-----\n`;
+        for (let i = 0; i < base64.length; i += 64) {
+            pem += base64.slice(i, i + 64) + '\n';
+        }
+        pem += `-----END ${label}-----`;
+        return pem;
+    }
+
+    /**
+     * Imports an RSA public key from PEM format into a CryptoKey object.
+     * @param {string} pem - The public key in PEM format (SPKI).
+     * @returns {Promise<CryptoKey>}
+     */
+    async importRsaPublicKey(pem) {
+        return await window.crypto.subtle.importKey(
+            'spki',
+            this._pemToBinary(pem), {
+                name: 'RSA-OAEP',
+                hash: 'SHA-256'
+            },
+            true,
+            ['encrypt']
+        );
+    }
+
+    /**
+     * Imports an RSA private key from PEM format into a CryptoKey object.
+     * @param {string} pem - The private key in PEM format (PKCS#8).
+     * @returns {Promise<CryptoKey>}
+     */
+    async importRsaPrivateKey(pem) {
+        return await window.crypto.subtle.importKey(
+            'pkcs8',
+            this._pemToBinary(pem), {
+                name: 'RSA-OAEP',
+                hash: 'SHA-256'
+            },
+            true,
+            ['decrypt']
+        );
+    }
+
+    /**
+     * Generates a new RSA-2048 key pair.
+     * @returns {Promise<{privateKeyPem: string, publicKeyPem: string}>}
+     */
+    async generatePemKeys() {
+        const keyPair = await window.crypto.subtle.generateKey({
+                name: 'RSA-OAEP',
+                modulusLength: 2048,
+                publicExponent: new Uint8Array([1, 0, 1]), // 65537
+                hash: 'SHA-256',
+            },
+            true,
+            ['encrypt', 'decrypt']
+        );
+
+        const privateKeyDer = await window.crypto.subtle.exportKey('pkcs8', keyPair.privateKey);
+        const publicKeyDer = await window.crypto.subtle.exportKey('spki', keyPair.publicKey);
+
+        return {
+            privateKeyPem: this._binaryToPem(privateKeyDer, 'PRIVATE KEY'),
+            publicKeyPem: this._binaryToPem(publicKeyDer, 'PUBLIC KEY'),
+        };
+    }
+
+    // --- Image Generation and Steganography ---
+
+    /**
+     * Generates a procedural starfield image on a canvas.
+     * @param {number} w - Width of the canvas.
+     * @param {number} h - Height of the canvas.
+     * @returns {HTMLCanvasElement}
+     */
+    _generateStarfieldImage(w = 800, h = 800) {
+        const canvas = document.createElement('canvas');
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext('2d');
+
+        // Background gradient
+        const centerX = w / 2;
+        const centerY = h / 2;
+        const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, w / 2);
+        gradient.addColorStop(0, 'rgb(20, 25, 40)');
+        gradient.addColorStop(1, 'rgb(0, 0, 5)');
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, w, h);
+
+        // Dim stars
+        for (let i = 0; i < (w * h) / 200; i++) {
+            const x = Math.random() * w;
+            const y = Math.random() * h;
+            const brightness = 30 + Math.random() * 60;
+            ctx.fillStyle = `rgb(${Math.floor(brightness * 0.9)}, ${Math.floor(brightness * 0.9)}, ${brightness})`;
+            ctx.fillRect(x, y, 1, 1);
+        }
+
+        // Bright stars with glow
+        const starColors = ['rgb(255, 255, 255)', 'rgb(220, 230, 255)', 'rgb(255, 240, 220)'];
+        for (let i = 0; i < (w * h) / 1000; i++) {
+            const x = Math.random() * w;
+            const y = Math.random() * h;
+            const size = 0.5 + 2.5 * (Math.random() ** 2);
+            const brightness = 120 + 135 * (Math.random() ** 1.5);
+            const color = starColors[Math.floor(Math.random() * starColors.length)];
+
+            ctx.beginPath();
+            const glowGradient = ctx.createRadialGradient(x, y, 0, x, y, size * 3);
+            glowGradient.addColorStop(0, color.replace(')', `, ${brightness / 255})`).replace('rgb', 'rgba'));
+            glowGradient.addColorStop(1, color.replace(')', ', 0)').replace('rgb', 'rgba'));
+            ctx.fillStyle = glowGradient;
+            ctx.arc(x, y, size * 3, 0, 2 * Math.PI);
+            ctx.fill();
+
+            ctx.beginPath();
+            ctx.fillStyle = color.replace(')', `, ${brightness / 255})`).replace('rgb', 'rgba');
+            ctx.arc(x, y, size, 0, 2 * Math.PI);
+            ctx.fill();
+        }
+        return canvas;
+    }
+    
+    /**
+     * Draws the text overlay on the image.
+     * @param {HTMLCanvasElement} canvas - The canvas to draw on.
+     * @returns {HTMLCanvasElement} The same canvas, now with an overlay.
+     */
+    _drawOverlay(canvas) {
+        const ctx = canvas.getContext('2d');
+        const { width, height } = canvas;
+        
+        ctx.fillStyle = 'rgba(10, 15, 30, 0.78)'; // 200/255 alpha
+        ctx.fillRect(0, 20, width, 60);
+
+        ctx.fillStyle = 'rgb(200, 220, 255)';
+        ctx.font = this.PREFERRED_FONTS;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText("KeyLock Secure Data", width / 2, 50);
+
+        return canvas;
+    }
+
+    /**
+     * Parses a key-value string into a JavaScript object.
+     * @param {string} kvString - The input string (e.g., 'USER="test"\nPASS:123').
+     * @returns {object}
+     */
+    _parseKvString(kvString) {
+        const payload = {};
+        if (!kvString) return payload;
+        
+        const lines = kvString.trim().split('\n');
+        for (const line of lines) {
+            const trimmedLine = line.trim();
+            if (!trimmedLine || trimmedLine.startsWith('#')) continue;
+
+            const parts = trimmedLine.split(/[:=]/, 2);
+            if (parts.length === 2) {
+                let [key, value] = parts;
+                key = key.trim().replace(/^['"]|['"]$/g, '');
+                value = value.trim().replace(/^['"]|['"]$/g, '');
+                if (key) {
+                    payload[key] = value;
+                }
+            }
+        }
+        return payload;
+    }
+    
+    // --- Main Public Methods: Encoding and Decoding ---
+
+    /**
+     * Generates an encrypted image containing the payload.
+     * @param {string} payloadKvString - The key-value data to encrypt.
+     * @param {string} publicKeyPem - The RSA public key in PEM format.
+     * @returns {Promise<string>} A data URL of the generated PNG image.
+     */
+    async generateEncryptedImage(payloadKvString, publicKeyPem) {
+        const payloadDict = this._parseKvString(payloadKvString);
+        if (Object.keys(payloadDict).length === 0) {
+            throw new Error("Payload is empty or could not be parsed.");
+        }
+        
+        // 1. Prepare crypto primitives
+        const publicKey = await this.importRsaPublicKey(publicKeyPem);
+        const aesKey = await window.crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']);
+        const nonce = window.crypto.getRandomValues(new Uint8Array(12));
+
+        // 2. Encrypt payload with AES
+        const jsonBytes = new TextEncoder().encode(JSON.stringify(payloadDict));
+        const ciphertext = await window.crypto.subtle.encrypt({ name: 'AES-GCM', iv: nonce }, aesKey, jsonBytes);
+
+        // 3. Encrypt AES key with RSA
+        const exportedAesKey = await window.crypto.subtle.exportKey('raw', aesKey);
+        const encryptedAesKey = await window.crypto.subtle.encrypt({ name: 'RSA-OAEP' }, publicKey, exportedAesKey);
+
+        // 4. Construct the final binary payload
+        // Format: [4-byte len of RSA key][RSA key][12-byte nonce][AES ciphertext]
+        const totalLength = 4 + encryptedAesKey.byteLength + nonce.byteLength + ciphertext.byteLength;
+        const finalPayload = new Uint8Array(totalLength);
+        const view = new DataView(finalPayload.buffer);
+        
+        let offset = 0;
+        view.setUint32(offset, encryptedAesKey.byteLength, false); // Big-endian
+        offset += 4;
+        finalPayload.set(new Uint8Array(encryptedAesKey), offset);
+        offset += encryptedAesKey.byteLength;
+        finalPayload.set(nonce, offset);
+        offset += nonce.byteLength;
+        finalPayload.set(new Uint8Array(ciphertext), offset);
+
+        // 5. Generate base image
+        const canvas = this._generateStarfieldImage();
+        this._drawOverlay(canvas);
+        const ctx = canvas.getContext('2d');
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const pixelData = imageData.data;
+
+        // 6. Embed payload into image via LSB steganography
+        // Format: [32-bit length header][payload bits]
+        const payloadWithHeader = new Uint8Array(4 + finalPayload.length);
+        const headerView = new DataView(payloadWithHeader.buffer);
+        headerView.setUint32(0, finalPayload.length, false); // Big-endian
+        payloadWithHeader.set(finalPayload, 4);
+
+        let binaryPayload = '';
+        payloadWithHeader.forEach(byte => {
+            binaryPayload += byte.toString(2).padStart(8, '0');
+        });
+
+        if (binaryPayload.length > pixelData.length) {
+             throw new Error("Payload is too large for the image.");
+        }
+
+        for (let i = 0; i < binaryPayload.length; i++) {
+            pixelData[i] = (pixelData[i] & 0xFE) | parseInt(binaryPayload[i], 2);
+        }
+
+        // 7. Finalize and return image
+        ctx.putImageData(imageData, 0, 0);
+        return canvas.toDataURL('image/png');
+    }
+
+    /**
+     * Decodes a payload hidden inside an image.
+     * @param {HTMLImageElement} imageElement - The image containing the hidden data.
+     * @param {string} privateKeyPem - The RSA private key in PEM format.
+     * @returns {Promise<{status: string, payload?: object, message?: string}>}
+     */
+    async decodePayload(imageElement, privateKeyPem) {
+        try {
+            const privateKey = await this.importRsaPrivateKey(privateKeyPem);
+
+            // 1. Extract pixel data from image
+            const canvas = document.createElement('canvas');
+            canvas.width = imageElement.naturalWidth;
+            canvas.height = imageElement.naturalHeight;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(imageElement, 0, 0);
+            const pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+
+            // 2. Extract binary data from LSBs
+            let headerBinary = '';
+            for (let i = 0; i < 32; i++) {
+                headerBinary += (pixelData[i] & 1).toString();
+            }
+            const dataLength = parseInt(headerBinary, 2); // Length in bytes
+            const requiredPixels = 32 + dataLength * 8;
+            if (requiredPixels > pixelData.length) {
+                throw new Error("Incomplete payload in image.");
+            }
+            
+            let dataBinary = '';
+            for (let i = 32; i < requiredPixels; i++) {
+                dataBinary += (pixelData[i] & 1).toString();
+            }
+
+            // 3. Convert binary string to ArrayBuffer
+            const cryptoPayload = new Uint8Array(dataLength);
+            for (let i = 0; i < dataLength; i++) {
+                cryptoPayload[i] = parseInt(dataBinary.substring(i * 8, (i + 1) * 8), 2);
+            }
+
+            // 4. Parse the crypto payload
+            const view = new DataView(cryptoPayload.buffer);
+            let offset = 0;
+            const encryptedAesKeyLen = view.getUint32(offset, false); // Big-endian
+            offset += 4;
+
+            const encryptedAesKey = cryptoPayload.slice(offset, offset + encryptedAesKeyLen);
+            offset += encryptedAesKeyLen;
+            const nonce = cryptoPayload.slice(offset, offset + 12);
+            offset += 12;
+            const ciphertext = cryptoPayload.slice(offset);
+
+            // 5. Decrypt AES key with RSA private key
+            const recoveredAesKeyBytes = await window.crypto.subtle.decrypt({ name: 'RSA-OAEP' }, privateKey, encryptedAesKey);
+            const recoveredAesKey = await window.crypto.subtle.importKey('raw', recoveredAesKeyBytes, { name: 'AES-GCM' }, true, ['decrypt']);
+
+            // 6. Decrypt payload with AES key
+            const decryptedPayloadBytes = await window.crypto.subtle.decrypt({ name: 'AES-GCM', iv: nonce }, recoveredAesKey, ciphertext);
+            const payloadJson = new TextDecoder().decode(decryptedPayloadBytes);
+            const payload = JSON.parse(payloadJson);
+
+            return { status: "Success", payload: payload };
+
+        } catch (e) {
+            console.error("Decryption Failed:", e);
+            return { status: "Error", message: `Decryption Failed: ${e.message}` };
+        }
+    }
+}