mirror
/
staticrypt
kopia lustrzana https://github.com/robinmoisson/staticrypt
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Fix all security flaws

pull/155/head
Clyde 2023-02-18 15:19:04 -05:00
rodzic 5dac008ba6
commit 0db18d7216
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: C2BD2985891CD22A
16 zmienionych plików z 0 dodań i 2681 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

159
cli/helpers.js
Wyświetl plik

@ -1,159 +0,0 @@
const fs = require("fs");
const cryptoEngine = require("../lib/cryptoEngine/cryptojsEngine");
const path = require("path");
const {renderTemplate} = require("../lib/formater.js");
const { generateRandomSalt } = cryptoEngine;
/**
* @param {string} message
*/
function exitEarly(message) {
console.log(message);
process.exit(1);
}
exports.exitEarly = exitEarly;
/**
* Check if a particular option has been set by the user. Useful for distinguishing default value with flag without
* parameter.
*
* Ex use case: '-s' means "give me a salt", '-s 1234' means "use 1234 as salt"
*
* From https://github.com/yargs/yargs/issues/513#issuecomment-221412008
*
* @param {string} option
* @param yargs
* @returns {boolean}
*/
function isOptionSetByUser(option, yargs) {
function searchForOption(option) {
return process.argv.indexOf(option) > -1;
}
if (searchForOption(`-${option}`) || searchForOption(`--${option}`)) {
return true;
}
// Handle aliases for same option
for (let aliasIndex in yargs.parsed.aliases[option]) {
const alias = yargs.parsed.aliases[option][aliasIndex];
if (searchForOption(`-${alias}`) || searchForOption(`--${alias}`))
return true;
}
return false;
}
exports.isOptionSetByUser = isOptionSetByUser;
/**
* Get the password from the command arguments
*
* @param {string[]} positionalArguments
* @returns {string}
*/
function getPassword(positionalArguments) {
let password = process.env.STATICRYPT_PASSWORD;
const hasEnvPassword = password !== undefined && password !== "";
if (hasEnvPassword) {
return password;
}
if (positionalArguments.length < 2) {
exitEarly("Missing password: please provide an argument or set the STATICRYPT_PASSWORD environment variable in the environment or .env file");
}
return positionalArguments[1].toString();
}
exports.getPassword = getPassword;
/**
* @param {string} filepath
* @returns {string}
*/
function getFileContent(filepath) {
try {
return fs.readFileSync(filepath, "utf8");
} catch (e) {
exitEarly("Failure: input file does not exist!");
}
}
exports.getFileContent = getFileContent;
/**
* @param {object} namedArgs
* @param {object} config
* @returns {string}
*/
function getSalt(namedArgs, config) {
// either a salt was provided by the user through the flag --salt
if (!!namedArgs.salt) {
return String(namedArgs.salt).toLowerCase();
}
// or try to read the salt from config file
if (config.salt) {
return config.salt;
}
return generateRandomSalt();
}
exports.getSalt = getSalt;
/**
* A dead-simple alternative to webpack or rollup for inlining simple
* CommonJS modules in a browser <script>.
* - Removes all lines containing require().
* - Wraps the module in an immediately invoked function that returns `exports`.
*
* @param {string} modulePath - path from staticrypt root directory
*/
function convertCommonJSToBrowserJS(modulePath) {
const rootDirectory = path.join(__dirname, '..');
const resolvedPath = path.join(rootDirectory, ...modulePath.split("/")) + ".js";
if (!fs.existsSync(resolvedPath)) {
exitEarly(`Failure: could not find module to convert at path "${resolvedPath}"`);
}
const moduleText = fs
.readFileSync(resolvedPath, "utf8")
.replace(/^.*\brequire\(.*$\n/gm, "");
return `
((function(){
const exports = {};
${moduleText}
return exports;
})())
`.trim();
}
exports.convertCommonJSToBrowserJS = convertCommonJSToBrowserJS;
/**
* 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;

208
cli/index.js
Wyświetl plik

@ -1,208 +0,0 @@
#!/usr/bin/env node
"use strict";
const fs = require("fs");
const path = require("path");
const Yargs = require("yargs");
// parse .env file into process.env
require('dotenv').config();
const cryptoEngine = require("../lib/cryptoEngine/cryptojsEngine");
const codec = require("../lib/codec");
const { convertCommonJSToBrowserJS, exitEarly, isOptionSetByUser, genFile, getPassword, getFileContent, getSalt} = require("./helpers");
const { generateRandomSalt } = cryptoEngine;
const { encode } = codec.init(cryptoEngine);
const SCRIPT_URL =
"https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js";
const SCRIPT_TAG =
'<script src="' +
SCRIPT_URL +
'" integrity="sha384-lp4k1VRKPU9eBnPePjnJ9M2RF3i7PC30gXs70+elCVfgwLwx1tv5+ctxdtwxqZa7" crossorigin="anonymous"></script>';
const yargs = Yargs.usage("Usage: staticrypt <filename> [<passphrase>] [options]")
.option("c", {
alias: "config",
type: "string",
describe: 'Path to the config file. Set to "false" to disable.',
default: ".staticrypt.json",
})
.option("decrypt-button", {
type: "string",
describe: 'Label to use for the decrypt button. Default: "DECRYPT".',
default: "DECRYPT",
})
.option("e", {
alias: "embed",
type: "boolean",
describe:
"Whether or not to embed crypto-js in the page (or use an external CDN).",
default: true,
})
.option("f", {
alias: "file-template",
type: "string",
describe: "Path to custom HTML template with passphrase prompt.",
default: path.join(__dirname, "..", "lib", "password_template.html"),
})
.option("i", {
alias: "instructions",
type: "string",
describe: "Special instructions to display to the user.",
default: "",
})
.option("label-error", {
type: "string",
describe: "Error message to display on entering wrong passphrase.",
default: "Bad password!",
})
.option("noremember", {
type: "boolean",
describe: 'Set this flag to remove the "Remember me" checkbox.',
default: false,
})
.option("o", {
alias: "output",
type: "string",
describe: "File name/path for the generated encrypted file.",
default: null,
})
.option("passphrase-placeholder", {
type: "string",
describe: "Placeholder to use for the passphrase input.",
default: "Password",
})
.option("r", {
alias: "remember",
type: "number",
describe:
'Expiration in days of the "Remember me" checkbox that will save the (salted + hashed) passphrase ' +
'in localStorage when entered by the user. Default: "0", no expiration.',
default: 0,
})
.option("remember-label", {
type: "string",
describe: 'Label to use for the "Remember me" checkbox.',
default: "Remember me",
})
// do not give a default option to this parameter - we want to see when the flag is included with no
// value and when it's not included at all
.option("s", {
alias: "salt",
describe:
'Set the salt manually. It should be set if you want to use "Remember me" through multiple pages. It ' +
"needs to be a 32-character-long hexadecimal string.\nInclude the empty flag to generate a random salt you " +
'can use: "statycrypt -s".',
type: "string",
})
// do not give a default option to this parameter - we want to see when the flag is included with no
// value and when it's not included at all
.option("share", {
describe:
'Get a link containing your hashed password that will auto-decrypt the page. Pass your URL as a value to append '
+ '"?staticrypt_pwd=<hashed_pwd>", or leave empty to display the hash to append.',
type: "string",
})
.option("t", {
alias: "title",
type: "string",
describe: "Title for the output HTML page.",
default: "Protected Page",
});
const namedArgs = yargs.argv;
// if the 's' flag is passed without parameter, generate a salt, display & exit
if (isOptionSetByUser("s", yargs) && !namedArgs.salt) {
console.log(generateRandomSalt());
process.exit(0);
}
// validate the number of arguments
const positionalArguments = namedArgs._;
if (positionalArguments.length > 2 || positionalArguments.length === 0) {
Yargs.showHelp();
process.exit(1);
}
// parse input
const inputFilepath = positionalArguments[0].toString(),
password = getPassword(positionalArguments);
// get config file
const isUsingconfigFile = namedArgs.config.toLowerCase() !== "false";
const configPath = "./" + namedArgs.config;
let config = {};
if (isUsingconfigFile && fs.existsSync(configPath)) {
config = JSON.parse(fs.readFileSync(configPath, "utf8"));
}
// get the salt
const salt = getSalt(namedArgs, config);
// validate the salt
if (salt.length !== 32 || /[^a-f0-9]/.test(salt)) {
exitEarly(
"The salt should be a 32 character long hexadecimal string (only [0-9a-f] characters allowed)"
+ "\nDetected salt: " + salt
);
}
// write salt to config file
if (isUsingconfigFile && config.salt !== salt) {
config.salt = salt;
fs.writeFileSync(configPath, JSON.stringify(config, null, 4));
}
// display the share link with the hashed password if the --share flag is set
if (isOptionSetByUser("share", yargs)) {
const url = namedArgs.share || "";
const hashedPassphrase = cryptoEngine.hashPassphrase(password, salt);
console.log(url + "?staticrypt_pwd=" + hashedPassphrase);
}
// get the file content
const contents = getFileContent(inputFilepath);
// encrypt input
const encryptedMessage = encode(contents, password, salt);
// create crypto-js tag (embedded or not)
let cryptoTag = SCRIPT_TAG;
if (namedArgs.embed) {
try {
const embedContents = fs.readFileSync(
path.join(__dirname, "..", "lib", "kryptojs-3.1.9-1.min.js"),
"utf8"
);
cryptoTag = "<script>" + embedContents + "</script>";
} catch (e) {
exitEarly("Failure: embed file does not exist!");
}
}
const data = {
crypto_tag: cryptoTag,
decrypt_button: namedArgs.decryptButton,
embed: namedArgs.embed,
encrypted: encryptedMessage,
instructions: namedArgs.instructions,
is_remember_enabled: namedArgs.noremember ? "false" : "true",
js_codec: convertCommonJSToBrowserJS("lib/codec"),
js_crypto_engine: convertCommonJSToBrowserJS("lib/cryptoEngine/cryptojsEngine"),
label_error: namedArgs.labelError,
passphrase_placeholder: namedArgs.passphrasePlaceholder,
remember_duration_in_days: namedArgs.remember,
remember_me: namedArgs.rememberLabel,
salt: salt,
title: namedArgs.title,
};
const outputFilePath = namedArgs.output !== null
? namedArgs.output
: inputFilepath.replace(/\.html$/, "") + "_encrypted.html";
genFile(data, outputFilePath, namedArgs.f);

3
example/example.html
Wyświetl plik

@ -1,3 +0,0 @@
<h1>Many secrets</h1>
<p>You unlocked me!</p>
<p>Back to <a href="https://robinmoisson.github.com/staticrypt">StatiCrypt</a></p>

498
example/example_encrypted.html
Wyświetl plik

@ -1,498 +0,0 @@
<!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[type="password"] {
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;
cursor: pointer;
}
.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 {
height: 100%;
margin: 0;
}
.staticrypt-content {
height: 100%;
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;
}
.staticrypt-footer a {
text-decoration: none;
}
label.staticrypt-remember {
display: flex;
align-items: center;
margin-bottom: 1em;
}
.staticrypt-remember input[type=checkbox] {
transform: scale(1.5);
margin-right: 1em;
}
.hidden {
display: none !important;
}
.staticrypt-spinner-container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.staticrypt-spinner {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: 0.25em solid gray;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
animation-duration: 0.75s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: spinner-border;
}
@keyframes spinner-border {
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body class="staticrypt-body">
<div id="staticrypt_loading" class="staticrypt-spinner-container">
<div class="staticrypt-spinner"></div>
</div>
<div id="staticrypt_content" class="staticrypt-content hidden">
<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="Password"
autofocus/>
<label id="staticrypt-remember-label" class="staticrypt-remember hidden">
<input id="staticrypt-remember"
type="checkbox"
name="remember"/>
Remember me
</label>
<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>
</div>
<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"></script>
<script>
var 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;
})())
var 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;
})())
var decode = codec.init(cryptoEngine).decode;
// variables to be filled when generating the file
var encryptedMsg = '76c0544deb5605a336e09f4579904448a97a7ed8ad58d764d519a4c4aa10960aa1d943725d76599ecb21a7bf57853aa6U2FsdGVkX1+e6Qjrw0mQlBXmulS5Mga0HtsQ2NiVEV144HhClfGUm9pI28u+7XSraW1jxEIXRDWkcnIEdK98u5eBCC2iMVJneDe/z6Ep3JHuPYIYmRIXzdBUDPUpsnITOz9xpnRrEIPXPuHUExbOzDhNzkiBTvI3pjpJwl51ApCxRU/THans3lzSb2NldDNxInogvY5IRcY8Z63tJMtsvQ==',
salt = 'b93bbaf35459951c47721d1f3eaeb5b9',
labelError = 'Bad password!',
isRememberEnabled = true,
rememberDurationInDays = 0; // 0 means forever
// constants
var rememberPassphraseKey = 'staticrypt_passphrase',
rememberExpirationKey = 'staticrypt_expiration';
/**
* Decrypt our encrypted page, replace the whole HTML.
*
* @param hashedPassphrase
* @returns
*/
function decryptAndReplaceHtml(hashedPassphrase) {
var result = decode(encryptedMsg, hashedPassphrase);
if (!result.success) {
return false;
}
var plainHTML = result.decoded;
document.write(plainHTML);
document.close();
return true;
}
/**
* Clear localstorage from staticrypt related values
*/
function clearLocalStorage() {
localStorage.removeItem(rememberPassphraseKey);
localStorage.removeItem(rememberExpirationKey);
}
/**
* To be called on load: check if we want to try to decrypt and replace the HTML with the decrypted content, and
* try to do it if needed.
*
* @returns true if we derypted and replaced the whole page, false otherwise
*/
function decryptOnLoadFromRememberMe() {
if (!isRememberEnabled) {
return false;
}
// show the remember me checkbox
document.getElementById('staticrypt-remember-label').classList.remove('hidden');
// if we are login out, clear the storage and terminate
var queryParams = new URLSearchParams(window.location.search);
if (queryParams.has("staticrypt_logout")) {
clearLocalStorage();
return false;
}
// if there is expiration configured, check if we're not beyond the expiration
if (rememberDurationInDays && rememberDurationInDays > 0) {
var expiration = localStorage.getItem(rememberExpirationKey),
isExpired = expiration && new Date().getTime() > parseInt(expiration);
if (isExpired) {
clearLocalStorage();
return false;
}
}
var hashedPassphrase = localStorage.getItem(rememberPassphraseKey);
if (hashedPassphrase) {
// try to decrypt
var isDecryptionSuccessful = decryptAndReplaceHtml(hashedPassphrase);
// if the decryption is unsuccessful the password might be wrong - silently clear the saved data and let
// the user fill the password form again
if (!isDecryptionSuccessful) {
clearLocalStorage();
return false;
}
return true;
}
return false;
}
function decryptOnLoadFromQueryParam() {
var queryParams = new URLSearchParams(window.location.search);
var hashedPassphrase = queryParams.get("staticrypt_pwd");
if (hashedPassphrase) {
return decryptAndReplaceHtml(hashedPassphrase);
}
return false;
}
// try to automatically decrypt on load if there is a saved password
window.onload = function () {
var hasDecrypted = decryptOnLoadFromQueryParam();
if (!hasDecrypted) {
hasDecrypted = decryptOnLoadFromRememberMe();
}
// if we didn't decrypt anything, show the password prompt. Otherwise the content has already been replaced, no
// need to do anything
if (!hasDecrypted) {
document.getElementById("staticrypt_loading").classList.add("hidden");
document.getElementById("staticrypt_content").classList.remove("hidden");
document.getElementById("staticrypt-password").focus();
}
}
// handle password form submission
document.getElementById('staticrypt-form').addEventListener('submit', function (e) {
e.preventDefault();
var passphrase = document.getElementById('staticrypt-password').value,
shouldRememberPassphrase = document.getElementById('staticrypt-remember').checked;
// decrypt and replace the whole page
var hashedPassphrase = cryptoEngine.hashPassphrase(passphrase, salt);
var isDecryptionSuccessful = decryptAndReplaceHtml(hashedPassphrase);
if (isDecryptionSuccessful) {
// remember the hashedPassphrase and set its expiration if necessary
if (isRememberEnabled && shouldRememberPassphrase) {
window.localStorage.setItem(rememberPassphraseKey, hashedPassphrase);
// set the expiration if the duration isn't 0 (meaning no expiration)
if (rememberDurationInDays > 0) {
window.localStorage.setItem(
rememberExpirationKey,
(new Date().getTime() + rememberDurationInDays * 24 * 60 * 60 * 1000).toString()
);
}
}
} else {
alert(labelError);
}
});
</script>
</body>
</html>

536
index.html
Wyświetl plik

@ -1,536 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>StatiCrypt: Password protect static HTML</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"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
a.no-style {
color: inherit;
text-decoration: inherit;
}
body {
font-size: 16px;
}
label.no-style {
font-weight: normal;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<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>
<p>
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>).
</p>
<p>
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>
<br>
<h4>
<a class="no-style" id="toggle-concept" href="#">
<span id="toggle-concept-sign">►</span> HOW IT WORKS
</a>
</h4>
<div id="concept" class="hidden">
<p>
<b class="text-danger">Disclaimer</b> if you have extra sensitive banking data, you should probably
use something else!
</p>
<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 example)
and you're done: the javascript will prompt users for password, decrypt the page and load your HTML.
</p>
<p>
It basically encrypts your page and puts 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/dictionary attacks would be trivial to
do at a really fast pace: use a long, unusual passphrase!</b>
</p>
<p>
Feel free to contribute or report any thought to the
<a href="https://github.com/robinmoisson/staticrypt">GitHub project</a>!
</p>
</div>
<br>
</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">
<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 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>
<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 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"
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>
<button class="btn btn-primary pull-right" type="submit">Generate passphrase protected HTML</button>
</form>
</div>
</div>
<div class="row mb-5">
<div class="col-xs-12">
<h2>Encrypted HTML</h2>
<p><a class="btn btn-success download"
download="encrypted.html"
id="download-link"
disabled="disabled">Download html file with password prompt</a></p>
<pre id="encrypted_html_display">
Your encrypted string</pre>
</div>
</div>
</div>
<!--
Filename changed to circumvent adblockers that mistake it for a crypto miner (see https://github.com/robinmoisson/staticrypt/issues/107)
-->
<script src="lib/kryptojs-3.1.9-1.min.js"></script>
<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 = {};
/**
* 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(/{\s*(\w+)\s*}/g, function (_, key) {
if (data && data[key] !== undefined) {
return data[key];
}
return "";
});
}
exports.renderTemplate = renderTemplate;
return exports;
})())
</script>
<script>
var encode = codec.init(cryptoEngine).encode;
// enable CKEDIRTOR
CKEDITOR.replace('instructions');
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+ = /, '');
}
/**
* 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) {
var request = new XMLHttpRequest();
request.open('GET', 'lib/password_template.html', true);
request.onload = function () {
var renderedTmpl = formater.renderTemplate(request.responseText, data);
var downloadLink = document.querySelector('a.download');
downloadLink.href = 'data:text/html,' + encodeURIComponent(renderedTmpl);
downloadLink.removeAttribute('disabled');
htmlToDownload = renderedTmpl;
};
request.send();
};
/**
* 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.
*/
document.getElementById('encrypt_form').addEventListener('submit', function (e) {
e.preventDefault();
trackEvent('generate_encrypted');
// 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;
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;
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',
};
document.getElementById('encrypted_html_display').textContent = encryptedMsg;
if (document.getElementById("embed-crypto").checked) {
setFileToDownloadWithEmbeddedCrypto(data);
} else {
setFileToDownload(data);
}
});
document.getElementById('toggle-extra-option')
.addEventListener('click', function (e) {
e.preventDefault();
document.getElementById('extra-options').classList.toggle('hidden');
});
var isConceptShown = false;
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.
*/
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;
})
</script>
</body>
</html>

55
lib/codec.js
Wyświetl plik

@ -1,55 +0,0 @@
/**
* 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;

70
lib/cryptoEngine/cryptojsEngine.js
Wyświetl plik

@ -1,70 +0,0 @@
const CryptoJS = require("crypto-js");
/**
* 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;

19
lib/formater.js
Wyświetl plik

@ -1,19 +0,0 @@
/**
* 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(/{\s*(\w+)\s*}/g, function (_, key) {
if (data && data[key] !== undefined) {
return data[key];
}
return "";
});
}
exports.renderTemplate = renderTemplate;

7
lib/kryptojs-3.1.9-1.min.js vendored
Wyświetl plik

File diff suppressed because one or more lines are too long

366
lib/password_template.html
Wyświetl plik

@ -1,366 +0,0 @@
<!doctype html>
<html class="staticrypt-html">
<head>
<meta charset="utf-8">
<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>
.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[type="password"] {
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;
cursor: pointer;
}
.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 {
height: 100%;
margin: 0;
}
.staticrypt-content {
height: 100%;
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;
}
.staticrypt-footer a {
text-decoration: none;
}
label.staticrypt-remember {
display: flex;
align-items: center;
margin-bottom: 1em;
}
.staticrypt-remember input[type=checkbox] {
transform: scale(1.5);
margin-right: 1em;
}
.hidden {
display: none !important;
}
.staticrypt-spinner-container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.staticrypt-spinner {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: 0.25em solid gray;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
animation-duration: 0.75s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: spinner-border;
}
@keyframes spinner-border {
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body class="staticrypt-body">
<div id="staticrypt_loading" class="staticrypt-spinner-container">
<div class="staticrypt-spinner"></div>
</div>
<div id="staticrypt_content" class="staticrypt-content hidden">
<div class="staticrypt-page">
<div class="staticrypt-form">
<div class="staticrypt-instructions">
<p class="staticrypt-title">{title}</p>
<p>{instructions}</p>
</div>
<hr class="staticrypt-hr">
<form id="staticrypt-form" action="#" method="post">
<input id="staticrypt-password"
type="password"
name="password"
placeholder="{passphrase_placeholder}"
autofocus/>
<label id="staticrypt-remember-label" class="staticrypt-remember hidden">
<input id="staticrypt-remember"
type="checkbox"
name="remember"/>
{remember_me}
</label>
<input type="submit" class="staticrypt-decrypt-button" value="{decrypt_button}"/>
</form>
</div>
</div>
<footer class="staticrypt-footer">
<p class="pull-right">Created with <a href="https://robinmoisson.github.io/staticrypt">StatiCrypt</a></p>
</footer>
</div>
{crypto_tag}
<script>
var cryptoEngine = {js_crypto_engine}
var codec = {js_codec}
var decode = codec.init(cryptoEngine).decode;
// variables to be filled when generating the file
var encryptedMsg = '{encrypted}',
salt = '{salt}',
labelError = '{label_error}',
isRememberEnabled = {is_remember_enabled},
rememberDurationInDays = {remember_duration_in_days}; // 0 means forever
// constants
var rememberPassphraseKey = 'staticrypt_passphrase',
rememberExpirationKey = 'staticrypt_expiration';
/**
* Decrypt our encrypted page, replace the whole HTML.
*
* @param {string} hashedPassphrase
* @returns {boolean}
*/
function decryptAndReplaceHtml(hashedPassphrase) {
var result = decode(encryptedMsg, hashedPassphrase);
if (!result.success) {
return false;
}
var plainHTML = result.decoded;
document.write(plainHTML);
document.close();
return true;
}
/**
* Clear localstorage from staticrypt related values
*/
function clearLocalStorage() {
localStorage.removeItem(rememberPassphraseKey);
localStorage.removeItem(rememberExpirationKey);
}
/**
* To be called on load: check if we want to try to decrypt and replace the HTML with the decrypted content, and
* try to do it if needed.
*
* @returns {boolean} true if we derypted and replaced the whole page, false otherwise
*/
function decryptOnLoadFromRememberMe() {
if (!isRememberEnabled) {
return false;
}
// show the remember me checkbox
document.getElementById('staticrypt-remember-label').classList.remove('hidden');
// if we are login out, clear the storage and terminate
var queryParams = new URLSearchParams(window.location.search);
if (queryParams.has("staticrypt_logout")) {
clearLocalStorage();
return false;
}
// if there is expiration configured, check if we're not beyond the expiration
if (rememberDurationInDays && rememberDurationInDays > 0) {
var expiration = localStorage.getItem(rememberExpirationKey),
isExpired = expiration && new Date().getTime() > parseInt(expiration);
if (isExpired) {
clearLocalStorage();
return false;
}
}
var hashedPassphrase = localStorage.getItem(rememberPassphraseKey);
if (hashedPassphrase) {
// try to decrypt
var isDecryptionSuccessful = decryptAndReplaceHtml(hashedPassphrase);
// if the decryption is unsuccessful the password might be wrong - silently clear the saved data and let
// the user fill the password form again
if (!isDecryptionSuccessful) {
clearLocalStorage();
return false;
}
return true;
}
return false;
}
function decryptOnLoadFromQueryParam() {
var queryParams = new URLSearchParams(window.location.search);
var hashedPassphrase = queryParams.get("staticrypt_pwd");
if (hashedPassphrase) {
return decryptAndReplaceHtml(hashedPassphrase);
}
return false;
}
// try to automatically decrypt on load if there is a saved password
window.onload = function () {
var hasDecrypted = decryptOnLoadFromQueryParam();
if (!hasDecrypted) {
hasDecrypted = decryptOnLoadFromRememberMe();
}
// if we didn't decrypt anything, show the password prompt. Otherwise the content has already been replaced, no
// need to do anything
if (!hasDecrypted) {
document.getElementById("staticrypt_loading").classList.add("hidden");
document.getElementById("staticrypt_content").classList.remove("hidden");
document.getElementById("staticrypt-password").focus();
}
}
// handle password form submission
document.getElementById('staticrypt-form').addEventListener('submit', function (e) {
e.preventDefault();
var passphrase = document.getElementById('staticrypt-password').value,
shouldRememberPassphrase = document.getElementById('staticrypt-remember').checked;
// decrypt and replace the whole page
var hashedPassphrase = cryptoEngine.hashPassphrase(passphrase, salt);
var isDecryptionSuccessful = decryptAndReplaceHtml(hashedPassphrase);
if (isDecryptionSuccessful) {
// remember the hashedPassphrase and set its expiration if necessary
if (isRememberEnabled && shouldRememberPassphrase) {
window.localStorage.setItem(rememberPassphraseKey, hashedPassphrase);
// set the expiration if the duration isn't 0 (meaning no expiration)
if (rememberDurationInDays > 0) {
window.localStorage.setItem(
rememberExpirationKey,
(new Date().getTime() + rememberDurationInDays * 24 * 60 * 60 * 1000).toString()
);
}
}
} else {
alert(labelError);
}
});
</script>
</body>
</html>

317
package-lock.json wygenerowano
Wyświetl plik

@ -1,317 +0,0 @@
{
"name": "staticrypt",
"version": "2.3.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "staticrypt",
"version": "2.3.4",
"license": "MIT",
"dependencies": {
"crypto-js": "3.1.9-1",
"dotenv": "^16.0.3",
"yargs": ">=10.0.3"
},
"bin": {
"staticrypt": "cli/index.js"
}
},
"node_modules/ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"engines": {
"node": ">=8"
}
},
"node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"dependencies": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"node_modules/crypto-js": {
"version": "3.1.9-1",
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.1.9-1.tgz",
"integrity": "sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg="
},
"node_modules/dotenv": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
"integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
"engines": {
"node": ">=12"
}
},
"node_modules/emoji-regex": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
},
"node_modules/escalade": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
"engines": {
"node": ">=6"
}
},
"node_modules/get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
"engines": {
"node": "6.* || 8.* || >= 10.*"
}
},
"node_modules/is-fullwidth-code-point": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
"engines": {
"node": ">=8"
}
},
"node_modules/require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
"dependencies": {
"emoji-regex": "^8.0.0",
"is-fullwidth-code-point": "^3.0.0",
"strip-ansi": "^6.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dependencies": {
"ansi-regex": "^5.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"dependencies": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
}
},
"node_modules/y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
"engines": {
"node": ">=10"
}
},
"node_modules/yargs": {
"version": "17.3.1",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.3.1.tgz",
"integrity": "sha512-WUANQeVgjLbNsEmGk20f+nlHgOqzRFpiGWVaBrYGYIGANIIu3lWjoyi0fNlFmJkvfhCZ6BXINe7/W2O2bV4iaA==",
"dependencies": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.3",
"y18n": "^5.0.5",
"yargs-parser": "^21.0.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/yargs-parser": {
"version": "21.0.0",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.0.tgz",
"integrity": "sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA==",
"engines": {
"node": ">=12"
}
}
},
"dependencies": {
"ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"requires": {
"color-convert": "^2.0.1"
}
},
"cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"requires": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"crypto-js": {
"version": "3.1.9-1",
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.1.9-1.tgz",
"integrity": "sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg="
},
"dotenv": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
"integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ=="
},
"emoji-regex": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
},
"escalade": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
},
"get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
},
"is-fullwidth-code-point": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
},
"require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
},
"string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
"requires": {
"emoji-regex": "^8.0.0",
"is-fullwidth-code-point": "^3.0.0",
"strip-ansi": "^6.0.1"
}
},
"strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"requires": {
"ansi-regex": "^5.0.1"
}
},
"wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"requires": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
}
},
"y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
},
"yargs": {
"version": "17.3.1",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.3.1.tgz",
"integrity": "sha512-WUANQeVgjLbNsEmGk20f+nlHgOqzRFpiGWVaBrYGYIGANIIu3lWjoyi0fNlFmJkvfhCZ6BXINe7/W2O2bV4iaA==",
"requires": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.3",
"y18n": "^5.0.5",
"yargs-parser": "^21.0.0"
}
},
"yargs-parser": {
"version": "21.0.0",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.0.tgz",
"integrity": "sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA=="
}
}
}

42
package.json
Wyświetl plik

@ -1,42 +0,0 @@
{
"name": "staticrypt",
"version": "2.3.5",
"description": "Based on the [crypto-js](https://github.com/brix/crypto-js) library, StatiCrypt uses AES-256 to encrypt your input with your passphrase and put it in a HTML file with a password prompt that can decrypted in-browser (client side).",
"main": "index.js",
"files": [
"/cli",
"/lib"
],
"bin": {
"staticrypt": "./cli/index.js"
},
"dependencies": {
"crypto-js": "3.1.9-1",
"dotenv": "^16.0.3",
"yargs": ">=10.0.3"
},
"author": "Robin Moisson (https://github.com/robinmoisson)",
"contributors": [
"Aaron Coplan (https://github.com/AaronCoplan)"
],
"license": "MIT",
"scripts": {
"build": "bash ./scripts/build.sh"
},
"repository": {
"type": "git",
"url": "git+https://github.com/robinmoisson/staticrypt.git"
},
"keywords": [
"static",
"html",
"password",
"protected",
"encrypted",
"encryption"
],
"bugs": {
"url": "https://github.com/robinmoisson/staticrypt/issues"
},
"homepage": "https://github.com/robinmoisson/staticrypt"
}

BIN
preview.png
Wyświetl plik

Plik binarny nie jest wyświetlany.
Side by Side

Przed

Szerokość:  |  Wysokość:  |  Rozmiar: 38 KiB

11
scripts/build.sh
Wyświetl plik

@ -1,11 +0,0 @@
# Build the website files
# Should be run with "npm run build" - npm handles the pathing better (so no "#!/usr/bin/env" bash on top)
# encrypt the example file
npx . example/example.html test \
--no-embed \
--salt b93bbaf35459951c47721d1f3eaeb5b9 \
--instructions "Enter \"test\" to unlock the page"
# build the index.html file
node ./scripts/buildIndex.js

9
scripts/buildIndex.js
Wyświetl plik

@ -1,9 +0,0 @@
const { convertCommonJSToBrowserJS, genFile } = require("../cli/helpers.js");
const data = {
js_codec: convertCommonJSToBrowserJS("lib/codec"),
js_crypto_engine: convertCommonJSToBrowserJS("lib/cryptoEngine/cryptojsEngine"),
js_formater: convertCommonJSToBrowserJS("lib/formater"),
};
genFile(data, "./index.html", "./scripts/index_template.html");

381
scripts/index_template.html
Wyświetl plik

@ -1,381 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>StatiCrypt: Password protect static HTML</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"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
a.no-style {
color: inherit;
text-decoration: inherit;
}
body {
font-size: 16px;
}
label.no-style {
font-weight: normal;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<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>
<p>
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>).
</p>
<p>
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>
<br>
<h4>
<a class="no-style" id="toggle-concept" href="#">
<span id="toggle-concept-sign">►</span> HOW IT WORKS
</a>
</h4>
<div id="concept" class="hidden">
<p>
<b class="text-danger">Disclaimer</b> if you have extra sensitive banking data, you should probably
use something else!
</p>
<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 example)
and you're done: the javascript will prompt users for password, decrypt the page and load your HTML.
</p>
<p>
It basically encrypts your page and puts 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/dictionary attacks would be trivial to
do at a really fast pace: use a long, unusual passphrase!</b>
</p>
<p>
Feel free to contribute or report any thought to the
<a href="https://github.com/robinmoisson/staticrypt">GitHub project</a>!
</p>
</div>
<br>
</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">
<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 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>
<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 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"
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>
<button class="btn btn-primary pull-right" type="submit">Generate passphrase protected HTML</button>
</form>
</div>
</div>
<div class="row mb-5">
<div class="col-xs-12">
<h2>Encrypted HTML</h2>
<p><a class="btn btn-success download"
download="encrypted.html"
id="download-link"
disabled="disabled">Download html file with password prompt</a></p>
<pre id="encrypted_html_display">
Your encrypted string</pre>
</div>
</div>
</div>
<!--
Filename changed to circumvent adblockers that mistake it for a crypto miner (see https://github.com/robinmoisson/staticrypt/issues/107)
-->
<script src="lib/kryptojs-3.1.9-1.min.js"></script>
<script src="https://cdn.ckeditor.com/4.7.0/standard/ckeditor.js"></script>
<script id="cryptoEngine">
window.cryptoEngine = {js_crypto_engine}
</script>
<script id="codec">
window.codec = {js_codec}
</script>
<script id="formater">
window.formater = {js_formater}
</script>
<script>
var encode = codec.init(cryptoEngine).encode;
// enable CKEDIRTOR
CKEDITOR.replace('instructions');
var htmlToDownload;
/**
* Extract js code from <script> tag and return it as a string
*
* @param {string} id
* @returns {string}
*/
var getScriptAsString = function (id) {
return document.getElementById(id)
.innerText.replace(/window\.\w+ = /, '');
}
/**
* Register something happened - this uses a simple Supabase function to implement a counter, and allows use to drop
* google analytics.
*
* @param {string} 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) {
var request = new XMLHttpRequest();
request.open('GET', 'lib/password_template.html', true);
request.onload = function () {
var renderedTmpl = formater.renderTemplate(request.responseText, data);
var downloadLink = document.querySelector('a.download');
downloadLink.href = 'data:text/html,' + encodeURIComponent(renderedTmpl);
downloadLink.removeAttribute('disabled');
htmlToDownload = renderedTmpl;
};
request.send();
};
/**
* 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.
*/
document.getElementById('encrypt_form').addEventListener('submit', function (e) {
e.preventDefault();
trackEvent('generate_encrypted');
// 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;
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;
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',
};
document.getElementById('encrypted_html_display').textContent = encryptedMsg;
if (document.getElementById("embed-crypto").checked) {
setFileToDownloadWithEmbeddedCrypto(data);
} else {
setFileToDownload(data);
}
});
document.getElementById('toggle-extra-option')
.addEventListener('click', function (e) {
e.preventDefault();
document.getElementById('extra-options').classList.toggle('hidden');
});
var isConceptShown = false;
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.
*/
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;
})
</script>
</body>
</html>