2017-04-29 13:14:06 +00:00
<!doctype html>
< html >
< head >
< meta charset = "utf-8" >
2017-06-15 10:32:45 +00:00
< title > StatiCrypt: Password protect static HTML< / title >
2017-04-29 13:14:06 +00:00
< meta name = "description" content = "" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2017-06-17 18:44:00 +00:00
< link rel = "stylesheet"
type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
2017-06-14 14:19:24 +00:00
< style >
a.no-style {
color: inherit;
text-decoration: inherit;
}
body {
font-size: 16px;
}
2017-06-15 15:48:20 +00:00
label.no-style {
font-weight: normal;
}
2017-06-14 14:19:24 +00:00
< / style >
2017-06-14 15:22:24 +00:00
< script >
2022-02-10 08:22:32 +00:00
(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');
2017-06-14 15:22:24 +00:00
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
2022-11-05 10:58:21 +00:00
target="_blank" href="example/example_encrypted.html">example< / a > ).
2017-04-29 13:14:06 +00:00
< / p >
2018-01-14 12:03:45 +00:00
< p >
2022-02-27 18:55:03 +00:00
The tool is also available as < a href = "https://npmjs.com/package/staticrypt" > a CLI on NPM< / a > and is < a
href="https://github.com/robinmoisson/staticrypt">open source on GitHub< / a > .
2018-01-14 12:03:45 +00:00
< / p >
2017-06-14 14:19:24 +00:00
< br >
2017-06-14 15:22:24 +00:00
2022-02-10 08:22:32 +00:00
< h4 >
< a class = "no-style" id = "toggle-concept" href = "#" >
< span id = "toggle-concept-sign" > ►< / span > HOW IT WORKS
< / a >
< / h4 >
2017-06-14 14:19:24 +00:00
< div id = "concept" class = "hidden" >
2018-02-19 18:45:43 +00:00
< p >
< b class = "text-danger" > Disclaimer< / b > if you have extra sensitive banking data, you should probably
use something else!
< / p >
2017-06-14 14:19:24 +00:00
< p >
StatiCrypt generates a static, password protected page that can be decrypted in-browser:
2017-06-15 11:21:59 +00:00
just send or upload the generated page to a place serving static content (github pages, for example)
2017-06-14 14:19:24 +00:00
and you're done: the javascript will prompt users for password, decrypt the page and load your HTML.
< / p >
< p >
2018-02-19 18:45:43 +00:00
It 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 11:21:59 +00:00
< br > AES-256 is state of the art but < b > brute-force/dictionary attacks would be trivial to
2018-02-19 18:45:43 +00:00
do at a really fast pace: use a long, unusual passphrase!< / b >
2017-06-14 14:19:24 +00:00
< / p >
< p >
2018-02-19 18:45:43 +00:00
Feel free to contribute or report any thought to the
< a href = "https://github.com/robinmoisson/staticrypt" > GitHub project< / a > !
2017-06-14 14:19:24 +00:00
< / 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 >
2022-02-10 08:22:32 +00:00
2017-04-29 13:14:06 +00:00
< div class = "form-group" >
2017-06-14 14:19:24 +00:00
< label for = "unencrypted_html" > HTML/string to encrypt< / label >
2022-02-10 08:22:32 +00:00
< textarea class = "form-control"
id="unencrypted_html"
placeholder="< html > < head > ..."
2017-06-14 15:22:24 +00:00
rows="5">< / textarea >
2017-04-29 13:14:06 +00:00
< / div >
2022-02-10 08:22:32 +00:00
< div class = "form-group" >
< label class = "no-style" >
< input type = "checkbox" id = "remember" checked >
Add "Remember me" checkbox (append < code > ?staticrypt_logout< / code > to your URL to logout)
< small >
< abbr class = "text-muted"
title="The password will be stored in clear text in the browser's localStorage upon entry by the user. See " More options" to set the expiration (default: none)">
(?)
< / abbr >
< / small >
< / label >
< / 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 >
2022-02-10 08:22:32 +00:00
2017-06-14 14:19:24 +00:00
< 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
2022-02-10 08:22:32 +00:00
< div class = "form-group" >
< label for = "title" > Passphrase input placeholder< / label >
< input type = "text" class = "form-control" id = "passphrase_placeholder"
placeholder="Default: 'Passphrase'">
< / div >
< div class = "form-group" >
< label for = "title" > "Remember me" checkbox label< / label >
< input type = "text" class = "form-control" id = "remember_me" placeholder = "Default: 'Remember me'" >
< / div >
< div class = "form-group" >
< label for = "title" > "Remember me" expiration in days< / label >
< input type = "number"
class="form-control"
id="remember_in_days"
step="any"
placeholder="Default: 0 (no expiration)">
< small class = "form-text text-muted" >
After this many days, the user will have to enter the passphrase again. Leave empty or set
to 0 for no expiration.
< / small >
< / div >
< div class = "form-group" >
< label for = "title" > Decrypt button label< / label >
< input type = "text" class = "form-control" id = "decrypt_button" placeholder = "Default: 'DECRYPT'" >
< / div >
< div class = "form-group" >
< label class = "no-style" >
< input type = "checkbox" id = "embed-crypto" checked >
Embed crypto-js into your file
< small >
< abbr class = "text-muted"
title="Leave checked to include crypto-js into your file so you can decrypt it offline. Uncheck to load crypto-js from a CDN (some adblockers might think it's a crypto miner).">
(?)
< / abbr >
< / small >
< / label >
< / div >
2017-06-15 15:48:20 +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 >
2022-02-10 08:22:32 +00:00
< div class = "row mb-5" >
2017-04-29 13:14:06 +00:00
< div class = "col-xs-12" >
< h2 > Encrypted HTML< / h2 >
2017-06-15 10:27:47 +00:00
< p > < a class = "btn btn-success download"
download="encrypted.html"
id="download-link"
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 >
2018-02-19 18:34:49 +00:00
<!--
Filename changed to circumvent adblockers that mistake it for a crypto miner (see https://github.com/robinmoisson/staticrypt/issues/107)
-->
2022-11-05 10:58:21 +00:00
< script src = "lib/kryptojs-3.1.9-1.min.js" > < / script >
2017-04-29 13:14:06 +00:00
2017-06-19 08:46:47 +00:00
< script src = "https://cdn.ckeditor.com/4.7.0/standard/ckeditor.js" > < / script >
2017-04-29 13:14:06 +00:00
< script >
2017-06-19 08:46:47 +00:00
// enable CKEDIRTOR
2022-02-10 08:22:32 +00:00
CKEDITOR.replace('instructions');
2017-06-19 08:46:47 +00:00
2017-06-15 10:20:19 +00:00
var htmlToDownload;
2017-06-15 05:36:09 +00:00
var renderTemplate = function (tpl, data) {
return tpl.replace(/{(.*?)}/g, function (_, key) {
2022-02-10 08:22:32 +00:00
if (data & & data[key] !== undefined) {
return data[key];
}
return '';
2017-06-15 05:36:09 +00:00
});
2017-06-15 10:20:19 +00:00
};
2017-04-29 13:14:06 +00:00
2017-06-15 15:48:20 +00:00
/**
* Fill the password prompt template with data provided.
* @param data
*/
2017-06-15 10:20:19 +00:00
var setFileToDownload = function (data) {
2017-06-15 05:36:09 +00:00
var request = new XMLHttpRequest();
2022-11-05 10:58:21 +00:00
request.open('GET', 'lib/password_template.html', true);
2022-02-10 08:22:32 +00:00
request.onload = function () {
2017-06-15 05:36:09 +00:00
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');
2017-06-15 10:27:47 +00:00
downloadLink.href = 'data:text/html,' + encodeURIComponent(renderedTmpl);
2017-06-15 05:36:09 +00:00
downloadLink.removeAttribute('disabled');
2017-06-15 10:20:19 +00:00
htmlToDownload = renderedTmpl;
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 15:48:20 +00:00
/**
* Download crypto-js lib to embed it in the generated file, update the file when done.
* @param data
*/
var setFileToDownloadWithEmbeddedCrypto = function (data) {
var request = new XMLHttpRequest();
2022-11-05 10:58:21 +00:00
request.open('GET', 'lib/kryptojs-3.1.9-1.min.js', true);
2022-02-10 08:22:32 +00:00
request.onload = function () {
2017-06-15 15:48:20 +00:00
data['crypto_tag'] = '< script > ' + r e q u e s t . r e s p o n s e T e x t + ' < / s c r ' + ' i p t > ' ;
setFileToDownload(data);
};
request.send();
};
2019-06-28 14:23:13 +00:00
/**
* Salt and encrypt a msg with a password.
* Inspired by https://github.com/adonespitogo
*/
2022-02-10 08:22:32 +00:00
function encrypt(msg, hashedPassphrase) {
var iv = CryptoJS.lib.WordArray.random(128 / 8);
2019-06-28 14:23:13 +00:00
2022-02-10 08:22:32 +00:00
var encrypted = CryptoJS.AES.encrypt(msg, hashedPassphrase, {
2019-06-28 14:23:13 +00:00
iv: iv,
padding: CryptoJS.pad.Pkcs7,
mode: CryptoJS.mode.CBC
});
2022-02-10 08:22:32 +00:00
// iv will be hex 16 in length (32 characters)
// we prepend it to the ciphertext for use in decryption
return iv.toString() + encrypted.toString();
}
/**
* Salt and hash the passphrase so it can be stored in localStorage without opening a password reuse vulnerability.
*
* @param {string} passphrase
* @returns {{salt: string, hashedPassphrase: string}}
*/
function hashPassphrase(passphrase) {
var salt = CryptoJS.lib.WordArray.random(128 / 8).toString();
var hashedPassphrase = CryptoJS.PBKDF2(passphrase, salt, {
keySize: 256 / 32,
iterations: 1000
});
return {
salt: salt,
hashedPassphrase: hashedPassphrase.toString(),
};
2019-06-28 14:23:13 +00:00
}
2017-06-15 15:48:20 +00:00
/**
* Handle form submission.
*/
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-19 08:46:47 +00:00
// update instruction textarea value with CKEDITOR content
// (see https://stackoverflow.com/questions/3147670/ckeditor-update-textarea)
CKEDITOR.instances['instructions'].updateElement();
2022-02-10 08:22:32 +00:00
var unencrypted = document.getElementById('unencrypted_html').value,
passphrase = document.getElementById('passphrase').value;
2017-04-29 13:14:06 +00:00
2022-02-10 08:22:32 +00:00
var hashed = hashPassphrase(passphrase);
var hashedPassphrase = hashed.hashedPassphrase,
salt = hashed.salt;
var encrypted = encrypt(unencrypted, hashedPassphrase),
// we use the hashed passphrase in the HMAC because this is effectively what will be used a passphrase (so
// we can store it localStorage safely, we don't use the clear text passphrase)
hmac = CryptoJS.HmacSHA256(encrypted, CryptoJS.SHA256(hashedPassphrase).toString()).toString(),
encryptedMsg = hmac + encrypted;
var decryptButton = document.getElementById('decrypt_button').value,
instructions = document.getElementById('instructions').value,
isRememberEnabled = document.getElementById('remember').checked,
pageTitle = document.getElementById('title').value.trim(),
passphrasePlaceholder = document.getElementById('passphrase_placeholder').value.trim(),
rememberDurationInDays = document.getElementById('remember_in_days').value || 0,
rememberMe = document.getElementById('remember_me').value;
2017-04-29 13:14:06 +00:00
2017-06-15 05:36:09 +00:00
var data = {
2022-02-10 08:22:32 +00:00
crypto_tag: '< script src = "https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js" integrity = "sha384-lp4k1VRKPU9eBnPePjnJ9M2RF3i7PC30gXs70+elCVfgwLwx1tv5+ctxdtwxqZa7" crossorigin = "anonymous" > < / s c r ' + ' i p t > ' ,
decrypt_button: decryptButton ? decryptButton : 'DECRYPT',
2017-06-15 15:48:20 +00:00
encrypted: encryptedMsg,
2022-02-10 08:22:32 +00:00
salt: salt,
instructions: instructions ? instructions : '',
is_remember_enabled: isRememberEnabled ? 'true' : 'false',
passphrase_placeholder: passphrasePlaceholder ? passphrasePlaceholder : 'Passphrase',
remember_duration_in_days: rememberDurationInDays.toString(),
remember_me: rememberMe ? rememberMe : 'Remember me',
title: pageTitle ? pageTitle : 'Protected Page',
2017-06-15 05:36:09 +00:00
};
2017-04-29 13:14:06 +00:00
2022-02-10 08:22:32 +00:00
document.getElementById('encrypted_html_display').textContent = encrypted;
2017-06-14 14:19:24 +00:00
2017-06-15 15:48:20 +00:00
if (document.getElementById("embed-crypto").checked) {
setFileToDownloadWithEmbeddedCrypto(data);
2022-02-10 08:22:32 +00:00
} else {
2017-06-15 15:48:20 +00:00
setFileToDownload(data);
}
2017-06-15 05:36:09 +00:00
});
2017-06-14 14:19:24 +00:00
2017-06-15 05:36:09 +00:00
document.getElementById('toggle-extra-option')
2022-02-10 08:22:32 +00:00
.addEventListener('click', function (e) {
e.preventDefault();
document.getElementById('extra-options').classList.toggle('hidden');
});
2017-06-14 14:19:24 +00:00
2022-02-10 08:22:32 +00:00
var isConceptShown = false;
2017-06-15 05:36:09 +00:00
document.getElementById('toggle-concept')
2022-02-10 08:22:32 +00:00
.addEventListener('click', function (e) {
e.preventDefault();
isConceptShown = !isConceptShown;
document.getElementById('toggle-concept-sign').innerText = isConceptShown ? '▼' : '►';
document.getElementById('concept').classList.toggle('hidden');
});
2017-06-15 10:20:19 +00:00
2017-06-15 15:48:20 +00:00
/**
* Browser specific download code.
*/
2017-06-15 10:27:47 +00:00
document.getElementById('download-link')
2017-06-15 10:20:19 +00:00
.addEventListener('click', function (e) {
2022-02-10 08:22:32 +00:00
var isIE = (navigator.userAgent.indexOf("MSIE") !== -1) || (!!document.documentMode === true); // >= 10
var isEdge = navigator.userAgent.indexOf("Edge") !== -1;
2017-06-15 10:20:19 +00:00
2022-02-10 08:22:32 +00:00
// download with MS specific feature
if (htmlToDownload & & (isIE || isEdge)) {
e.preventDefault();
var blobObject = new Blob([htmlToDownload]);
window.navigator.msSaveOrOpenBlob(blobObject, 'encrypted.html');
}
2017-06-15 10:20:19 +00:00
2022-02-10 08:22:32 +00:00
return true;
})
2017-04-29 13:14:06 +00:00
< / script >
< / body >
< / html >
