Menu

Enter Password

<!-- https://www.maxlaumeister.com/code/clientside-html-password/ -->
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
#dialogText {
padding: 10px 30px;
color: white;
background-color: #333333;
}

#dialogWrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: table;
background-color: #EEEEEE;
}

#dialogWrapCell {
display: table-cell;
text-align: center;
vertical-align: middle;
}

#mainDialog {
width: 500px;
border: solid #AAAAAA 1px;
border-radius: 10px;
box-shadow: 3px 3px 5px 3px #AAAAAA;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
overflow: hidden;
text-align: left;
}
#passArea {
padding: 20px 30px;
background-color: white;
}
#passArea > * {
margin: 5px auto;
}
#pass {
width: 100%;
height: 40px;
font-size: 30px;
}

#messageWrapper {
float: left;
vertical-align: middle;
line-height: 30px;
}

.notifyText {
display: none;
}

#invalidPass {
color: red;
}

#success {
color: green;
}

#submitPass {
font-size: 20px;
border-radius: 5px;
background-color: #E7E7E7;
border: solid gray 1px;
float: right;
}
#contentFrame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

<iframe id="contentFrame" frameBorder="0"></iframe>
<div id="dialogWrap">
<div id="dialogWrapCell">
<div id="mainDialog">
<div id="dialogText">This page is password protected.</div>
<div id="passArea">
<p id="passwordPrompt">Password</p>
<input id="pass" type="password" name="pass">
<div>
<span id="messageWrapper">
<span id="invalidPass" class="notifyText">Sorry, please try again.</span>
<span id="success" class="notifyText">Success!</span>
&nbsp;
</span>
<button id="submitPass" type="button">Submit</button>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/pbkdf2.js"></script>
<script>
/*! srcdoc-polyfill - v0.1.1 - 2013-03-01
* http://github.com/jugglinmike/srcdoc-polyfill/
* Copyright (c) 2013 Mike Pennisi; Licensed MIT */
(function( window, document, undefined ) {

var idx, iframes;
var _srcDoc = window.srcDoc;
var isCompliant = !!("srcdoc" in document.createElement("iframe"));
var implementations = {
compliant: function( iframe, content ) {

if (content) {
iframe.setAttribute("srcdoc", content);
}
},
legacy: function( iframe, content ) {

var jsUrl;

if (!iframe || !iframe.getAttribute) {
return;
}

if (!content) {
content = iframe.getAttribute("srcdoc");
} else {
iframe.setAttribute("srcdoc", content);
}

if (content) {
// The value returned by a script-targeted URL will be used as
// the iFrame's content. Create such a URL which returns the
// iFrame element's `srcdoc` attribute.
jsUrl = "javascript: window.frameElement.getAttribute('srcdoc');";

iframe.setAttribute("src", jsUrl);

// Explicitly set the iFrame's window.location for
// compatability with IE9, which does not react to changes in
// the `src` attribute when it is a `javascript:` URL, for
// some reason
if (iframe.contentWindow) {
iframe.contentWindow.location = jsUrl;
}
}
}
};
var srcDoc = window.srcDoc = {
// Assume the best
set: implementations.compliant,
noConflict: function() {
window.srcDoc = _srcDoc;
return srcDoc;
}
};

// If the browser supports srcdoc, no shimming is necessary
if (isCompliant) {
return;
}

srcDoc.set = implementations.legacy;

// Automatically shim any iframes already present in the document
iframes = document.getElementsByTagName("iframe");
idx = iframes.length;

while (idx--) {
srcDoc.set( iframes[idx] );
}

}( this, this.document ));
</script>
<script>
var pl = {"salt":"upMSXIPf1PrkZ9HLCoVWrXKaVJMsgESDIjqnE2t8Myo=","iv":"mAkrn7uAvVMBqkRK1Mhm5A==","data":"U5XxVj5liIsJxVJGqk9UkBlQWlLgHTW3QW91aDSe+fl6SCrCARsd+GLi7YdHH8h/xU5GHBLU/3KhkLQ07XDYzRfsct8DFRBiAuUnlWiNq3CBoozu8Zr48kyazUaFhya21gomef9PK4aMoBBwsOYjZ5qu7voUmaQa2B1gnNWSRpUppHkue09I7f5o3oh/z1CvPVqdVYDCMlFqrvo/YBtSCYKoHDe97opwhVaPSxA4PNw="};

var submitPass = document.getElementById('submitPass');
var passEl = document.getElementById('pass');
var invalidPassEl = document.getElementById('invalidPass');
var successEl = document.getElementById('success');
var contentFrame = document.getElementById('contentFrame');

if (pl === "") {
submitPass.disabled = true;
passEl.disabled = true;
alert("This page is meant to be used with the encryption tool. It doesn't work standalone.");
}

function doSubmit(evt) {
try {
var decrypted = decryptFile(CryptoJS.enc.Base64.parse(pl.data), passEl.value, CryptoJS.enc.Base64.parse(pl.salt), CryptoJS.enc.Base64.parse(pl.iv));
if (decrypted === "") throw "No data returned";

// Set default iframe link targets to _top so all links break out of the iframe
decrypted = decrypted.replace("<head>", "<head><base href=\".\" target=\"_top\">");

srcDoc.set(contentFrame, decrypted);

successEl.style.display = "inline";
passEl.disabled = true;
submitPass.disabled = true;
setTimeout(function() {
dialogWrap.style.display = "none";
}, 1000);
} catch (e) {
invalidPassEl.style.display = "inline";
passEl.value = "";
}
}

submitPass.onclick = doSubmit;
passEl.onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
invalidPassEl.style.display = "none";
if (keyCode == '13'){
// Enter pressed
doSubmit();
return false;
}
}

function decryptFile(contents, password, salt, iv) {
var _cp = CryptoJS.lib.CipherParams.create({
ciphertext: contents
});
var key = CryptoJS.PBKDF2(password, salt, { keySize: 256/32, iterations: 100 });
var decrypted = CryptoJS.AES.decrypt(_cp, key, {iv: iv});

return decrypted.toString(CryptoJS.enc.Utf8);
}
</script>