Encrypt HTML Page With A Password Prompt – StatiCrypt

Preview:

Description:

The StatiCrypt enables you to encrypt your html & strings using AES-256, which can be used to protect your html page with a password prompt.

How to use it:

Load the necessary crypto-js library in your html page.

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

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

Changelog:

10/04/2018

• use custom named file for crypto-js instead of cdn