Стеганография: прячем послания в картинках

0
147
views
javascript logo

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

×

Перевод статьи Feel like a secret agent: Hidden messages in images with steganography от Pascal Thormeier.

Джеймс Бонд, Итан Хант, Наполеон Соло – секретные агенты, работающие под прикрытием и отсылающие тайные сообщения своему боссу и другим агентам. Давайте честно: они крутые. В фильмах и книгах, по крайней мере. У них есть классные приборы, они ловят злодеев, ходят в модные клубы в шикарной одежде. Ну и в конце концов, они спасают мир. Когда я был ребёнком, мечтал о том, чтобы стать секретным агентом.

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

Но сперва: что же такое стеганография?

Стеганография могла бы быть изобретением инженера Q из Ми-6 в фильмах о Джеймсе Бонде, но на самом деле она гораздо старше. Люди ещё в древности умели прятать изображения хитрыми способами.

Согласно Википедии, в 440 г. до н.э. древнегреческий писатель Геродот однажды сбрил волосы на голове одного из своих самых верных слуг, чтобы написать на его голове послание, а когда волосы снова выросли, отправил слугу к адресату.

Но брить мы сегодня никого не будем. Вместо этого мы спрячем одну картинку в другой.

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

Чего-чего? Значимыми и незначимыми?

Чтобы понять это, нам нужно знать, как устроены цвета, например, в формате PNG. Веб-разработчики, скорее всего, знакомы с шестнадцатеричным представлением цветов, например: #f60053 или #16ee8a. Цвет в таком виде состоит из 4 отдельных частей:

  • # — префикс
  • две 16-ричных цифры отвечают за красный цвет
  • две — за зелёный
  • еще две — за синий.

Так как значения для каждого цвета могут варьироваться в диапазоне от 00 до FF, в десятичной системе счисления диапазон будет от 0 до 255, в двоичной – от 00000000 до 11111111.

В двоичных числах, как и в десятичных, чем левее цифра, тем больше её значение. Следовательно, чем левее цифра, тем больше «значимость» бита.

Например, 11111111 – это почти в два раза больше, чем 01111111. С другой стороны, 11111110 чуть-чуть меньше 11111111. Человеческий глаз, скорее всего, не заметит разницу между #FFFFFF и #FEFEFE, а вот между #FFFFFF и #7F7F7F заметит.

Прячем изображение на JavaScript

Спрячем вот такую стоковую картинку:

В этом изображении кота:

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

  • путь к основному изображению
  • путь к секретному изображению
  • путь к результату

Сперва напишем вот такой код:

const args = process.argv.slice(2)

const mainImagePath = args[0]
const hiddenImagePath = args[1]
const targetImagePath = args[2]

// Использование:
// node hide-image.js ./cat.png ./hidden.png ./target.png

Отлично. Теперь установим image-size , чтобы узнать размер основного изображения и canvas для node, чтобы работать с изображениями и генерировать новое.

Сперва найдём размерность главного изображения и секретного, и создадим для каждого свой холст (canvas). Также я создам холст для изображения с результатом:

const imageSize = require('image-size')
const { createCanvas, loadImage } = require('canvas')

const args = process.argv.slice(2)

const mainImagePath = args[0]
const hiddenImagePath = args[1]
const targetImagePath = args[2]

const sizeMain = imageSize(mainImagePath)
const sizeHidden = imageSize(hiddenImagePath)

const canvasMain = createCanvas(sizeMain.width, sizeMain.height)
const canvasHidden = createCanvas(sizeHidden.width, sizeHidden.height)
const canvasTarget = createCanvas(sizeMain.width, sizeMain.height)

const contextMain = canvasMain.getContext('2d')
const contextHidden = canvasHidden.getContext('2d')
const contextTarget = canvasTarget.getContext('2d')

Затем мне потребуется загрузить оба изображения в соответствующие холсты. Так как эти методы возвращают промисы, я помещу остаток кода в функцию, вызываемую асинхронно, которая допускает использование async/await:

;(async () => {
  const mainImage = await loadImage(mainImagePath)
  contextMain.drawImage(mainImage, 0, 0, sizeMain.width, sizeMain.height)

  const hiddenImage = await loadImage(hiddenImagePath)
  contextHidden.drawImage(hiddenImage, 0, 0, sizeHidden.width, sizeHidden.height)
})()

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

  for (let x = 0; x < sizeHidden.width; x++) {
    for (let y = 0; y < sizeHidden.height; y++) {
      const colorMain = Array.from(contextMain.getImageData(x, y, 1, 1).data)
      const colorHidden = Array.from(contextHidden.getImageData(x, y, 1, 1).data)
    }
  }

С этими значениями я теперь смогу посчитать «смешанный цвет» каждого пикселя в результирующем изображении.

Вычисление нового цвета

Прежде я уже говорил о значимых битах. Чтобы на самом деле рассчитать цвет, проиллюстрирую это немного подробнее.

Скажем, мне нужно объединить красные составляющие цветов A и B. Вот так выглядят их биты (в 8-битном представлении):

A7 A6 A5 A4 A3 A2 A1 A0 (color A)
B7 B6 B5 B4 B3 B2 B1 B0 (color B)

Чтобы спрятать цвет B в цвете A, я заменю первые (справа) 3 бита А последними (слева) битами B. Результирующая последовательность битов выглядит так:

A7 A6 A5 A4 A3 B7 B6 B5

Это значит, что я потеряю какую-то часть информации от обоих цветов, но их объединение не будет сильно отличаться от исходного цвета B.

Наш код будет выглядеть следующим образом:

const combineColors = (a, b) => {
  const aBinary = a.toString(2).padStart(8, '0')
  const bBinary = b.toString(2).padStart(8, '0')

  return parseInt('' +
    aBinary[0] +
    aBinary[1] +
    aBinary[2] +
    aBinary[3] +
    aBinary[4] +
    bBinary[0] +
    bBinary[1] +
    bBinary[2], 
  2)
}

Теперь я могу использовать эту функцию в цикле по пикселям:

const colorMain = Array.from(contextMain.getImageData(x, y, 1, 1).data)
const colorHidden = Array.from(contextHidden.getImageData(x, y, 1, 1).data)

const combinedColor = [
  combineColors(colorMain[0], colorHidden[0]),
  combineColors(colorMain[1], colorHidden[1]),
  combineColors(colorMain[2], colorHidden[2]),
]

contextTarget.fillStyle = `rgb(${combinedColor[0]}, ${combinedColor[1]}, ${combinedColor[2]})`
contextTarget.fillRect(x, y, 1, 1)

Почти готово, теперь остаётся лишь сохранить изображение-результат:

const buffer = canvasTarget.toBuffer('image/png')
fs.writeFileSync(targetImagePath, buffer)

Вот и оно:

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

Но как восстановить спрятанное изображение?

Чтобы извлечь скрытую картинку, всё, что вам нужно – это прочитать последние три бита каждого пикселя и снова сделать их наиболее значимыми:

const extractColor = c => {
  const cBinary = c.toString(2).padStart(8, '0')

  return parseInt('' +
    cBinary[5] + 
    cBinary[6] + 
    cBinary[7] + 
    '00000',
  2)
}

Если применить это к каждому пикселю, мы вновь получим оригинальное фото (с небольшими артефактами):

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

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here