2022-02-27 18:37:17 +00:00
<!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 {
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;
}
< / style >
< / head >
< body class = "staticrypt-body" >
< 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="Passphrase"
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 >
< 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 >
2022-11-20 14:25:16 +00:00
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;
2022-02-27 18:37:17 +00:00
// variables to be filled when generating the file
2022-11-20 14:25:16 +00:00
var encryptedMsg = 'ff5ad376d50045dbd99489b68b5eaaca32904aa15ce3ec2a87e3e1ed4a4303b25d9a27ba3fb37cf8cc7a7ebdd075c1ccU2FsdGVkX1+/KUkAwOJH8g3jpasSyXB9awiVeP9zgYmhVwAYRie7BiUsNogQndwHPSSKM4QSfNCPLxrpCyEaPWgPa0+QzYWcMdlgL8GLfrg1h5mvSyQdIpLHLlH55m3DbvcjlITPY4kYY6pXevzhnEDzoDxXhSgLSTKU3NROGOusjQ8S4B4dzExJIq6kifuLceP8eAdHea6M2cmd99/dLQ==',
2022-02-27 18:37:17 +00:00
salt = 'b93bbaf35459951c47721d1f3eaeb5b9',
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) {
2022-11-20 14:25:16 +00:00
var result = decode(encryptedMsg, hashedPassphrase);
if (!result.success) {
2022-02-27 18:37:17 +00:00
return false;
}
2022-11-20 14:25:16 +00:00
var plainHTML = result.decoded;
2022-02-27 18:37:17 +00:00
document.write(plainHTML);
document.close();
return true;
}
/**
* Clear localstorage from staticrypt related values
*/
function clearLocalStorage() {
localStorage.removeItem(rememberPassphraseKey);
localStorage.removeItem(rememberExpirationKey);
}
// try to automatically decrypt on load if there is a saved password
window.onload = function () {
if (isRememberEnabled) {
// 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")) {
return clearLocalStorage();
}
// 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) {
return clearLocalStorage();
}
}
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) {
return clearLocalStorage();
}
}
}
}
// 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
2022-11-20 14:25:16 +00:00
var hashedPassphrase = cryptoEngine.hashPassphrase(passphrase, salt);
2022-02-27 18:37:17 +00:00
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('Bad passphrase!');
}
});
< / script >
< / body >
< / html >
