Cifrar página HTML con una contraseña prompt-StatiCrypt

Vista prévia

Descripción

El StatiCrypt le permite cifrar sus cadenas de & HTML utilizando < a href = "https://en.wikipedia.org/wiki/Advanced_Encryption_Standard" target = "_ blank" rel = "noopener noreferrer" > AES-256 , que se puede utilizar para proteger su página HTML con un prompt de contraseña.

Funcionamiento

Cargue la biblioteca Crypto-JS necesaria en su página HTML.

<script src="//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"




integrity="sha384-lp4k1VRKPU9eBnPePjnJ9M2RF3i7PC30gXs70+elCVfgwLwx1tv5+ctxdtwxqZa7"




crossorigin="anonymous"></script>

El ejemplo de JavaScript.

var htmlToDownload;

var renderTemplate = function (tpl, data) {

return tpl.replace(/{(.*?)}/g, function (_, key) {



return data && data[key] || '';

});
};

/**
* Fill the password prompt template with data provided.
* @param data
*/
var setFileToDownload = function (data) {

var request = new XMLHttpRequest();

request.open('GET', 'password_template.html', true);

request.onload = function() {



var renderedTmpl = 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', 'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js', true);

request.onload = function() {



data['crypto_tag'] = '<script>' + request.responseText + '</scr' + 'ipt>';



setFileToDownload(data);

};

request.send();
};

/**
* Handle form submission.
*/
document.getElementById('encrypt_form').addEventListener('submit', function (e) {

e.preventDefault();


var unencrypted = document.getElementById('unencrypted_html').value;

var passphrase = document.getElementById('passphrase').value;


var encrypted = CryptoJS.AES.encrypt(unencrypted, passphrase);

var hmac = CryptoJS.HmacSHA256(encrypted.toString(), CryptoJS.SHA256(passphrase)).toString();

var encryptedMsg = hmac + encrypted;


var pageTitle = document.getElementById('title').value.trim();

var instructions = document.getElementById('instructions').value;

var data = {



title: pageTitle ? pageTitle : 'Protected Page',



instructions: instructions ? instructions : '',



encrypted: encryptedMsg,



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>'

};


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');
});

document.getElementById('toggle-concept')
.addEventListener('click', function (e) {

e.preventDefault();

document.getElementById('concept').classList.toggle('hidden');
});


/**
* Browser specific download code.
*/
document.getElementById('download-link')

.addEventListener('click', function (e) {


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;
})

Registro de cambios

10/04/2018

• usar un archivo con nombre personalizado para Crypto-JS en lugar de CDN