davay42 / steganography-js

Online steganographic tool written in Javascript, using Least Significant Bit (LSB) substitution.

Steganography.js

Introduction

The goal of this project was to create an online steganographic tool with Javascript without using existing solutions and frameworks.

I started the project in late 2017 after being inspired by Computerphile's video about steganography:

• Secrets Hidden in Images (Steganography) - Computerphile

Development

This is a fairly standard project built with create-react-app. No custom scripts, just refer to the ˙package.json` file.

Internationalization is done with i18next. A custom script was written to build the required JSON translation file(s), which you can customize based on your backend/translation service.

To enable web workers through Webpack, I used the worker-loader package (imports prefixed by !worker-loader).

Implementation details

The project currently uses a custom implementation of LSB steganography.

TODO: further implementation info & links

TODOs / idea list

• refactor React components, update dependencies
• internationalization with i18next
• use Sass
• refactor worker files - in progress
  • extact logic from workers with importScripts ?
    • https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts
• migrate to Typescript
  • find a way to compline workers without 'ejecting' the project
    • independent tsc workflow for the workers folder?
• new formats
  • research audio steganography
• separate Electron/Webview app ?

Further reading - links & notes

About steganography:

• Least Significant Bit algorithm for image steganography - International Journal of Advanced Computer Technology (IJACT)

Regarding the development setup:

• React
• Create-react-app
• React router
• Worker loader - Webpack

Using Web Workers:

• Worker - MDN
• Worker.postMessage() - MDN
• Transferable - MDN
• ArrayBuffer - MDN

Utilizing the HTML5 Canvas API:

• ImageData - MDN
  • Structure of and imgdata (ImageData) object:
    • variable -> type
    • newImageData -> ImageData
    • newImageData.data -> Uint8ClampedArray (TypedArray)
    • nemImageData.data.buffer -> ArrayBuffer (Transferable type!)
• Uint8ClampedArray - MDN
• CanvasRenderingContext2D.drawImage() - MDN

Other:

• FileSaver.js - eligrey
• image-diff-view - -a-x