Build simple Steganography machine

ariestiyansyah

2013-10-02

Code › News

Last time i was published my first post about Hello Openshift, and this is my second post. I will try to build a steganography machine using the javascript library named steganography.js.

What is steganography ?

Steganography is the art and science of hiding messages or other secret information in a bunch of carrier information.

Lets BUILD

First you need to download the steganography.js here , once you download the file you can exract the file wherever you need and you will see tree directory like this

src
— steganography.js
— README.md

and the directory we will create is like this

index.html
– src/
—— steganography.js
—— style.css
– image/
—— secret.jpg

next is to create the HTML index for the machine, here is the code :

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <link href="src/style.css" rel="stylesheet" type="text/css" />
    <title>Steganography Machine</title>
  </head>
  <body>
    <div id="wrapper">
      <div id="tabContainer">
        <div id="tabs">
          <ul>
            <li id="tabHeader_1">~ Steganography Machine ~
            </li>
          </ul>
        </div>
        <div id="tabscontent">
          <div id="tabpage_1">
            <input id="file" type="file" /><br />
            <textarea id="text">
Input your text here...
</textarea>
            <div>
              <span id="hide">Hide</span> <span id=
              "read">Read</span>
            </div>
          </div>
          <div id="result">
            <div id="original">
              <h2>
                Target Image:
              </h2><img id="img" src="image/secret.jpg" />
            </div>
            <div id="stego">
              <h2>
                Encoded Image:
              </h2><img id="cover" src="" />
              <div>Right-click to download</div>
            </div>
            <div id="messageArea">
              <h2></br>
                Code:
              </h2>
              <div id="message"></div>
            </div>
          </div>
          <div></div>
        </div>
      </div>
    <center>
      Demo Only
    </center>
  </body>
</html>

next create the cascading style sheet for the machine, i am using CSS prefixer to fix my CSS code cause i think there are some error in my CSS .

* {
    margin: 0;
    padding: 0
    }

body, html {
    margin: 0;
    padding: 0;
    font-family: Cursive;
    color: #717171
    }

h1 {
    color: black;
    margin-bottom: 10px
    }

#main {
    position: relative;
    width: 940px;
    padding: 20px;
    margin: auto
    }

#result {
    position: relative;
    float: left;
    margin: 32px;
    width: 650px;
    vertical-align: top
    }

.half {
    position: relative;
    display: inline-block;
    width: 49%
    }

#original {
    vertical-align: top
    }

#messageArea {
    width: 100%
    }

#img {
    width: 290px
    }

.btns {
    margin-top: 1px;
    margin-bottom: 10px;
    padding: 0 4px
    }

.btn {
    -moz-box-shadow: inset 0 1px 0 0 #0c92ec;
    -webkit-box-shadow: inset 0 1px 0 0 #0c92ec;
    box-shadow: inset 0 1px 0 0 #0c92ec;
    background: -moz-linear-gradient(#0c92ec, #0c92ec);
    background: -o-linear-gradient(#0c92ec, #0c92ec);
    background: -webkit-linear-gradient(#0c92ec, #0c92ec);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c92ec), color-stop(1, #0c92ec));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#0c92ec, EndColorStr=#0c92ec)";
    background: linear-gradient(#0c92ec, #0c92ec);
    background: -moz-linear-gradient(center top, #0c92ec 5%, #0c92ec 100%);
    background: -o-linear-gradient(center top, #0c92ec 5%, #0c92ec 100%);
    background: -webkit-linear-gradient(center top, #0c92ec 5%, #0c92ec 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c92ec 5%), color-stop(1, #0c92ec 100%));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#0c92ec 5%, EndColorStr=#0c92ec 100%)";
    background: linear-gradient(center top, #0c92ec 5%, #0c92ec 100%);
    background-color: #0c92ec;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    text-indent: 0;
    border: 1px solid #747678;
    display: inline-block;
    color: #f3f3f3;
    font-family: Impact;
    font-size: 19px;
    font-weight: normal;
    font-style: normal;
    height: 31px;
    line-height: 31px;
    width: 88px;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 0 #0c92ec
    }

.btn:hover {
    background: -moz-linear-gradient(#0c92ec, #0c92ec);
    background: -o-linear-gradient(#0c92ec, #0c92ec);
    background: -webkit-linear-gradient(#0c92ec, #0c92ec);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c92ec), color-stop(1, #0c92ec));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#0c92ec, EndColorStr=#0c92ec)";
    background: linear-gradient(#0c92ec, #0c92ec);
    background: -moz-linear-gradient(center top, #0c92ec 5%, #0c92ec 100%);
    background: -o-linear-gradient(center top, #0c92ec 5%, #0c92ec 100%);
    background: -webkit-linear-gradient(center top, #0c92ec 5%, #0c92ec 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c92ec 5%), color-stop(1, #0c92ec 100%));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#0c92ec 5%, EndColorStr=#0c92ec 100%)";
    background: linear-gradient(center top, #0c92ec 5%, #0c92ec 100%);
    background-color: #0c92ec
    }

.btn:active {
    position: relative;
    top: 1px
    }

#download {
    position: absolute;
    top: 47px;
    left: 4px;
    padding: 10px 5px 5px 3px;
    width: 10px;
    border-top: 1px solid black;
    -moz-border-radius: 0 0 15px 15px;
    -webkit-border-radius: 0 0 15px 15px;
    border-radius: 0 0 15px 15px;
    text-decoration: none
    }

#download:hover {
    width: 70px
    }

#download:hover:after {
    content: "ownload"
    }

.note {
    font-size: 9px;
    text-align: center;
    color: black;
    font-family: Cursive;
    }

.invisible {
    visibility: hidden
    }

.clear {
    clear: both
    }

textarea {
    width: 650px;
    padding: 10px;
    height: 40px;
    resize: none
    }

h2 {
    margin-top: 0
    }

#wrapper {
    width: 720px;
    margin: 40px auto 0
    }

#wrapper h1 {
    color: #FFF;
    text-align: center;
    margin-bottom: 1px
    }

#wrapper a {
    display: block;
    font-size: 1.2em;
    padding-top: 20px;
    color: #FFF;
    text-decoration: none;
    text-align: center
    }

#tabContainer {
    width: 700px;
    padding: 15px;
    background-color: #2e2e2e;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px
    }

#tabs {
    height: 30px;
    overflow: hidden
    }

#tabs > ul {
    font: 1em;
    list-style: none
    }

#tabs > ul > li {
    margin: 0 0 0 0;
    padding: 5px 240px;
    float: center;
    color: #FFF;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    background: #C9C9C9;
    /* old browsers */
    background: -moz-linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -o-linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -webkit-linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f24537 0%), color-stop(1, #f24537 100%));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f24537 0%, EndColorStr=#f24537 100%)";
    background: linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -moz-linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -o-linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -webkit-linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f24537 0%), color-stop(1, #f24537 100%));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f24537 0%, EndColorStr=#f24537 100%)";
    background: linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -moz-linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -o-linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -webkit-linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f24537 0%), color-stop(1, #f24537 100%));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f24537 0%, EndColorStr=#f24537 100%)";
    background: linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -moz-linear-gradient(#f24537 0%, #f24537 100%);
    background: -o-linear-gradient(#f24537 0%, #f24537 100%);
    background: -webkit-linear-gradient(#f24537 0%, #f24537 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f24537 0%), color-stop(1, #f24537 100%));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f24537 0%, EndColorStr=#f24537 100%)";
    background: linear-gradient(#f24537 0%, #f24537 100%);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f24537 0%, EndColorStr=#f24537 100%)";
    background: -moz-linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -o-linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -webkit-linear-gradient(top, #f24537 0%, #f24537 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f24537 0%), color-stop(1, #f24537 100%));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f24537 0%, EndColorStr=#f24537 100%)";
    background: linear-gradient(top, #f24537 0%, #f24537 100%);
    /* firefox */
    background: -moz-linear-gradient(#0C91EC, #257AB6);
    background: -o-linear-gradient(#0C91EC, #257AB6);
    background: -webkit-linear-gradient(#0C91EC, #257AB6);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C91EC), color-stop(1, #257AB6));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#0C91EC, EndColorStr=#257AB6)";
    background: linear-gradient(#0C91EC, #257AB6);
    background: -moz-linear-gradient(#0C91EC, #257AB6);
    background: -o-linear-gradient(#0C91EC, #257AB6);
    background: -webkit-linear-gradient(#0C91EC, #257AB6);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C91EC), color-stop(1, #257AB6));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#0C91EC, EndColorStr=#257AB6)";
    background: linear-gradient(#0C91EC, #257AB6);
    background: -moz-linear-gradient(#0C91EC, #257AB6);
    background: -o-linear-gradient(#0C91EC, #257AB6);
    background: -webkit-linear-gradient(#0C91EC, #257AB6);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C91EC), color-stop(1, #257AB6));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#0C91EC, EndColorStr=#257AB6)";
    background: linear-gradient(#0C91EC, #257AB6);
    background: -moz-linear-gradient(#0C91EC, #257AB6);
    background: -o-linear-gradient(#0C91EC, #257AB6);
    background: -webkit-linear-gradient(#0C91EC, #257AB6);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C91EC), color-stop(1, #257AB6));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#0C91EC, EndColorStr=#257AB6)";
    background: linear-gradient(#0C91EC, #257AB6);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#0C91EC, EndColorStr=#257AB6)";
    background: -moz-linear-gradient(#0C91EC, #257AB6);
    background: -o-linear-gradient(#0C91EC, #257AB6);
    background: -webkit-linear-gradient(#0C91EC, #257AB6);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C91EC), color-stop(1, #257AB6));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#0C91EC, EndColorStr=#257AB6)";
    background: linear-gradient(#0C91EC, #257AB6);
    /* webkit */
    }

#tabs > ul > li:hover {
    background: #FFF;
    /* old browsers */
    background: -moz-linear-gradient(top, #FFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFF 100%);
    /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F3F3F3), color-stop(10%, #F3F3F3), color-stop(50%, #F3F3F3), color-stop(100%, #F3F3F3));
    /* webkit */
    cursor: pointer;
    color: #f24537
    }

#tabs > ul > li.tabActiveHeader {
    background: #FFF;
    /* old browsers */
    background: -moz-linear-gradient(top, #FFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFF 100%);
    /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFF), color-stop(10%, #F3F3F3), color-stop(50%, #F3F3F3), color-stop(100%, #FFF));
    /* webkit */
    cursor: pointer;
    color: #333
    }

#tabscontent {
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-left-radius: 4px;
    padding: 10px 10px 25px;
    background: #FFF;
    /* old browsers */
    background: -moz-linear-gradient(top, #FFF 0%, #FFF 90%, #e4e9ed 100%);
    /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFF), color-stop(90%, #FFF), color-stop(100%, #e4e9ed));
    /* webkit */
    margin: 0;
    color: #333
    }

last add javascript in our index.html, please insert the javscript code below to your index.html

function handleFileSelect(evt) {
                        var original = document.getElementById("original"),
                                stego = document.getElementById("stego"),
                                img = document.getElementById("img"),
                                cover = document.getElementById("cover"),
                                message = document.getElementById("message");
                        if(!original || !stego) return;

                        var files = evt.target.files; // FileList object

                        // Loop through the FileList and render image files as thumbnails.
                        for (var i = 0, f; f = files[i]; i++) {

                                // Only process image files.
                                if (!f.type.match('image.*')) {
                                        continue;
                                }

                                var reader = new FileReader();

                                // Closure to capture the file information.
                                reader.onload = (function(theFile) {
                                        return function(e) {
                                                img.src = e.target.result;
                                                img.title = escape(theFile.name);
                                                stego.className = "half invisible";
                                                cover.src = "";
                                                message.innerHTML="";
                                                message.parentNode.className="invisible";
                                                updateCapacity();
                                        };
                                })(f);

                                // Read in the image file as a data URL.
                                reader.readAsDataURL(f);
                        }
                }

                function hide() {
                        var stego = document.getElementById("stego"),
                                img = document.getElementById("img"),
                                cover = document.getElementById("cover"),
                                message = document.getElementById("message"),
                                textarea = document.getElementById("text"),
                                download = document.getElementById("download");
                        if(img && textarea) {
                                cover.src = steg.encode(textarea.value, img, {"width": img.width, "height": img.height});
                                stego.className = "half";
                                message.innerHTML="";
                                message.parentNode.className="invisible";
                                download.href=cover.src.replace("image/png", "image/octet-stream");
                        }
                }

                function read() {
                        var img = document.getElementById("img"),
                                cover = document.getElementById("cover"),
                                message = document.getElementById("message"),
                                textarea = document.getElementById("text");
                        if(img && textarea) {
                                message.innerHTML = steg.decode(img);
                                if(message.innerHTML !== "") {
                                        message.parentNode.className="";
                                        textarea.value = message.innerHTML;
                                        updateCapacity();
                                }
                        }
                }

                function updateCapacity() {
                        var img = document.getElementById('img'),
                                textarea = document.getElementById('text');
                        if(img && text)
                                document.getElementById('capacity').innerHTML='('+textarea.value.length + '/' + steg.getHidingCapacity(img) +' chars)';
                }

                window.onload = function(){
                        document.getElementById('file').addEventListener('change', handleFileSelect, false);
                        document.getElementById('hide').addEventListener('click', hide, false);
                        document.getElementById('read').addEventListener('click', read, false);
                        document.getElementById('text').addEventListener('keyup', updateCapacity, false);
                        hide();
                        updateCapacity();
                };

here is the result > DEMO