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:26:37 +00:00
|
|
|
StatiCrypt basically encrypts your page and puts everything with a user-friendly way to use a password
|
2017-06-14 15:22:24 +00:00
|
|
|
in the new file.
|
2017-06-15 03:45:10 +00:00
|
|
|
<br>AES-256 is state of the art but <b>brute-force/dictionary attacks are trivial to
|
2017-06-14 14:19:24 +00:00
|
|
|
do at a really fast pace: use a long, unusual passphrase !</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> !
|
|
|
|
|
</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-15 06:02:29 +00:00
|
|
|
<p><a class="btn btn-success download" target="_blank" download="encrypted.html"
|
2017-06-14 14:19:24 +00:00
|
|
|
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>
|
|
|
|
|
|
2017-06-14 18:23:46 +00:00
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
|
2017-04-29 13:14:06 +00:00
|
|
|
|
|
|
|
|
<script>
|
2017-06-15 05:36:09 +00:00
|
|
|
var renderTemplate = function (tpl, data) {
|
|
|
|
|
return tpl.replace(/{(.*?)}/g, function (_, key) {
|
|
|
|
|
return data && data[key] || '';
|
|
|
|
|
});
|
|
|
|
|
}
|
2017-04-29 13:14:06 +00:00
|
|
|
|
2017-06-15 05:36:09 +00:00
|
|
|
var renderTemplate = function (data) {
|
|
|
|
|
var request = new XMLHttpRequest();
|
|
|
|
|
request.open('GET', 'password_template.html', true);
|
|
|
|
|
request.onload = function() {
|
|
|
|
|
var renderedTmpl = renderTemplate(request.responseText, data);
|
2017-04-29 13:14:06 +00:00
|
|
|
|
2017-06-15 05:36:09 +00:00
|
|
|
var downloadLink = document.querySelector('a.download');
|
|
|
|
|
downloadLink.href = 'data:attachment/text,' + encodeURIComponent(renderedTmpl);
|
|
|
|
|
downloadLink.removeAttribute('disabled');
|
2017-04-29 13:14:06 +00:00
|
|
|
};
|
2017-06-15 05:36:09 +00:00
|
|
|
request.send();
|
|
|
|
|
};
|
2017-04-29 13:14:06 +00:00
|
|
|
|
2017-06-15 05:36:09 +00:00
|
|
|
document.getElementById('encrypt_form').addEventListener('submit', function (e) {
|
|
|
|
|
e.preventDefault();
|
2017-04-29 13:14:06 +00:00
|
|
|
|
2017-06-15 05:36:09 +00:00
|
|
|
var unencrypted = document.getElementById('unencrypted_html').value;
|
|
|
|
|
var passphrase = document.getElementById('passphrase').value;
|
2017-04-29 13:14:06 +00:00
|
|
|
|
2017-06-15 05:36:09 +00:00
|
|
|
var encrypted = CryptoJS.AES.encrypt(unencrypted, passphrase);
|
|
|
|
|
var hmac = CryptoJS.HmacSHA256(encrypted.toString(), CryptoJS.SHA256(passphrase)).toString();
|
|
|
|
|
var encryptedMsg = hmac + encrypted;
|
2017-04-29 13:14:06 +00:00
|
|
|
|
2017-06-15 05:36:09 +00:00
|
|
|
var pageTitle = document.getElementById('title').value.trim();
|
|
|
|
|
var instructions = document.getElementById('instructions').value;
|
|
|
|
|
var data = {
|
|
|
|
|
title: pageTitle ? pageTitle : 'Protected Page',
|
|
|
|
|
instructions: instructions ? instructions : '',
|
|
|
|
|
encrypted: encryptedMsg
|
|
|
|
|
};
|
2017-04-29 13:14:06 +00:00
|
|
|
|
2017-06-15 05:36:09 +00:00
|
|
|
document.getElementById('encrypted_html_display').textContent = encryptedMsg;
|
2017-06-14 14:19:24 +00:00
|
|
|
|
2017-06-15 05:36:09 +00:00
|
|
|
renderTemplate(data);
|
|
|
|
|
});
|
2017-06-14 14:19:24 +00:00
|
|
|
|
2017-06-15 05:36:09 +00:00
|
|
|
document.getElementById('toggle-extra-option')
|
|
|
|
|
.addEventListener('click', function (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
document.getElementById('extra-options').classList.toggle('hidden');
|
|
|
|
|
});
|
2017-06-14 14:19:24 +00:00
|
|
|
|
2017-06-15 05:36:09 +00:00
|
|
|
document.getElementById('toggle-concept')
|
|
|
|
|
.addEventListener('click', function (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
document.getElementById('concept').classList.toggle('hidden');
|
2017-04-29 13:14:06 +00:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
