Файлы как они есть. Работа с типизированными массивами

Всем привет! Меня зовут Егор, я фронтенд-разработчик в Райффайзенбанке. В этой статье я хочу показать, как благодаря типизированным массивам мы можем взаимодействовать с бинарными данными в браузере. В качестве примера мы напишем приложение для шифрования текста внутрь изображения и посмотрим, как работают типизированные массивы.

Введение

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

При обработке графических данных компьютеру тоже поступают сигналы, где последовательность из трех байт (или четырех, при наличии альфа-канала) является значением цвета RGB (RGBA). При разработке приложения мы будем взаимодействовать с BMP-форматом, но аналогичное возможно и с любым другим форматом файлов.

Для начала определим, что должно уметь наше приложение:

• Кодировать текстовое сообщение в файл. При этом вес, структура и визуальное отображение файла не должны измениться.

• Расшифровывать текстовое сообщение.

Демонстрация работы приложения

Работа с изображением

Для реализации приложения нам понадобится описание BMP-формата, которое достаточно подробно описано в «Википедии».

Описание заголовка BITMAPCOREHEADER

Что мы узнаем из описания этого формата?

По соображениям совместимости большинство приложений используют старые заголовки DIB для сохранения файлов. Поскольку OS / 2 больше не поддерживается после Windows 2000, на данный момент распространенным форматом Windows является заголовок BITMAPINFOHEADER

Поэтому во внимание берем только заголовок BITMAPINFOHEADER и сигнатуру BM.

Описание заголовка BITMAPINFOHEADER

Для начала создаем класс, отвечающий за работу с ArrayBuffer, полученным из изображения. После этого проверяем соответствие BMP-формату:

class BmpParser {   #BMP_HEADER_FIELD = 'BM'   #view   #decoder    constructor(buffer) {     this.#view = new DataView(buffer)     this.#decoder = new TextDecoder()     this.#checkHeaderField()   }       #checkHeaderField() {     if (this.#decoder.decode(new Uint8Array(this.#view.buffer, 0, 2)) !== this.#BMP_HEADER_FIELD) {               throw new Error('Ожидается .bmp файл!')     }   }  }

Теперь нам необходимо узнать смещение, где может быть найден массив пикселей (bitmap data). В таблице указан размер в 4 байта, поэтому мы используем маску Uint32Array, так как 1 байт равен 8 бит:

class BmpParser {   // ...   get offsetBits() {       return this.#view.getUint32(10, true)    } // ... }

Чтобы проверить, что текстовое сообщение не превышает размер пиксельных данных, мы будем использовать размер bitmap data. Его можно получить из заголовка BITMAPINFOHEADER:

class BmpParser {   // ...   get bitmapDataSize() {     return this.#view.getUint32(34, true)   }   // ... }

Это все данные, которые необходимо получить из изображения. 

Шифрование

Алгоритм для шифрования сообщения:

1. Конверуем текстовое сообщение в бинарный код. Возможные значения: «1», «0», «,».

2. Поочередно рассматриваем каждый символ:

   1. Если этот символ имеет значение 0 или 1, оставляем без изменений.

   2. Если этот символ имеет значение «,» — устанавливаем ему значение 2. Это будет свидетельствовать, что предыдущую последовательность нулей и единиц можно собрать в символ из зашифрованного сообщения.

   3. Записать полученное число в bitmap data.

3. Добавить точку выхода, в нашем случае — значение «3».

Приступим к реализации.

Создаем класс, отвечающий за шифрование текстового сообщения внутрь изображения, добавив метод конвертации текста в бинарный код:

class Encryptor {   // Текущее смещение битов в ArrayBuffer   #offset = 0   #view   #encryptionText   #bmpParser    constructor(buffer, encryptionText) {     this.#view = new DataView(buffer)     this.#encryptionText = encryptionText     this.#bmpParser = new BmpParser(buffer)   }    // Конвертирует текст в бинарный код   // Тест => ["10000100010", "10000110101", "10001000001", "10001000010"]   encode(value) {     return value.split('').map(char => char.charCodeAt(0).toString(2))   } }

Добавим проверку, что длина сообщения не превышает размер изображения в байтах:

class Encryptor {   // ...   #checkPhraseLength(binaryLength) {     if (binaryLength >= this.#bmpParser.bitmapDataSize) {       throw new Error('Фраза слишком велика для данного файла!')     }   } // ... }

Конфигурируем константы, которые потребуются для расшифровки:

export const MAX_HEXADECIMAL_VALUE = 0xFF  export const POSSIBLE_DIFFERENCE = {   EXIT_POINT: 3,   SEPARATOR: 2,   BINARY_ONE: 1,   BINARY_ZERO: 0, }

Реализуем сам механизм шифрования. При обходе bitmap data мы будем использовать маску Uint8Array, так как каждый символ здесь равен одному байту:

class Encryptor {   // ...   #updateUint8(char) {     // Текущий элемент bitmap data     const currentValue = +this.#view.getUint8(this.#offset)     // Установка значения в зависимости от символа const binaryChar = char === ',' ? POSSIBLE_DIFFERENCE.SEPARATOR : +char      // Проверка на возможность добавления     // Если текущее значение bitmap data после увеличения на 3      // больше верхней границы (255) - выполняем вычитание     if (currentValue >= MAX_HEXADECIMAL_VALUE - POSSIBLE_DIFFERENCE.EXIT_POINT) {       return currentValue - binaryChar     }  return currentValue + binaryChar   }    encrypt() {     // Получение начального положения bitmap data     this.#offset = this.#bmpParser.offsetBits // Конвертация текстового сообщения в бинарный код  // и приведение полученного результата к виду ['1', '0', '1', '0', ',', ...] const binaryChars = this.encode(this.#encryptionText).join().split('')      // Проверка длины сообщения this.#checkPhraseLength(binaryChars.length)      binaryChars.forEach(char => {       this.#view.setUint8(this.#offset, this.#updateUint8(char))       this.#offset++     })      // Добавляем точку выхода     this.#view.setUint8(this.#offset, this.#updateUint8(POSSIBLE_DIFFERENCE.EXIT_POINT))      return this.#view    }   // ... }

Зашифрованное изображение получится визуально неотличимо от оригинала. Это произойдет из-за того, что изменение значений в bitmap data происходит максимум на 3 пункта, а вес и структура файла при этом остаются неизменными.

Расшифровка

Для расшифровки потребуется оригинальное изображение — оно будет являться ключом, а также изображение с закодированным сообщением.

Алгоритм для расшифровки сообщения:

Нам потребуются две переменные для хранения бинарной последовательности символов и результата.

Запускаем цикл и, начиная с первого байта bitmap data, находим разность по модулю между значением ключа и закодированного изображения

1. Если разность равна 0 или 1 — добавляем значение в строку с бинарной последовательность.

2. Если разность равна 2 — очищаем строку с бинарной последовательностью, а ее значение конвертируем в текст и добавляем в результирующую строку.

3. Если разность равна 3 — выполняем действия из п. 2 и останавливаем цикл.

Рассмотрим алгоритм на примере следующей разности: [1, 0, 1, 2, 1, 0, 1, 0, 3]

Приступим к реализации:

export class Decipher {   #offset = 0   #encryptedView   #viewKey   #bmpParserEncrypted   #bmpParserKey    constructor(encryptedBuffer, bufferKey) {     this.#encryptedView = new DataView(encryptedBuffer)     this.#viewKey = new DataView(bufferKey)     this.#bmpParserEncrypted = new BmpParser(encryptedBuffer)     this.#bmpParserKey = new BmpParser(bufferKey)   }    // Конвертация бинарного кода в текст   decode(value) {     return String.fromCharCode(parseInt(value, 2))   }    decrypt() {     this.#offset = this.#bmpParserKey.offsetBits      let binaryChar = ''     let string = ''      while (true) {       // Получение разности       const encryptedByte = Math.abs(this.#encryptedView.getUint8(this.#offset) - this.#viewKey.getUint8(this.#offset))               switch (encryptedByte) {         case POSSIBLE_DIFFERENCE.EXIT_POINT:           string += this.decode(binaryChar)           return string         case POSSIBLE_DIFFERENCE.SEPARATOR:           string += this.decode(binaryChar)           binaryChar = ''           break         case POSSIBLE_DIFFERENCE.BINARY_ONE:         case POSSIBLE_DIFFERENCE.BINARY_ZERO:           binaryChar += encryptedByte           break         default:           throw new Error('Недопустимое значение!')       }        this.#offset++     }   } }

Код приложения на GitHub

Заключение

Это небольшое приложение позволяет показать, как работать с бинарными данными. При этом возможностей у типизированных массивов при работе с файлами куда больше: можно добавить водяной знак в изображение или видео, рассчитать размер изображения перед выводом на экран или прочитать файлы из zip-архива.