add example + explain text

2017-06-14 16:19:24 +02:00 · 2017-06-14 16:19:24 +02:00 · 9550fac437
commit 9550fac437
--- a/example.html
+++ b/example.html
@ -0,0 +1,168 @@
+<!doctype html>
+<html class="staticrypt-html">
+<head>
+    <meta charset="utf-8">
+    <title>Protected Page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- do not cache this page -->
+    <meta http-equiv="cache-control" content="max-age=0"/>
+    <meta http-equiv="cache-control" content="no-cache"/>
+    <meta http-equiv="expires" content="0"/>
+    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
+    <meta http-equiv="pragma" content="no-cache"/>
+
+    <style>
+        .staticrypt-hr {
+            margin-top: 20px;
+            margin-bottom: 20px;
+            border: 0;
+            border-top: 1px solid #eee;
+        }
+
+        .staticrypt-page {
+            width: 360px;
+            padding: 8% 0 0;
+            margin: auto;
+            box-sizing: border-box;
+        }
+
+        .staticrypt-form {
+            position: relative;
+            z-index: 1;
+            background: #FFFFFF;
+            max-width: 360px;
+            margin: 0 auto 100px;
+            padding: 45px;
+            text-align: center;
+            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+        }
+
+        .staticrypt-form input {
+            outline: 0;
+            background: #f2f2f2;
+            width: 100%;
+            border: 0;
+            margin: 0 0 15px;
+            padding: 15px;
+            box-sizing: border-box;
+            font-size: 14px;
+        }
+
+        .staticrypt-form .staticrypt-decrypt-button {
+            text-transform: uppercase;
+            outline: 0;
+            background: #4CAF50;
+            width: 100%;
+            border: 0;
+            padding: 15px;
+            color: #FFFFFF;
+            font-size: 14px;
+        }
+
+        .staticrypt-form .staticrypt-decrypt-button:hover, .staticrypt-form .staticrypt-decrypt-button:active, .staticrypt-form .staticrypt-decrypt-button:focus {
+            background: #43A047;
+        }
+
+        .staticrypt-html {
+            height: 100%;
+        }
+
+        .staticrypt-body {
+            margin-bottom: 1em;
+            background: #76b852; /* fallback for old browsers */
+            background: -webkit-linear-gradient(right, #76b852, #8DC26F);
+            background: -moz-linear-gradient(right, #76b852, #8DC26F);
+            background: -o-linear-gradient(right, #76b852, #8DC26F);
+            background: linear-gradient(to left, #76b852, #8DC26F);
+            font-family: "Arial", sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        .staticrypt-instructions {
+            margin-top: -1em;
+            margin-bottom: 1em;
+        }
+
+        .staticrypt-title {
+            font-size: 1.5em;
+        }
+
+        .staticrypt-footer {
+            position: fixed;
+            height: 20px;
+            font-size: 16px;
+            padding: 2px;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin-bottom: 0;
+        }
+
+        .staticrypt-footer p {
+            margin: 2px;
+            text-align: center;
+            float: right;
+        }
+    </style>
+</head>
+
+<body class="staticrypt-body">
+<div class="staticrypt-page">
+    <div class="staticrypt-form">
+        <div class="staticrypt-instructions">
+            <p class="staticrypt-title">Protected Page</p>
+            <p>Enter "test" to unlock the page</p>
+        </div>
+
+        <hr class="staticrypt-hr">
+
+        <form id="staticrypt-form" action="#" method="post">
+            <input id="staticrypt-password"
+                   type="password"
+                   name="password"
+                   placeholder="passphrase"/>
+
+            <input type="submit" class="staticrypt-decrypt-button" value="DECRYPT"/>
+        </form>
+    </div>
+
+</div>
+<footer class="staticrypt-footer">
+    <p class="pull-right">Created with <a href="https://robinmoisson.github.io/staticrypt">StatiCrypt</a></p>
+</footer>
+
+
+<script
+        src="https://code.jquery.com/jquery-3.2.1.min.js"
+        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
+
+<script>
+    $(function () {
+        $('#staticrypt-form').submit(function (e) {
+            e.preventDefault();
+
+            var passphrase = $('#staticrypt-password').val();
+            var encryptedMsg = 'bf73a9eb1c0ef239c83d262470f6a1a55b024a867a41199f73a33b82d73f6855U2FsdGVkX1/GeUxTnFMh1/3gx6bj1Cb4/bQxA/2toJZe8tX6H4azBaCfva11oo9Klj4NIYglL2ln6tQdBGEFHLCRy1ib6Fd89heNRoE30ua/AN0jvfxGP81ZOOzjAeSGb3gDUqOpgobXNz0rTw1z3cl++Sj9yrrOePbhmu7tPEJhz9NT50iAakdHNqm4fOjU4UiJFYBRcKERg0rXG9mHFg==';
+
+            var encryptedHMAC = encryptedMsg.substring(0, 64);
+            var encryptedHTML = encryptedMsg.substring(64);
+
+            var decryptedHMAC = CryptoJS.HmacSHA256(encryptedHTML, CryptoJS.SHA256(passphrase)).toString();
+
+            if (decryptedHMAC !== encryptedHMAC) {
+                alert('Bad passphrase !');
+                return;
+            }
+
+            var plainHTML = CryptoJS.AES.decrypt(encryptedHTML, passphrase).toString(CryptoJS.enc.Utf8);
+
+            document.write(plainHTML);
+        });
+    });
+</script>
+</body>
+</html>
--- a/index.html
+++ b/index.html
@ -5,18 +5,65 @@
    <title>Static HTML Crypto</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!--<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
+    <style>
+        a.no-style {
+            color: inherit;
+            text-decoration: inherit;
+        }
+
+        body {
+            font-size: 16px;
+        }
+    </style>
 </head>

 <body>
 <div class="container">
    <div class="row">
        <div class="col-xs-12">
-            <h1>StatiCrypt</h1>
+            <h1>
+                StatiCrypt
+                <div class="pull-right">
+                    <iframe src="https://ghbtns.com/github-btn.html?user=robinmoisson&repo=staticrypt&type=star&size=large"
+                            frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
+                    <iframe src="https://ghbtns.com/github-btn.html?user=robinmoisson&repo=staticrypt&type=fork&size=large"
+                            frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
+                </div>
+                <br>
+                <small>Password protect a static HTML page</small>
+            </h1>
            <p>
-                Password protect a static HTML page.
+                Based on the <a href="https://github.com/brix/crypto-js">crypto-js library</a>, StatiCrypt uses AES-256
+                to encrypt your string with your passphrase in your browser (client side).
            </p>
+            <p>
+                Download your encrypted string in a HTML page with a password prompt you can upload anywhere (see <a target="_blank" href="example.html">example</a>).
+            </p>
+            <h4><a class="no-style" id="toggle-concept" href="#">HOW IT WORKS ►</a></h4>
+            <br>
+            <div id="concept" class="hidden">
+                <p>
+                    StatiCrypt generates a static, password protected page that can be decrypted in-browser:
+                    just send or upload the generated page to a place serving static content (github pages, for exemple)
+                    and you're done: the javascript will prompt users for password, decrypt the page and load your HTML.
+                </p>
+                <p>
+                    <b class="text-danger">Disclaimer</b> TL;DR: if you have extra sensitive data, you should probably use
+                    something else :)
+                </p>
+                <p>
+                    We basically encrypt your page and put everything with a user-friendly way to use a password in the new
+                    file.
+                    <br>AES-256 is state of the art but <b>brute-force/dictionnary attacks are trivial to
+                    do at a really fast pace: use a long, unusual passphrase&nbsp;!</b>
+                </p>
+                <p>
+                    The concept is simple but this is a side project - not purporting to be bulletproof, feel free to
+                    contribute or report any thought to the <a href="https://github.com/robinmoisson/staticrypt">GitHub
+                    project</a>&nbsp;!
+                </p>
+            </div>
        </div>
    </div>
    <div class="row">
@ -28,23 +75,24 @@
                           placeholder="Passphrase (choose a long one!)">
                </div>
                <div class="form-group">
-                    <label for="html_title">HTML title of generated page</label>
-                    <input type="text" class="form-control" id="html_title">
+                    <label for="unencrypted_html">HTML/string to encrypt</label>
+                    <textarea class="form-control" id="unencrypted_html" placeholder="<html><head>..." rows="5"></textarea>
                </div>
-                <div class="form-group">
-                    <label for="title">Page name</label>
-                    <input type="text" class="form-control" id="title">
-                </div>
-                <div class="form-group">
-                    <label for="instructions">Instructions to display the user</label>
-                    <textarea class="form-control" id="instructions"></textarea>
-                </div>
-                <div class="form-group">
-                    <label for="unencrypted_html">HTML to encrypt</label>
-                    <textarea class="form-control" id="unencrypted_html" placeholder="<html><head>..."></textarea>
+                <p>
+                    <a href="#" id="toggle-extra-option">+ More options</a>
+                </p>
+                <div id="extra-options" class="hidden">
+                    <div class="form-group">
+                        <label for="title">Page title</label>
+                        <input type="text" class="form-control" id="title" placeholder="Default: 'Protected Page'">
+                    </div>
+                    <div class="form-group">
+                        <label for="instructions">Instructions to display the user</label>
+                        <textarea class="form-control" id="instructions" placeholder="Default: nothing."></textarea>
+                    </div>
                </div>

-                <button class="btn btn-primary" type="submit">Generate passphrase protected HTML</button>
+                <button class="btn btn-primary pull-right" type="submit">Generate passphrase protected HTML</button>
            </form>
        </div>
    </div>
@ -52,17 +100,18 @@
    <div class="row">
        <div class="col-xs-12">
            <h2>Encrypted HTML</h2>
-            <a href="#" class="btn btn-primary download" target="_blank" download="encrypted.html" disabled>Download</a>
+            <p><a href="#" class="btn btn-success download" target="_blank" download="encrypted.html"
+                  disabled="disabled">Download html file with password prompt</a></p>
            <pre id="encrypted_html_display">
-Nothing generated yet.</pre>
+Your encrypted string</pre>
        </div>
    </div>
 </div>

 <!--<script-->
-        <!--src="https://code.jquery.com/jquery-3.2.1.min.js"-->
-        <!--integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="-->
-        <!--crossorigin="anonymous"-->
+<!--src="https://code.jquery.com/jquery-3.2.1.min.js"-->
+<!--integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="-->
+<!--crossorigin="anonymous"-->
 <script src="jquery-3.2.1.min.js"></script>
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>-->
 <script src="crypto-js.js"></script>
@ -72,16 +121,14 @@ Nothing generated yet.</pre>
 <script>
    $(function () {

-        var renderTemplate = function(data) {
+        var renderTemplate = function (data) {

            $.when($.get('password_template.html'))
-                .done(function(tmplData) {
-                    $.templates({ tmpl: tmplData });
+                .done(function (tmplData) {
+                    $.templates({tmpl: tmplData});

                    var renderedTmpl = $.render.tmpl(data);

-                    $('#encrypted_html_display').text(renderedTmpl);
-
                    var downloadLink = $('a.download');
                    downloadLink.attr('href', 'data:attachment/text,' + encodeURI(renderedTmpl));
                    downloadLink.removeAttr('disabled');
@ -98,19 +145,29 @@ Nothing generated yet.</pre>
            var hmac = CryptoJS.HmacSHA256(encrypted.toString(), CryptoJS.SHA256(passphrase)).toString();
            var encryptedMsg = hmac + encrypted;

+            var pageTitle = $.trim($('#title').val());
+            var instructions = $('#instructions').val();
            var data = {
-                html_title: $('#html_title').val(),
-                title: $('#title').val(),
-                instructions: $('#instructions').val(),
+                title: pageTitle ? pageTitle : 'Protected Page',
+                instructions: instructions ? instructions : '',
                encrypted: encryptedMsg
            };

+            $('#encrypted_html_display').text(encryptedMsg);
+
            renderTemplate(data);
        });
+
+        $('#toggle-extra-option').click(function () {
+            $('#extra-options').toggleClass('hidden');
+        });
+
+        $('#toggle-concept').click(function () {
+            $('#concept').toggleClass('hidden');
+        });
    });
 </script>


-
 </body>
 </html>
--- a/password_template.html
+++ b/password_template.html
@ -2,23 +2,29 @@
 <html class="staticrypt-html">
 <head>
    <meta charset="utf-8">
-    <title>{{:html_title}}</title>
+    <title>{{:title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

+    <!-- do not cache this page -->
+    <meta http-equiv="cache-control" content="max-age=0"/>
+    <meta http-equiv="cache-control" content="no-cache"/>
+    <meta http-equiv="expires" content="0"/>
+    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
+    <meta http-equiv="pragma" content="no-cache"/>
+
    <style>
-        /*@font-face {*/
-        /*font-family: 'Roboto';*/
-        /*src: url('../fonts/roboto-light-webfont.woff2') format('woff2'),*/
-        /*url('../fonts/roboto-light-webfont.woff') format('woff'),*/
-        /*url('../fonts/Roboto-Light.ttf') format('ttf');*/
-        /*font-weight: normal;*/
-        /*font-style: normal;*/
-        /*}*/
+        .staticrypt-hr {
+            margin-top: 20px;
+            margin-bottom: 20px;
+            border: 0;
+            border-top: 1px solid #eee;
+        }

        .staticrypt-page {
            width: 360px;
            padding: 8% 0 0;
            margin: auto;
+            box-sizing: border-box;
        }

        .staticrypt-form {
@ -32,12 +38,7 @@
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
        }

-        .staticrypt-form label {
-            /*font-family: "Roboto", sans-serif;*/
-        }
-
        .staticrypt-form input {
-            /*font-family: "Roboto", sans-serif;*/
            outline: 0;
            background: #f2f2f2;
            width: 100%;
@ -48,8 +49,7 @@
            font-size: 14px;
        }

-        .staticrypt-form .login-btn {
-            /*font-family: "Roboto", sans-serif;*/
+        .staticrypt-form .staticrypt-decrypt-button {
            text-transform: uppercase;
            outline: 0;
            background: #4CAF50;
@ -69,52 +69,60 @@
        }

        .staticrypt-body {
-            height: 100%;
-            margin-bottom: 2em;
+            margin-bottom: 1em;
            background: #76b852; /* fallback for old browsers */
            background: -webkit-linear-gradient(right, #76b852, #8DC26F);
            background: -moz-linear-gradient(right, #76b852, #8DC26F);
            background: -o-linear-gradient(right, #76b852, #8DC26F);
            background: linear-gradient(to left, #76b852, #8DC26F);
-            /*font-family: "Roboto", sans-serif;*/
+            font-family: "Arial", sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

-        .staticrypt-title {
-            font-size: 1.5em;
+        .staticrypt-instructions {
            margin-top: -1em;
            margin-bottom: 1em;
        }

+        .staticrypt-title {
+            font-size: 1.5em;
+        }
+
        .staticrypt-footer {
            position: fixed;
-            height: 2em;
-            background-color: white;
+            height: 20px;
+            font-size: 16px;
+            padding: 2px;
            bottom: 0;
            left: 0;
            right: 0;
            margin-bottom: 0;
+        }
+
+        .staticrypt-footer p {
+            margin: 2px;
            text-align: center;
+            float: right;
        }
    </style>
 </head>

 <body class="staticrypt-body">
 <div class="staticrypt-page">
-    <div class="form">
-        <div class="staticrypt-title">
-            <p>{{:title}}</p>
+    <div class="staticrypt-form">
+        <div class="staticrypt-instructions">
+            <p class="staticrypt-title">{{:title}}</p>
            <p>{{:instructions}}</p>
        </div>

-        <hr>
+        <hr class="staticrypt-hr">

        <form id="staticrypt-form" action="#" method="post">
            <input id="staticrypt-password"
-                    type="password"
+                   type="password"
                   name="password"
-                   placeholder="password"/>
+                   placeholder="passphrase"/>

            <input type="submit" class="staticrypt-decrypt-button" value="DECRYPT"/>
        </form>
@ -122,21 +130,19 @@

 </div>
 <footer class="staticrypt-footer">
-    <p>Created with StatiCrypt</p>
+    <p class="pull-right">Created with <a href="https://robinmoisson.github.io/staticrypt">StatiCrypt</a></p>
 </footer>


-<!--<script-->
-        <!--src="https://code.jquery.com/jquery-3.2.1.min.js"-->
-        <!--integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="-->
-        <!--crossorigin="anonymous"></script>-->
-<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>-->
+<script
+        src="https://code.jquery.com/jquery-3.2.1.min.js"
+        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>

-<script src="jquery-3.2.1.min.js"></script>
-<script src="crypto-js.js"></script>
 <script>
-    $(function(){
-        $('#staticrypt-form').submit(function(e){
+    $(function () {
+        $('#staticrypt-form').submit(function (e) {
            e.preventDefault();

            var passphrase = $('#staticrypt-password').val();