staticrypt/index.html

189 wiersze
7.6 KiB
HTML
Czysty Zwykły widok Historia

2017-04-29 13:14:06 +00:00
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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="bootstrap.min.css">
2017-06-14 14:19:24 +00:00
<style>
a.no-style {
color: inherit;
text-decoration: inherit;
}
body {
font-size: 16px;
}
</style>
2017-06-14 15:22:24 +00:00
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-73629908-2', 'auto');
ga('send', 'pageview');
</script>
2017-04-29 13:14:06 +00:00
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
2017-06-14 14:19:24 +00:00
<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>
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>
2017-04-29 13:14:06 +00:00
<p>
2017-06-14 15:22:24 +00:00
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>).
2017-04-29 13:14:06 +00:00
</p>
2017-06-14 14:19:24 +00:00
<br>
2017-06-14 15:22:24 +00:00
<h4><a class="no-style" id="toggle-concept" href="#">HOW IT WORKS ►</a></h4>
2017-06-14 14:19:24 +00:00
<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>
2017-06-14 15:22:24 +00:00
<b class="text-danger">Disclaimer</b> TL;DR: if you have extra sensitive data, you should probably
use something else :)
2017-06-14 14:19:24 +00:00
</p>
<p>
2017-06-14 15:22:24 +00:00
StatiCrypt basically encrypt your page and put everything with a user-friendly way to use a password
in the new file.
2017-06-14 14:19:24 +00:00
<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>
2017-06-14 15:22:24 +00:00
<br>
2017-04-29 13:14:06 +00:00
</div>
</div>
<div class="row">
<div class="col-xs-12">
<form id="encrypt_form">
<div class="form-group">
<label for="passphrase">Passphrase</label>
<input type="password" class="form-control" id="passphrase"
placeholder="Passphrase (choose a long one!)">
</div>
<div class="form-group">
2017-06-14 14:19:24 +00:00
<label for="unencrypted_html">HTML/string to encrypt</label>
2017-06-14 15:22:24 +00:00
<textarea class="form-control" id="unencrypted_html" placeholder="<html><head>..."
rows="5"></textarea>
2017-04-29 13:14:06 +00:00
</div>
2017-06-14 14:19:24 +00:00
<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>
2017-04-29 13:14:06 +00:00
</div>
2017-06-14 14:19:24 +00:00
<button class="btn btn-primary pull-right" type="submit">Generate passphrase protected HTML</button>
2017-04-29 13:14:06 +00:00
</form>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h2>Encrypted HTML</h2>
2017-06-14 14:19:24 +00:00
<p><a href="#" class="btn btn-success download" target="_blank" download="encrypted.html"
disabled="disabled">Download html file with password prompt</a></p>
2017-04-29 13:14:06 +00:00
<pre id="encrypted_html_display">
2017-06-14 14:19:24 +00:00
Your encrypted string</pre>
2017-04-29 13:14:06 +00:00
</div>
</div>
</div>
<!--<script-->
2017-06-14 14:19:24 +00:00
<!--src="https://code.jquery.com/jquery-3.2.1.min.js"-->
<!--integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="-->
<!--crossorigin="anonymous"-->
2017-04-29 13:14:06 +00:00
<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>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.84/jsrender.js"></script>-->
<script src="jsrender.js"></script>
<script>
$(function () {
2017-06-14 14:19:24 +00:00
var renderTemplate = function (data) {
2017-04-29 13:14:06 +00:00
$.when($.get('password_template.html'))
2017-06-14 14:19:24 +00:00
.done(function (tmplData) {
$.templates({tmpl: tmplData});
2017-04-29 13:14:06 +00:00
var renderedTmpl = $.render.tmpl(data);
var downloadLink = $('a.download');
downloadLink.attr('href', 'data:attachment/text,' + encodeURI(renderedTmpl));
downloadLink.removeAttr('disabled');
});
};
$('#encrypt_form').submit(function (e) {
e.preventDefault();
var unencrypted = $('#unencrypted_html').val();
var passphrase = $('#passphrase').val();
var encrypted = CryptoJS.AES.encrypt(unencrypted, passphrase);
var hmac = CryptoJS.HmacSHA256(encrypted.toString(), CryptoJS.SHA256(passphrase)).toString();
var encryptedMsg = hmac + encrypted;
2017-06-14 14:19:24 +00:00
var pageTitle = $.trim($('#title').val());
var instructions = $('#instructions').val();
2017-04-29 13:14:06 +00:00
var data = {
2017-06-14 14:19:24 +00:00
title: pageTitle ? pageTitle : 'Protected Page',
instructions: instructions ? instructions : '',
2017-04-29 13:14:06 +00:00
encrypted: encryptedMsg
};
2017-06-14 14:19:24 +00:00
$('#encrypted_html_display').text(encryptedMsg);
2017-04-29 13:14:06 +00:00
renderTemplate(data);
});
2017-06-14 14:19:24 +00:00
$('#toggle-extra-option').click(function () {
$('#extra-options').toggleClass('hidden');
});
$('#toggle-concept').click(function () {
$('#concept').toggleClass('hidden');
});
2017-04-29 13:14:06 +00:00
});
</script>
</body>
</html>