Что такое стеганография? Представьте, что вы хотите отправить секретное сообщение другу, но канал, который вы хотите использовать, взломан и контролируется. Вы могли бы использовать какое-нибудь шифрование, но это вызовет подозрения у людей, отслеживающих ваши разговоры, поэтому вам придется использовать что-то другое. В настоящее время стеганография — это метод сокрытия секретных сообщений в другом, несекретном файле (например, изображении кошки), чтобы, если вы отправите этот файл, он не был бы обнаружен. Стеганография не ограничивается сокрытием текста в изображениях и обычно означает «сокрытие секретной информации в другом несекретном сообщении или физическом объекте»: вы можете скрыть некоторые сообщения в аудио, видео или других текстах, используя, например, столбчатое транспонирование. Стеганография также может быть чрезвычайно полезна во многих других случаях, например, она может стать хорошей альтернативой водяным знакам в конфиденциальных документах для защиты их от утечки. Существует множество способов скрыть информацию на изображениях: от простого добавления текста в конец файла до его сокрытия в метаданных. В этой статье я хочу осветить более продвинутый метод стеганографии, спускающийся на двоичный уровень и скрывающий сообщения внутри границ самого изображения. Создание стеганографического движка Пользовательский интерфейс Для моего примера стеганографии я решил использовать JavaScript, поскольку это мощный язык программирования, который можно выполнять в браузере. Я придумал простой интерфейс, который позволяет пользователям загружать изображение, чтобы прочитать скрытое в нем сообщение или самостоятельно закодировать сообщение в изображении. <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Steganography</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } textarea { width: 300px; height: 100px; } button { margin: 10px; } #outputImage { margin-top: 20px; max-width: 100%; } </style> </head> <body> <h1>Steganography Example</h1> <input type="file" id="upload" accept="image/*"><br> <canvas id="canvas" style="display:none;"></canvas><br> <textarea id="text" placeholder="Enter text to encode"></textarea><br> <button id="encode">Encode Text</button> <button id="decode">Decode Text</button> <p id="decodedText"></p> <img id="outputImage" alt="Output Image"> <script src="./script.js"></script> </body> </html> Чтобы использовать его, пользователи могут просто выбрать изображение, которым они хотят манипулировать, и либо попытаться декодировать из него некоторый текст, либо закодировать его и загрузить изображение позже. Обработка изображений Для работы с изображениями в JavaScript мы можем использовать . Он предоставляет множество различных функций для управления и рисования изображений, анимации или даже игровой графики и видео. Canvas API Canvas API в основном используется для 2D-графики. Если вы хотите работать с 3D-графикой с аппаратным ускорением, вы можете использовать (который, кстати, также использует элемент <canvas>). API WebGL const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const image = new Image(); Чтобы прочитать файл изображения из файловой системы и добавить его в контекст холста, мы можем использовать . Это позволяет нам легко читать содержимое любого файла, хранящегося на компьютере пользователя, без необходимости использования специальной библиотеки. FileReader API function handleFileUpload(event) { const reader = new FileReader(); reader.onload = function (e) { image.src = e.target.result; image.onload = function () { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); }; }; reader.readAsDataURL(event.target.files[0]); } Он считывает файл и рисует изображение из этого файла в нашем ранее определенном контексте 2D-холста, после чего мы можем либо закодировать некоторый текст в это изображение, либо попытаться прочитать текст из изображения. Скрытие текста в изображениях Изображения состоят из пикселей, и каждый пиксель содержит информацию о своих цветах. Например, если изображение закодировано с использованием модели RGBA, каждый пиксель будет содержать 4 байта информации о том, сколько красного, зеленого, синего и альфа (непрозрачности) он представляет. Чтобы закодировать некоторый текст в изображении, мы могли бы использовать один из этих каналов (например, альфа-канал). Поскольку эта информация представлена в двоичной системе (например, 01001100), мы можем переключить последний бит на то, что нам нужно. Он называется наименее значащим битом (LSB), и его изменение приводит к минимальным изменениям в самом изображении, что делает его неотличимым от человеческого. Теперь представьте, что у нас есть текст типа «Привет», и мы хотим закодировать его в изображение. Алгоритм для этого будет Преобразуйте текст «Привет» в двоичный. Переберите байты данных изображения и замените младший бит этих байтов битом двоичного текста (каждый пиксель содержит 4 байта данных для каждого цвета, в моем примере я хочу изменить канал непрозрачности изображения). , поэтому я бы повторял каждый 4-й байт). Добавьте в конце сообщения, чтобы при декодировании мы знали, когда остановиться. нулевой байт Примените измененные байты изображения к самому изображению. Во-первых, нам нужно взять у пользователя текст, который мы хотим закодировать, и выполнить с ним некоторые базовые проверки. const text = document.getElementById("text").value; if (!text) { alert("Please enter some text to encode."); return; } Затем нам нужно преобразовать текст в двоичный формат и создать холст изображения, в которое мы собираемся закодировать этот текст. const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imgData.data; let binaryText = ""; for (let i = 0; i < text.length; i++) { let binaryChar = text.charCodeAt(i).toString(2).padStart(8, "0"); binaryText += binaryChar; } Для этого мы можем просто перебрать каждый из символов и получить индекс Unicode, используя функцию . Затем этот Юникод преобразуется в двоичный и дополняется так, чтобы его длина была такой же, как у любого другого символа. charCodeAt Например, буква «H» представлена в Юникоде как 72; затем мы преобразуем это число в двоичный формат (1001000) и добавляем 0 в начале (01001000), чтобы убедиться, что все буквы будут одинаковой длины (8 бит). Затем нам нужно добавить нулевой байт в конце сообщения, чтобы быть уверенными, что при его расшифровке мы сможем отличить реальный текст от случайных пиксельных данных изображения. binaryText += "00000000"; Затем нам нужно выполнить базовую проверку, чтобы убедиться, что изображение имеет достаточно пикселей для кодирования нашего сообщения и не допускает его переполнения. if (binaryText.length > data.length / 4) { alert("Text is too long to encode in this image."); return; } А затем наступает самое интересное — кодирование сообщения. Массив данных, который мы определили ранее, содержит информацию о пикселях в виде значений RGBA для каждого пикселя изображения. Итак, если изображение закодировано RGBA, каждый пиксель в нем будет представлен четырьмя значениями массива данных; каждое значение показывает, сколько красного, зеленого и синего имеет этот пиксель. for (let i = 0; i < binaryText.length; i++) { data[i * 4] = (data[i * 4] & 0b11111110) | parseInt(binaryText[i]); } ctx.putImageData(imgData, 0, 0); const outputImage = document.getElementById("outputImage"); outputImage.src = canvas.toDataURL(); В приведенном выше коде мы перебираем текст в двоичном коде. находит байт, который нам нужно изменить, и поскольку мы хотим изменить только байты определенного канала, мы умножаем переменную на чтобы получить к ней доступ. data[i * 4] i 4 Операция устанавливает младший бит в . Например, если равно в двоичном формате, то результатом операции будет . Это гарантирует, что младший бит будет установлен в , прежде чем мы приступим к дальнейшим манипуляциям с ним. data[i * 4] & 0b11111110 0 data[i * 4] 10101101 10101101 & 11111110 10101100 0 — это текущий бит двоичной строки; это либо , либо . Затем мы можем установить этот бит в младший разряд, используя побитовую операцию ИЛИ ( ). Например, если левая часть побитового ИЛИ равна , а равен , то приведет к . Если бы текущий бит был равен , результатом OR было бы . Вот почему нам пришлось в первую очередь удалить LSB. parseInt(binaryText[i]) 1 0 | 10101100 binaryText[i] 1 10101100 | 00000001 10101101 0 10101100 Как только сообщение закодировано, мы можем поместить его на текущий холст и отобразить в HTML с помощью метода . canvas.toDataURL Расшифровка скрытых сообщений из изображений Процесс декодирования изображения на самом деле намного проще, чем кодирование. Поскольку мы уже знаем, что закодировали только альфа-канал, мы можем просто перебрать каждый 4-й байт, прочитать последний бит, объединить его в окончательную строку и преобразовать эти данные из двоичного кода в строку Unicode. Сначала нам нужно инициализировать переменные. Поскольку уже заполнена информацией об изображении (мы вызываем каждый раз, когда читаем файл из файловой системы), мы можем просто извлечь ее в переменную данных. imgData ctx.drawImage const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imgData.data; let binaryText = ""; let decodedText = ""; Затем нам нужно перебрать каждый 4-й байт изображения, прочитать последний бит и объединить его с переменной . binaryText for (let i = 0; i < data.length; i += 4) { binaryText += (data[i] & 1).toString(); } — это закодированный байт, и для извлечения младшего разряда мы можем использовать побитовый оператор AND ( ). Он принимает два значения и выполняет операцию И над каждой парой соответствующих битов. Сравнивая с , мы по сути изолируем младший бит из информации о пикселе, и если младший бит равен , то результатом такой операции будет . Если младший бит равен , результат также будет . data[i] & data[i] 1 1 1 0 0 После того, как мы прочитали все младшие разряды и сохранили их в , нам нужно преобразовать их из двоичного формата в обычный текст. Поскольку мы знаем, что каждый символ состоит из 8 бит (помните, как мы использовали чтобы сделать каждый символ одинаковой длины?), мы можем выполнять итерацию для каждого 8-го символа . binaryText padStart(8, "0") binaryText Затем мы можем использовать операцию для извлечения текущего байта из на основе нашей итерации. Двоичную строку можно преобразовать в число с помощью функции . Затем мы можем проверить, равен ли результат (нулевой байт) — мы останавливаем преобразование и запрашиваем результат. В противном случае мы можем найти, какой символ соответствует номеру Юникода, и добавить его в нашу строку результата. .slice() binaryText parseInt(byte, 2) 0 for (let i = 0; i < binaryText.length; i += 8) { let byte = binaryText.slice(i, i + 8); if (byte.length < 8) break; // Stop if the byte is incomplete let charCode = parseInt(byte, 2); if (charCode === 0) break; // Stop if we hit a null character decodedText += String.fromCharCode(charCode); } Декодированный текст затем можно безопасно отобразить пользователю: document.getElementById("decodedText").textContent = decodedText; Я оставил полный код, используемый в этой статье, в своем ; не стесняйтесь играть с этим. Есть много вещей, которые можно улучшить :) репозитории GitHub Последние мысли Стеганография — очень мощный метод, и ее можно применять во множестве различных случаев использования, начиная от проверки документов, предотвращения утечек, проверки изображений AI, управления DRM музыкальных файлов и многих других. Эту технику можно применять даже к видео, играм и даже необработанному тексту, поэтому я думаю, что у нее огромный потенциал. В эпоху NFT и блокчейнов еще интереснее посмотреть, как они найдут свои варианты использования и как будет развиваться эта технология.
