Create keylock-decoder.js

keylock-decoder.js

@@ -0,0 +1,202 @@
+/**
+ * KeyLock-JS-Decoder
+ * A client-side JavaScript module to decode data from images created by the KeyLock app.
+ * Uses Web Crypto API for decryption and HTML Canvas for LSB steganography extraction.
+ *
+ * @version 1.1.0
+ * @license MIT
+ */
+
+/**
+ * Converts a PEM-formatted key string (PKCS8) to a DER ArrayBuffer.
+ * This is a necessary preprocessing step for the Web Crypto API.
+ * @param {string} pem The PEM key string.
+ * @returns {ArrayBuffer} The key in DER format.
+ */
+function pemToDer(pem) {
+  const b64 = pem
+    .replace(/-----BEGIN PRIVATE KEY-----/g, '')
+    .replace(/-----END PRIVATE KEY-----/g, '')
+    .replace(/\s/g, '');
+
+  const binaryDer = atob(b64);
+  const buffer = new ArrayBuffer(binaryDer.length);
+  const bytes = new Uint8Array(buffer);
+  for (let i = 0; i < binaryDer.length; i++) {
+    bytes[i] = binaryDer.charCodeAt(i);
+  }
+  return buffer;
+}
+
+/**
+ * Extracts the hidden data payload from an image's LSBs using a Canvas.
+ * @param {HTMLImageElement} imageElement The <img> element containing the stego image.
+ * @returns {Promise<Uint8Array>} A promise that resolves with the extracted data payload.
+ */
+function extractDataFromImage(imageElement) {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    
+    // Ensure the canvas is the same size as the image to avoid scaling artifacts
+    canvas.width = imageElement.naturalWidth;
+    canvas.height = imageElement.naturalHeight;
+    ctx.drawImage(imageElement, 0, 0);
+
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+    const channels = 4; // RGBA
+
+    // 1. Extract the header to find the data length
+    const HEADER_BITS = 32; // 4 bytes for the length header
+    if (imageData.length < Math.ceil(HEADER_BITS / 3) * channels) {
+      return reject(new Error("Image is too small to contain a valid header."));
+    }
+
+    let headerBinaryString = '';
+    for (let i = 0; headerBinaryString.length < HEADER_BITS; i++) {
+        const pixelIndex = i * channels;
+        headerBinaryString += imageData[pixelIndex] & 1; // R
+        if (headerBinaryString.length < HEADER_BITS) headerBinaryString += imageData[pixelIndex + 1] & 1; // G
+        if (headerBinaryString.length < HEADER_BITS) headerBinaryString += imageData[pixelIndex + 2] & 1; // B
+    }
+
+    const headerBytes = new Uint8Array(HEADER_BITS / 8);
+    for (let i = 0; i < HEADER_BITS / 8; i++) {
+        headerBytes[i] = parseInt(headerBinaryString.substring(i * 8, (i + 1) * 8), 2);
+    }
+    
+    const dataView = new DataView(headerBytes.buffer);
+    const dataLengthInBytes = dataView.getUint32(0, false); // false for big-endian
+
+    if (dataLengthInBytes === 0) {
+        return resolve(new Uint8Array(0));
+    }
+
+    // 2. Extract the data payload
+    const dataLengthInBits = dataLengthInBytes * 8;
+    const bitOffset = HEADER_BITS;
+    
+    if (imageData.length < Math.ceil((bitOffset + dataLengthInBits) / 3) * channels) {
+        return reject(new Error("Image is too small for the data specified in the header. File may be corrupt."));
+    }
+
+    let dataBinaryString = '';
+    for (let i = 0; dataBinaryString.length < dataLengthInBits; i++) {
+        const bitPosition = bitOffset + i;
+        const pixelIndex = Math.floor(bitPosition / 3) * channels;
+        const channelOffset = bitPosition % 3;
+        dataBinaryString += imageData[pixelIndex + channelOffset] & 1;
+    }
+
+    if (dataBinaryString.length !== dataLengthInBits) {
+      return reject(new Error(`Data extraction error: expected ${dataLengthInBits} bits, but got ${dataBinaryString.length}. Image may be truncated or corrupt.`));
+    }
+    
+    const dataBytes = new Uint8Array(dataLengthInBytes);
+    for (let i = 0; i < dataLengthInBytes; i++) {
+      dataBytes[i] = parseInt(dataBinaryString.substring(i * 8, (i + 1) * 8), 2);
+    }
+    
+    resolve(dataBytes);
+  });
+}
+
+/**
+ * Decrypts a hybrid RSA-AES payload using the Web Crypto API.
+ * @param {Uint8Array} cryptoPayload The full encrypted payload.
+ * @param {string} privateKeyPem The recipient's private key in PEM format.
+ * @returns {Promise<object>} A promise that resolves with the decrypted JavaScript object.
+ */
+async function decryptHybridPayload(cryptoPayload, privateKeyPem) {
+  // --- Constants from Python core.py ---
+  const ENCRYPTED_AES_KEY_LEN_SIZE = 4;
+  const AES_GCM_NONCE_SIZE = 12;
+
+  // 1. Import the RSA private key
+  const privateKey = await crypto.subtle.importKey(
+    'pkcs8',
+    pemToDer(privateKeyPem),
+    { name: 'RSA-OAEP', hash: 'SHA-256' },
+    true,
+    ['decrypt']
+  );
+
+  // 2. Parse the crypto payload
+  const encryptedAesKeyLen = new DataView(cryptoPayload.buffer, 0, ENCRYPTED_AES_KEY_LEN_SIZE).getUint32(0, false);
+  
+  let offset = ENCRYPTED_AES_KEY_LEN_SIZE;
+  const encryptedAesKey = cryptoPayload.slice(offset, offset + encryptedAesKeyLen);
+  
+  offset += encryptedAesKeyLen;
+  const nonce = cryptoPayload.slice(offset, offset + AES_GCM_NONCE_SIZE);
+  
+  offset += AES_GCM_NONCE_SIZE;
+  const ciphertextWithTag = cryptoPayload.slice(offset);
+
+  // 3. Decrypt the AES key with the RSA private key
+  const decryptedAesKeyBytes = await crypto.subtle.decrypt(
+    { name: 'RSA-OAEP' },
+    privateKey,
+    encryptedAesKey
+  );
+
+  // 4. Import the decrypted AES key
+  const aesKey = await crypto.subtle.importKey(
+    'raw',
+    decryptedAesKeyBytes,
+    { name: 'AES-GCM', length: 256 },
+    true,
+    ['decrypt']
+  );
+
+  // 5. Decrypt the final data with the AES key
+  const decryptedDataBuffer = await crypto.subtle.decrypt(
+    { name: 'AES-GCM', iv: nonce },
+    aesKey,
+    ciphertextWithTag
+  );
+    
+  // 6. Decode the result from UTF-8 and parse as JSON
+  const decryptedText = new TextDecoder().decode(decryptedDataBuffer);
+  return JSON.parse(decryptedText);
+}
+
+
+/**
+ * Main public function. Decodes an auth object from a KeyLock image.
+ *
+ * @param {HTMLImageElement} imageElement The <img> element displaying the KeyLock PNG.
+ *   Note: The image must be served from the same origin or have CORS headers
+ *   allowing it to be drawn on a canvas. For file uploads, this is not an issue.
+ * @param {string} privateKeyPem The user's private RSA key in PEM format.
+ * @returns {Promise<object>} A promise that resolves to the decoded credentials object.
+ * @throws {Error} Throws an error if decoding or decryption fails.
+ */
+export async function decodeAuthFromImage(imageElement, privateKeyPem) {
+  if (!imageElement || !(imageElement instanceof HTMLImageElement)) {
+    throw new Error("A valid HTMLImageElement must be provided.");
+  }
+  if (!privateKeyPem || typeof privateKeyPem !== 'string') {
+    throw new Error("A valid private key in PEM format (string) must be provided.");
+  }
+  
+  try {
+    // Step 1: Extract the encrypted byte payload from the image LSBs
+    const cryptoPayload = await extractDataFromImage(imageElement);
+    if (cryptoPayload.length === 0) {
+      throw new Error("No data found in image. It may not be a valid KeyLock file.");
+    }
+    
+    // Step 2: Decrypt the payload
+    const credentials = await decryptHybridPayload(cryptoPayload, privateKeyPem);
+    return credentials;
+
+  } catch (error) {
+    // Provide a more user-friendly error message for common failures
+    if (error.name === 'OperationError' || (error.message && error.message.toLowerCase().includes('decryption failed'))) {
+      throw new Error("Decryption failed. This usually means the private key is incorrect or the image data is corrupted.");
+    }
+    // Re-throw other errors
+    throw error;
+  }
+}