Как отобразить зашифрованную картинку через cryptoJS?

Question

[accountnujen]

Шифруется паролем 123456.


Когда пытаешься расшифровать и вывести через blob - ничего не выдаёт. ошибок тоже.

Comments

[Надим]

В смысле зашифрованную? Чем и как зашифрованную? Картинка в запороленном zip-архиве лежит что ли?

Больше деталей!

[accountnujen]

zkrvndm,

Чем и как зашифрованную?

разумеется шифрованную с помощью ЭЦП, полученной на Госуслугах,потом сжатой силой мысли, а расшифровать я пытаюсь именно zip, пароль от которого я, разумеется, не знаю. Что тут непонятного? Мне кажется комментарии излишни.

[Надим]

accountnujen, не излишни. Вот у меня есть на ноуте ЭЦП, но впервые слышу, что картинки можно им шифровать, я не говорю, что невозможно, просто впервые слышу. Как это сделать? Точнее как ты зашифровал картинку? Конвертировал изображение в base64 строку и уже его эту строку подписал? Или как-то по другому?

Вообще, где ты прочитал, что картинки можно шифровать при помощи ЭЦП? Дай ссылку на первоисточник, потому что ЭЦП обычно подписывают, а не шифруют, т. е. на выходе получаем контрольную сумму для проверки подлинности, но не более, восстановить файл из этой контрольной суммы нельзя.

[accountnujen]

zkrvndm, это ирония. Мне кажется, по коду достаточно ясно, что именно я преследую.

Есть картинка, я её шифрую с помощью AES, затем я пытаюсь её расшифровать её с помощью того же AES и отобразить. На моменте отображения всё херится.

[Надим]

accountnujen, пример шифроки в студию. Непонятно как вы там шифруйте, бинарные данные или base64 кодированную строку. Выложите пример JavaScript кода для шифрования с тестовой картинкой.

[accountnujen]

zkrvndm, а ссылка у нас не нажимается?

[Надим]

accountnujen, толку от твоего демо, если там нет:
1. Образца, тестовой картинки. Ну вот что я туда должен прикрепить? Чем я должен проверять твой пример?
2. Не показано, как именно получена тестовая картинка. Вдруг ты вообще криво шифруешь и картинка твоя вообще невалидная изначально?

Тебе же нужна помощь, не мне, значит это именно ты должен позаботится обо всех тестовых данных и демо примерах. С чего бы мне тратить время и пытаться воспроизвести твою проблему, когда даже не понятно, что именно ты там пытаешься расшифровать? Я же не экстрасенс.

[accountnujen]

zkrvndm, свою картинку возьми...

[Алан Гибизов]

Правильно публикуйте codepen.

[Надим]

accountnujen, у меня нет зашифрованного образца! Что я черт подери должен прикрепить в твое тестовое поле?!!!

[accountnujen]

zkrvndm, да посмотри ты на код!!! Ты берёшь картинку И ОНА ШИФРУЕТСЯ В ПРЯМОМ МАТЬ ЕГО ЭФИРЕ

[Надим]

accountnujen, хм, действительно. Из того, что я вижу:

1. Во первых, ты неправильно шифруешь, ты ожидаешь запихнуть в localstorage строку, но на самом деле пихаешь объект, а localstorage не умеет работать с объектами, он на входе может принимать только строку. Чтобы после шифровки получить строку надо использовать метод toString

2. Во вторых ты неправильно расшифровываешь, ты опять же сразу после расшифровки ожидает получить строку, но нет, чтобы получить строку надо примени к результату аналогично метод toString уже с указанием колбека для твой кодировки

2. В третьих, не понятно, почему ты пытаешься после расшифровки сформировать Blob. Так как ты шифруешь DataURL, то после расшифровки нет никакой необходимости с ним еще что-либо делать, просто прописываешь его сразу в img.src и все, картинка будет отображаться. Нет надо никаких блобов делать! Да и по правде говоря ты вообще не правильно блоб формируешь, а DataURL в Blob конвертируется соверешенно не так, но оно и тебе не надо, сразу пихай строку в картинку.

Вот пример правильного кода:

const imageInput = document.getElementById('imageInput');
    const encryptedTextDiv = document.getElementById('encryptedText');
    const decryptionKeyInput = document.getElementById('decryptionKey');
    const decryptButton = document.getElementById('decryptButton');
    const decryptedImageDiv = document.getElementById('decryptedImage');

    imageInput.addEventListener('change', (event) => {
      const selectedImage = event.target.files[0];
      const key = "123456";

      const reader = new FileReader();
      reader.onload = function(event) {
        const encryptedImage = CryptoJS.AES.encrypt(event.target.result, key).toString();
        localStorage.setItem('encryptedImage', encryptedImage);
      };
      reader.readAsDataURL(selectedImage);
    });

    decryptButton.addEventListener('click', () => {
      const decryptionKey = decryptionKeyInput.value;
      const encryptedImage = localStorage.getItem('encryptedImage');

      const dataURL = CryptoJS.AES.decrypt(encryptedImage, decryptionKey).toString(CryptoJS.enc.Utf8);
      const img = document.createElement('img');
      img.src = dataURL;

      decryptedImageDiv.innerHTML = '';
      decryptedImageDiv.appendChild(img);
    });

P. S. К ЭЦП это не имеет не малейшего отношения, CryptoJS самостоятельная библиотека не привязанная к работе с ЭЦП.

Answer 1

[Николай Шабалин]

UPD: https://codepen.io/expa/pen/yLQmwGX?editors=0010

Я поигрался с конвертацией Base64, что-то такое подобное делал в прошлой своей работе. В вашем решении вы использовали encryptedImage.toString() для преобразования объекта encryptedImage в строку. Однако это не преобразует его в Base64.

Дальше я декодировал Base64 с помощью decryptedBytes.toString(CryptoJS.enc.Utf8)

Также нашёл в интернетах функцию dataURLtoBlob, которая конвертирует строковых данных в формате Data URL в объект Blob.

Код получился неказистый, но уже что-то дальше с ним можно делать