staticrypt/index.html

587 wiersze
21 KiB
HTML
Czysty Zwykły widok Historia

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;
}
label.no-style {
font-weight: normal;
}
2017-06-14 14:19:24 +00:00
</style>
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/example_encrypted.html">example</a>).
2017-04-29 13:14:06 +00:00
</p>
<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>.
</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="#">
<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>
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>
<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>
<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 &quot;More options&quot; 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>
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
<div class="form-group">
<label for="passphrase_placeholder">Passphrase input placeholder</label>
<input type="text" class="form-control" id="passphrase_placeholder"
placeholder="Default: 'Passphrase'">
</div>
<div class="form-group">
<label for="remember_me">"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="remember_in_days">"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="decrypt_button">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"
2022-11-20 18:16:27 +00:00
title="Leave checked to include crypto-js into your file so you can decrypt it offline. Uncheck to load crypto-js from a CDN.">
(?)
</abbr>
</small>
</label>
</div>
</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 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>
<!--
Filename changed to circumvent adblockers that mistake it for a crypto miner (see https://github.com/robinmoisson/staticrypt/issues/107)
-->
2022-11-21 10:34: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>
<script id="cryptoEngine">
window.cryptoEngine = ((function(){
const exports = {};
/**
* Salt and encrypt a msg with a password.
* Inspired by https://github.com/adonespitogo
*/
function encrypt(msg, hashedPassphrase) {
var iv = CryptoJS.lib.WordArray.random(128 / 8);
var encrypted = CryptoJS.AES.encrypt(msg, hashedPassphrase, {
iv: iv,
padding: CryptoJS.pad.Pkcs7,
mode: CryptoJS.mode.CBC,
});
// iv will be hex 16 in length (32 characters)
// we prepend it to the ciphertext for use in decryption
return iv.toString() + encrypted.toString();
}
exports.encrypt = encrypt;
/**
* Decrypt a salted msg using a password.
* Inspired by https://github.com/adonespitogo
*
* @param {string} encryptedMsg
* @param {string} hashedPassphrase
* @returns {string}
*/
function decrypt(encryptedMsg, hashedPassphrase) {
var iv = CryptoJS.enc.Hex.parse(encryptedMsg.substr(0, 32));
var encrypted = encryptedMsg.substring(32);
return CryptoJS.AES.decrypt(encrypted, hashedPassphrase, {
iv: iv,
padding: CryptoJS.pad.Pkcs7,
mode: CryptoJS.mode.CBC,
}).toString(CryptoJS.enc.Utf8);
}
exports.decrypt = decrypt;
/**
* Salt and hash the passphrase so it can be stored in localStorage without opening a password reuse vulnerability.
*
* @param {string} passphrase
* @param {string} salt
* @returns string
*/
function hashPassphrase(passphrase, salt) {
var hashedPassphrase = CryptoJS.PBKDF2(passphrase, salt, {
keySize: 256 / 32,
iterations: 1000,
});
return hashedPassphrase.toString();
}
exports.hashPassphrase = hashPassphrase;
function generateRandomSalt() {
return CryptoJS.lib.WordArray.random(128 / 8).toString();
}
exports.generateRandomSalt = generateRandomSalt;
function signMessage(hashedPassphrase, message) {
return CryptoJS.HmacSHA256(
message,
CryptoJS.SHA256(hashedPassphrase).toString()
).toString();
}
exports.signMessage = signMessage;
return exports;
})())
</script>
<script id="codec">
window.codec = ((function(){
const exports = {};
/**
* Initialize the codec with the provided cryptoEngine - this return functions to encode and decode messages.
*
* @param cryptoEngine - the engine to use for encryption / decryption
*/
function init(cryptoEngine) {
const exports = {};
/**
* Top-level function for encoding a message.
* Includes passphrase hashing, encryption, and signing.
*
* @param {string} msg
* @param {string} passphrase
* @param {string} salt
*
* @returns {string} The encoded text
*/
function encode(msg, passphrase, salt) {
const hashedPassphrase = cryptoEngine.hashPassphrase(passphrase, salt);
const encrypted = cryptoEngine.encrypt(msg, hashedPassphrase);
// we use the hashed passphrase in the HMAC because this is effectively what will be used a passphrase (so we can store
// it in localStorage safely, we don't use the clear text passphrase)
const hmac = cryptoEngine.signMessage(hashedPassphrase, encrypted);
return hmac + encrypted;
}
exports.encode = encode;
/**
* Top-level function for decoding a message.
* Includes signature check, an decryption.
*
* @param {string} signedMsg
* @param {string} hashedPassphrase
*
* @returns {Object} {success: true, decoded: string} | {success: false, message: string}
*/
function decode(signedMsg, hashedPassphrase) {
const encryptedHMAC = signedMsg.substring(0, 64);
const encryptedMsg = signedMsg.substring(64);
const decryptedHMAC = cryptoEngine.signMessage(hashedPassphrase, encryptedMsg);
if (decryptedHMAC !== encryptedHMAC) {
return { success: false, message: "Signature mismatch" };
}
return {
success: true,
decoded: cryptoEngine.decrypt(encryptedMsg, hashedPassphrase),
};
}
exports.decode = decode;
return exports;
}
exports.init = init;
return exports;
})())
</script>
<script id="formater">
window.formater = ((function(){
const exports = {};
/**
* A dead-simple alternative to webpack or rollup for inlining simple
* CommonJS modules in a browser <script>.
* - Wraps the module in an immediately invoked function that returns `exports`.
*
* @param {string} modulePath
*/
function convertCommonJSToBrowserJS(modulePath) {
const resolvedPath = path.join(__dirname, ...modulePath.split("/")) + ".js";
const moduleText = fs
.readFileSync(resolvedPath, "utf8")
.replaceAll(/^.*\brequire\(.*$\n/gm, "");
return `
((function(){
const exports = {};
${moduleText}
return exports;
})())
`.trim();
}
exports.convertCommonJSToBrowserJS = convertCommonJSToBrowserJS;
/**
* Replace the placeholder tags (between '{tag}') in the template string with provided data.
*
* @param {string} templateString
* @param {Object} data
*
* @returns string
*/
function renderTemplate(templateString, data) {
return templateString.replace(/{(.*?)}/g, function (_, key) {
if (data && data[key] !== undefined) {
return data[key];
}
return "";
});
}
exports.renderTemplate = renderTemplate;
/**
* Fill the template with provided data and writes it to output file.
*
* @param {Object} data
* @param {string} outputFilePath
* @param {string} inputFilePath
*/
function genFile(data, outputFilePath, inputFilePath) {
let templateContents;
try {
templateContents = fs.readFileSync(inputFilePath, "utf8");
} catch (e) {
exitEarly("Failure: could not read template!");
}
const renderedTemplate = renderTemplate(templateContents, data);
try {
fs.writeFileSync(outputFilePath, renderedTemplate);
} catch (e) {
exitEarly("Failure: could not generate output file!");
}
}
exports.genFile = genFile;
return exports;
})())
</script>
2017-04-29 13:14:06 +00:00
<script>
var encode = codec.init(cryptoEngine).encode;
2017-06-19 08:46:47 +00:00
// enable CKEDIRTOR
CKEDITOR.replace('instructions');
2017-06-19 08:46:47 +00:00
var htmlToDownload;
/**
* Extract js code from <script> tag and return it as a string
*
* @param id
* @returns
*/
var getScriptAsString = function (id) {
return document.getElementById(id)
.innerText.replace(/window\.\w+ = /, '');
}
2017-04-29 13:14:06 +00:00
/**
* Register something happened - this uses a simple Supabase function to implement a counter, and allows use to drop
* google analytics.
*
* @param action
*/
function trackEvent(action) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://zlgpaemmniviswibzuwt.supabase.co/rest/v1/rpc/increment_analytics', true);
xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
xhr.setRequestHeader('apikey', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InpsZ3BhZW1tbml2aXN3aWJ6dXd0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2NjkxMjM0OTcsImV4cCI6MTk4NDY5OTQ5N30.wNoVDHG7F6INx-IPotMs3fL1nudfaF2qvQDgG-1PhNI')
xhr.setRequestHeader('Authorization', 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InpsZ3BhZW1tbml2aXN3aWJ6dXd0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2NjkxMjM0OTcsImV4cCI6MTk4NDY5OTQ5N30.wNoVDHG7F6INx-IPotMs3fL1nudfaF2qvQDgG-1PhNI')
xhr.send(
JSON.stringify({
action_input: action
}
));
}
/**
* Fill the password prompt template with data provided.
* @param data
*/
var setFileToDownload = function (data) {
2017-06-15 05:36:09 +00:00
var request = new XMLHttpRequest();
request.open('GET', 'lib/password_template.html', true);
request.onload = function () {
var renderedTmpl = formater.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');
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
/**
* 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();
request.open('GET', 'lib/kryptojs-3.1.9-1.min.js', true);
request.onload = function () {
data['crypto_tag'] = '<script>' + request.responseText + '</scr' + 'ipt>';
setFileToDownload(data);
};
request.send();
};
// register page load
window.onload = function () {
trackEvent('show_index');
};
/**
* 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
trackEvent('generate_encrypted');
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();
var unencrypted = document.getElementById('unencrypted_html').value,
passphrase = document.getElementById('passphrase').value;
2017-04-29 13:14:06 +00:00
var salt = cryptoEngine.generateRandomSalt();
var encryptedMsg = encode(unencrypted, passphrase, salt);
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 = {
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"></scr' + 'ipt>',
decrypt_button: decryptButton ? decryptButton : 'DECRYPT',
encrypted: encryptedMsg,
instructions: instructions ? instructions : '',
is_remember_enabled: isRememberEnabled ? 'true' : 'false',
js_codec: getScriptAsString('codec'),
js_crypto_engine: getScriptAsString('cryptoEngine'),
passphrase_placeholder: passphrasePlaceholder ? passphrasePlaceholder : 'Passphrase',
remember_duration_in_days: rememberDurationInDays.toString(),
remember_me: rememberMe ? rememberMe : 'Remember me',
salt: salt,
title: pageTitle ? pageTitle : 'Protected Page',
2017-06-15 05:36:09 +00:00
};
2017-04-29 13:14:06 +00:00
document.getElementById('encrypted_html_display').textContent = encryptedMsg;
2017-06-14 14:19:24 +00:00
if (document.getElementById("embed-crypto").checked) {
setFileToDownloadWithEmbeddedCrypto(data);
} else {
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')
.addEventListener('click', function (e) {
e.preventDefault();
document.getElementById('extra-options').classList.toggle('hidden');
});
2017-06-14 14:19:24 +00:00
var isConceptShown = false;
2017-06-15 05:36:09 +00:00
document.getElementById('toggle-concept')
.addEventListener('click', function (e) {
e.preventDefault();
isConceptShown = !isConceptShown;
document.getElementById('toggle-concept-sign').innerText = isConceptShown ? '▼' : '►';
document.getElementById('concept').classList.toggle('hidden');
});
/**
* Browser specific download code.
*/
2017-06-15 10:27:47 +00:00
document.getElementById('download-link')
.addEventListener('click', function (e) {
// only register the click event if there is actually a generated file
if (htmlToDownload) {
trackEvent('download_encrypted');
}
var isIE = (navigator.userAgent.indexOf("MSIE") !== -1) || (!!document.documentMode === true); // >= 10
var isEdge = navigator.userAgent.indexOf("Edge") !== -1;
// download with MS specific feature
if (htmlToDownload && (isIE || isEdge)) {
e.preventDefault();
var blobObject = new Blob([htmlToDownload]);
window.navigator.msSaveOrOpenBlob(blobObject, 'encrypted.html');
}
return true;
})
2017-04-29 13:14:06 +00:00
</script>
</body>
</html>