Running code after decrypting a HMAC file

420Ayan420 · November 2, 2023, 6:14pm

Hello!

I have been using crypto.js to password protect some aspects of my website at Additional Material | Ayan Ali

I have been running into some trouble that after enter the correct password developerPassword42069, the plaintext of the code is simple shown rather than the result of the execution of the code.

This is my code to encrypt files:

---
layout: post
---
<img src="{{ site.url }}{{ site.baseurl }}/assets/images/maps 1 cropped.png" alt="logo" class="align-center" style="margin-bottom: 10px;">

<style>
  /* Define CSS rules for the outer container */
  #content_container {
    background-color: #283741; /* Set the background color */
    border-radius: 10px; /* Add rounded corners to the container */
    padding: 20px; /* Add padding to the container */
  }

  /* Style for the input box */
  #encrypt_password {
    width: 70%; /* Set the width to 70% of the container */
    padding: 10px; /* Add padding for spacing */
    border-radius: 5px; /* Add rounded corners to the input box */
    margin-bottom: 10px; /* Add space below the input */
    float: left; /* Float the input box to the left */
    border: none; /* Remove any border */
    outline: none; /* Remove the default outline */
    transition: background-color 0.5s ease, opacity 0.5s ease; /* Add transitions for smooth changes */
  }

  /* Style for the unlock button */
  #unlock_button {
    width: 28%; /* Set the width to 28% of the container */
    padding: 10px; /* Add padding for spacing */
    border-radius: 5px; /* Add rounded corners to the button */
    float: left; /* Float the button to the left */
    margin-left: 2%; /* Add a little space between the input and the button */
    border: none; /* Remove any border */
    outline: none; /* Remove the default outline */
    transition: opacity 0.5s ease; /* Add a transition for smooth fade-in/out */
  }

  /* Clear the float to prevent layout issues */
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }

  .content-container {
    border-radius: 10px; /* Add rounded corners to the container */
    padding: 20px; /* Add padding to the container */
    margin-bottom: 20px; /* Add bottom margin to create space between container and text below */
    animation: breathing 2s infinite; /* Apply the breathing animation */
  }

  @keyframes breathing {
    0% {
      background-color: #5D676E; /* Start with red */
    }
    50% {
      background-color: #51454C; /* Transition to yellow at 50% */
    }
    100% {
      background-color: #5D676E; /* Return to red at 100% */
    }
  }
</style>

<div id="content_container">
  <div class="content-container">
    Password is the bold section of Common App Additional Information Section.
  </div>
  <form id="encrypt_form" action="#" method="post" class="clearfix" style="margin-top: 20px;"> <!-- Add margin-top for spacing -->
    <input id="encrypt_password"
           type="password"
           name="password"
           placeholder="Enter password"
           autofocus />
    <input id="unlock_button" type="submit" value="Unlock"/> <!-- Move the button to the right -->
  </form>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
<script>
  document.getElementById('encrypt_form').addEventListener('submit', function(e) {
    e.preventDefault();
    var passphrase = document.getElementById('encrypt_password').value,
        encryptedMsgs = [
          '{{ page.encrypted1 }}',
          '{{ page.encrypted2 }}',
          '{{ page.encrypted3 }}',
          '{{ page.encrypted4 }}',
          '{{ page.encrypted5 }}',
          '{{ page.encrypted6 }}',
          '{{ page.encrypted7 }}',
          '{{ page.encrypted8 }}',
          '{{ page.encrypted9 }}',
          '{{ page.encrypted10 }}',
          '{{ page.encrypted11 }}',
          '{{ page.encrypted12 }}',
          '{{ page.encrypted13 }}',
          '{{ page.encrypted14 }}',
          '{{ page.encrypted15 }}',
          '{{ page.encrypted16 }}',
          '{{ page.encrypted17 }}',
          '{{ page.encrypted18 }}',
          '{{ page.encrypted19 }}',
          '{{ page.encrypted20 }}',
        ];

    var decryptedHTML = null;

    for (var i = 0; i < encryptedMsgs.length; i++) {
      var encryptedMsg = encryptedMsgs[i];
      var encryptedHMAC = encryptedMsg.substring(0, 64);
      var encryptedHTML = encryptedMsg.substring(64);
      var decryptedHMAC = CryptoJS.HmacSHA256(encryptedHTML, CryptoJS.SHA256(passphrase).toString()).toString();

      if (decryptedHMAC === encryptedHMAC) {
        // Password matched, decrypt and display the content
        decryptedHTML = CryptoJS.AES.decrypt(encryptedHTML, passphrase).toString(CryptoJS.enc.Utf8);
        break;
      }
    }

    if (decryptedHTML) {
      // Change the background color of the input box to green to indicate a correct password immediately
      document.getElementById('encrypt_password').style.backgroundColor = '#82FF82';
      // Hide the input box and unlock button with a fade-out effect
      document.getElementById('encrypt_password').style.opacity = 0;
      document.getElementById('unlock_button').style.opacity = 0;

      // Use setTimeout to display the decrypted content after a delay
      setTimeout(function() {
        // Display the decrypted content
        document.getElementById('content_container').innerHTML = decryptedHTML;

        // Add a fade-in effect to the decrypted content
        document.getElementById('content_container').style.opacity = 1;
      }, 500); // Delay before displaying the content (adjust as needed)
    } else {
      // Change the background color of the input box to indicate an incorrect password
      document.getElementById('encrypt_password').style.backgroundColor = '#FF8282';
      // Set a timer to revert the background color back to its original state after 1 second
      setTimeout(function() {
        document.getElementById('encrypt_password').style.backgroundColor = '';
      }, 1000);
    }
  });
</script>

and this is to decrypt it using a the following Jekyll Themes Layout:

---
layout: post
---
<img src="{{ site.url }}{{ site.baseurl }}/assets/images/maps 1 cropped.png" alt="logo" class="align-center" style="margin-bottom: 10px;">

<style>
  /* Define CSS rules for the outer container */
  #content_container {
    background-color: #283741; /* Set the background color */
    border-radius: 10px; /* Add rounded corners to the container */
    padding: 20px; /* Add padding to the container */
  }

  /* Style for the input box */
  #encrypt_password {
    width: 70%; /* Set the width to 70% of the container */
    padding: 10px; /* Add padding for spacing */
    border-radius: 5px; /* Add rounded corners to the input box */
    margin-bottom: 10px; /* Add space below the input */
    float: left; /* Float the input box to the left */
    border: none; /* Remove any border */
    outline: none; /* Remove the default outline */
    transition: background-color 0.5s ease, opacity 0.5s ease; /* Add transitions for smooth changes */
  }

  /* Style for the unlock button */
  #unlock_button {
    width: 28%; /* Set the width to 28% of the container */
    padding: 10px; /* Add padding for spacing */
    border-radius: 5px; /* Add rounded corners to the button */
    float: left; /* Float the button to the left */
    margin-left: 2%; /* Add a little space between the input and the button */
    border: none; /* Remove any border */
    outline: none; /* Remove the default outline */
    transition: opacity 0.5s ease; /* Add a transition for smooth fade-in/out */
  }

  /* Clear the float to prevent layout issues */
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }

  .content-container {
    border-radius: 10px; /* Add rounded corners to the container */
    padding: 20px; /* Add padding to the container */
    margin-bottom: 20px; /* Add bottom margin to create space between container and text below */
    animation: breathing 2s infinite; /* Apply the breathing animation */
  }

  @keyframes breathing {
    0% {
      background-color: #5D676E; /* Start with red */
    }
    50% {
      background-color: #51454C; /* Transition to yellow at 50% */
    }
    100% {
      background-color: #5D676E; /* Return to red at 100% */
    }
  }
</style>

<div id="content_container">
  <div class="content-container">
    Password is the bold section of Common App Additional Information Section.
  </div>
  <form id="encrypt_form" action="#" method="post" class="clearfix" style="margin-top: 20px;"> <!-- Add margin-top for spacing -->
    <input id="encrypt_password"
           type="password"
           name="password"
           placeholder="Enter password"
           autofocus />
    <input id="unlock_button" type="submit" value="Unlock"/> <!-- Move the button to the right -->
  </form>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
<script>
  document.getElementById('encrypt_form').addEventListener('submit', function(e) {
    e.preventDefault();
    var passphrase = document.getElementById('encrypt_password').value,
        encryptedMsgs = [
          '{{ page.encrypted1 }}',
          '{{ page.encrypted2 }}',
          '{{ page.encrypted3 }}',
          '{{ page.encrypted4 }}',
          '{{ page.encrypted5 }}',
          '{{ page.encrypted6 }}',
          '{{ page.encrypted7 }}',
          '{{ page.encrypted8 }}',
          '{{ page.encrypted9 }}',
          '{{ page.encrypted10 }}',
          '{{ page.encrypted11 }}',
          '{{ page.encrypted12 }}',
          '{{ page.encrypted13 }}',
          '{{ page.encrypted14 }}',
          '{{ page.encrypted15 }}',
          '{{ page.encrypted16 }}',
          '{{ page.encrypted17 }}',
          '{{ page.encrypted18 }}',
          '{{ page.encrypted19 }}',
          '{{ page.encrypted20 }}',
        ];

    var decryptedHTML = null;

    for (var i = 0; i < encryptedMsgs.length; i++) {
      var encryptedMsg = encryptedMsgs[i];
      var encryptedHMAC = encryptedMsg.substring(0, 64);
      var encryptedHTML = encryptedMsg.substring(64);
      var decryptedHMAC = CryptoJS.HmacSHA256(encryptedHTML, CryptoJS.SHA256(passphrase).toString()).toString();

      if (decryptedHMAC === encryptedHMAC) {
        // Password matched, decrypt and display the content
        decryptedHTML = CryptoJS.AES.decrypt(encryptedHTML, passphrase).toString(CryptoJS.enc.Utf8);
        break;
      }
    }

    if (decryptedHTML) {
      // Change the background color of the input box to green to indicate a correct password immediately
      document.getElementById('encrypt_password').style.backgroundColor = '#82FF82';
      // Hide the input box and unlock button with a fade-out effect
      document.getElementById('encrypt_password').style.opacity = 0;
      document.getElementById('unlock_button').style.opacity = 0;

      // Use setTimeout to display the decrypted content after a delay
      setTimeout(function() {
        // Display the decrypted content
        document.getElementById('content_container').innerHTML = decryptedHTML;

        // Add a fade-in effect to the decrypted content
        document.getElementById('content_container').style.opacity = 1;
      }, 500); // Delay before displaying the content (adjust as needed)
    } else {
      // Change the background color of the input box to indicate an incorrect password
      document.getElementById('encrypt_password').style.backgroundColor = '#FF8282';
      // Set a timer to revert the background color back to its original state after 1 second
      setTimeout(function() {
        document.getElementById('encrypt_password').style.backgroundColor = '';
      }, 1000);
    }
  });
</script>

and this is the page that uses this layout:

---
layout: encrypted
title: Additional Material

encrypted1: 119c903ec469dd15a68e21c2f3b93d04bf9ec8bafb7476e57690266a7b307cbdU2FsdGVkX1980GqFikO2fdEsfWqfvMfXU67d65RcjBwpSPp9theoJvo6iPZo8PiAAo20xEYg5sjwGUM3ieb848FP1gR0sX9/T9PXrLeHLjCCLHNCl0DCiKq1pm2AJ8G+JV65ms01Nk72kC/XV53QVrcrWzZHc82uKBzzaC43lIjXX9vAAyhgK1Z1QXU1dfwckEhVUBKVtMMIBFkr2ffmQ16iuvUzpFhtPmciTNeQrDmpSQbuuX0bHL1XJvGev9wfmhNEmvJK18QM+IqHyD0tRaJoCIHifCB3YImUvt6oUun18YUcDfO9cj9hOnjuPoj2o9j67N2JnX35jsML00vZQzp83//tXLrPn+ea4/QXMacEq0Oq622iyM0qUO4Q8YE3KdDmwEAtFEQoQf7x3TvyZHnBoMG901D/LN4sIOj2TJ3kVGERxwD2ak1XYQtjm3k2GBoXOPNZXpcBJNet8fqkWswlGR05YJRuWUNicTRe+NsXArg9O+LKwpjGklw
encrypted2: cb3fcfc7e2a9f45355c81b16577f5c15bd4abc09a9e790556fb9c8ac9225e60eU2FsdGVkX184Ht2/n7P1EDXbNjXlNM5jwCU8acI6CQgcZpLGRq28mqEOdTKGvtjbxheA0KIqhjCh9VrLyBPZ4SGQMtgoD3IyAYHSQVNCDY6RERrhc+TxsOdolxEEzHbDxVVxvdHhqrgk0E6qH+RBGt/Z3lcQk5bl89io5vnLp7vbojldPPAdaGXqoa7rnAhKhF3R0Haiej0l12aEnZlbWE2Bof7XfU7aX8bltCbOXZDacBmiIge88pWUZPUea1hpmCF8ObvMxvlj/Satt6nPDxDEQbH+Ww0ajroylF94DJxqUdgz8te7PmetO2Q6aXTASDYHjTwFBAfkjYE8CGeym6g0PCMPREWaOFrtJKoSFVVJGX3MOcGqrXko4RhW4e1eb5Pd2wO3cn6ecDOI+Offn1xfKZF4MGOug089C8otau9xWHC93dNaR0bTbDMnrEjPJ1LZT8S+BHj1w84LKrhLZL8TnwiAPd9shnrRgn0qvlX
encrypted3: 03e8e05f7d647e4912d4c5f93a1272932a5ba054ead8b5433b2308e298848ba1U2FsdGVkX1+HKIXQNyWQUYIX1Txftfm4Hd48Ofw/xtoXtQr+OfY1MtnbCR4f+unSbQeGSOApAH/zSJ/VXf3DrlQuVCnB4k7XYkl/NmbGHzc2hyLquvvq/H13M9YMGTtB7/Qs81YTWfn75j/HKayoy8ppkUlcRSIlxl31RTAUqN4/A/JRUxm7fgbREtNgi6iJ=1iTcKZMoE3m0ylxpoBWPsPX/WoeBCR+z8Qq1qKen3lTe7DvDvk5nt1bFC84oI08OE2Qdhh1vqsu8TPQ1WJnDZq3qUdbB2GPQIGuoxyj90x0IUkxjumn0UPqrAvsJdlMAE/ChIha/X5XUj56TIrZRyKEssrHrWtD01jL6SwPZFj2CEproduw71W0M0dgxGpiH/jqecBcdBuQIaVlHakfbBOgPCDCsRBkJG2mgYj2D2qlnyEpwqu1vQG5dbV1G9417g7NzkubBqjsajhOd/bPAjQl8MWICZUI+e9reeNT8SlzEjAqVM
encrypted4: 42a099825776f174977a37376aa427f33b228e8f889ed4a5a131db2791d42635U2FsdGVkX19IPKx4OliFaPLW5th5PoGDXBW8IbXTIgfTsHaKNAsiMWPMhueNk2bHI0rBkU9ZojQAJ3l9zflnmCuCUnCLGd9WANUcT5HvNsBiR2xwhL+BhYaJBjir5Qloe2G89MTZRMjfswzTslzyFnGAemcmeNggTgOOhyJt7G6ndeJPt4Ppz4wQjocTtqEhQLL+ohcfQGykpvTkiiO42Cpd7Nxi+KtSDpOw21UDTIt4DPuiL7iuU4/80kdp8OTHRjAC4EMPrWRGBCGFdW8ySypWe4B+tWesLiCxZYk40iB8vvv2aE9lMtdbd/IBj71s+tVoCdzoraQ/8WWGLzeThlrb7ZRP7a6XgLEPnWZB66NDs3lHGBpcSXBHWGA9g4jncSmV851ZGq2OvvyFw2qtBgTFGxS0eIut7IWHmra22x7BDh6v+zFpArxxld7b4O+DIOQcx3T0JXCfNszydMX+r8gZLnwtMx3wjEsRsXVIJkGgMDWJntsMoDo86Ea+nLw3
encrypted5: 36d6a342101be194d39c3ce3a6d7ece4d5ba563229af02a2ebcc7c4085ef0fe6U2FsdGVkX18+Av+Fd/PL2u/rn/UwArktMiBLUuZIPDAWpFON4UMP19SWu7RhQJU1up1nvotI/29ioapVMhGDmGTI+IHHuKOBxWS3EWuNVNy4vXcKBp2MeqlLVwIUUntMqvfhS1IVKX0b/SZEDJD46LgzupFJHgnj8jlZlrNdnrQRILaMHDWY44e3HTE/PphH6dqXKmfPu6jtTEIj4DPVomt56P1K4drclgnQXhlFaQjRIntjmwhwL45j7ktmGxsGLdbuGrHmHO6ZWvGy2Uqf9zQnuRc1ElmvaGKUC64r4CEdkT1VF1SM8qLkeaYYdMVED1FMxiAE6myImEKnyM+uLIXqBrTLifodzSZSwS2TaBwsA8f5Hp/T0PnP0z+py/4kCuwmicGtpxGw8IPNZpz+Ng920W+r6wm

permalink: /admissions/
---

Thank you for the time taken to read this

chuckhoupt · November 3, 2023, 12:10am

The page you linked to produces Javascript errors on the console.

420Ayan420 · November 3, 2023, 11:05am

Sorry to ask, but which page? Do you mean Additional Material | Ayan Ali?

If there errors I believe that is just pagination throwing some errors but that shouldn’t really effect what I’m trying to achieve, I think

chuckhoupt · November 4, 2023, 1:29am

Yes, the “Additional Materials” page. When I paste in the password and click Unlock, the password field flashes red and nothing happens.

420Ayan420 · November 4, 2023, 4:09am

My mistake! The password is developerPasswordAA42069

chuckhoupt · November 4, 2023, 10:20pm

As far as I can see, encryptedMsgs[4] is decrypted and its contents are displayed. Here’s the raw decrypt:

<p>&lt;style&gt;
.content-container a {
color: #D37070; /* Change the color of hyperlinks <em>/
text-decoration: underline; /</em> Add underline to hyperlinks */
}
&lt;/style&gt;</p>
<p>&lt;body&gt;
Further documentation available &lt;a href=&quot;hidden for now&quot;&gt;here.&lt;/a&gt;
&lt;/body&gt;</p>

The contents contains a lot of quoted HTML, like <style>. Possibly that is due to mixing of HTML and Markdown in the plain-text before generating the cypher-text?

The problem likely lies in the encryption code, but I don’t see it in the sample code you posted.

420Ayan420 · November 4, 2023, 10:25pm

First I would like to thank you for having a look.
I mistakenly posted the decryption code twice.

Here is the encryption code:

'use strict';

var cryptojs = require('crypto-js');
var markdownit = require('markdown-it')();
var FileSystem = require('fs');

function checkEncryptedLayout(frontMatter, filepath) {
  var lines = frontMatter.split('\n');
  var linesWithoutLayout = [];
  var hasEncryptedLayout = false;

  lines.forEach(function (line) {
    var layoutTag = 'layout:';
    var isLayoutIndex = line.indexOf(layoutTag);
    var isLayout = isLayoutIndex >= 0;
    var isEncryptedLayout = line.indexOf('encrypted') >= (isLayoutIndex + layoutTag.length);

    if (isLayout) {
      hasEncryptedLayout = isEncryptedLayout ? true : false;
    }
  });

  if (!hasEncryptedLayout) {
    console.log('[WARNING] ' + filepath + ': protected file not using encrypted layout.');
  }
}

function encryptFile(filepath, passwords) {
  var delimiter = '---';
  var content = FileSystem.readFileSync(filepath, 'utf8');
  var chunks = content.split(delimiter);
  var originalBody = chunks[0];
  var frontMatter = '';

  if (chunks.length === 3) {
    checkEncryptedLayout(chunks[1], filepath);
    frontMatter = chunks[1];
    originalBody = chunks[2];
  } else if (chunks.length > 1) {
    console.error(filepath + ': protected file has invalid front matter.');
    return;
  }

  var encryptedStrings = passwords.map(function (password, index) {
    var encryptedBody = cryptojs.AES.encrypt(markdownit.render(originalBody), password);
    var hmac = cryptojs.HmacSHA256(encryptedBody.toString(), cryptojs.SHA256(password).toString()).toString();
    var encryptedFrontMatter = `encrypted${index + 1}: ` + hmac + encryptedBody;
    return encryptedFrontMatter;
  });

  // Combine all encrypted strings into one
  var combinedEncryptedString = encryptedStrings.join('\n');

  // Replace the original front matter with the combined encrypted string
  var result = [delimiter, frontMatter, '\n', combinedEncryptedString, '\n', delimiter];

  FileSystem.writeFileSync(filepath, result.join(''), 'utf8');
}

// Define a function to encrypt files in a source directory and save them in a destination directory.
function encryptFilesInDirectory(sourceDir, destDir, passwords) {
  var files = FileSystem.readdirSync(sourceDir);

  files.forEach(function (file) {
    var filepath = sourceDir + '/' + file;
    encryptFile(filepath, passwords);
    FileSystem.renameSync(filepath, destDir + '/' + file);
  });
}

// Usage:
var sourceDirectory = 'SRC-FOLDER';
var destinationDirectory = 'DEST-FOLDER';
var passwords = ['xxx', 'xxx', 'xxx', 'xxx', 'developerPasswordAA42069'];

encryptFilesInDirectory(sourceDirectory, destinationDirectory, passwords);

420Ayan420 · November 4, 2023, 10:26pm

And here is the decryption code for reference:

---
layout: post
---
<img src="{{ site.url }}{{ site.baseurl }}/assets/images/maps 1 cropped.png" alt="logo" class="align-center" style="margin-bottom: 10px;">

<style>
  /* Define CSS rules for the outer container */
  #content_container {
    background-color: #283741; /* Set the background color */
    border-radius: 10px; /* Add rounded corners to the container */
    padding: 20px; /* Add padding to the container */
  }

  /* Style for the input box */
  #encrypt_password {
    width: 70%; /* Set the width to 70% of the container */
    padding: 10px; /* Add padding for spacing */
    border-radius: 5px; /* Add rounded corners to the input box */
    margin-bottom: 10px; /* Add space below the input */
    float: left; /* Float the input box to the left */
    border: none; /* Remove any border */
    outline: none; /* Remove the default outline */
    transition: background-color 0.5s ease, opacity 0.5s ease; /* Add transitions for smooth changes */
  }

  /* Style for the unlock button */
  #unlock_button {
    width: 28%; /* Set the width to 28% of the container */
    padding: 10px; /* Add padding for spacing */
    border-radius: 5px; /* Add rounded corners to the button */
    float: left; /* Float the button to the left */
    margin-left: 2%; /* Add a little space between the input and the button */
    border: none; /* Remove any border */
    outline: none; /* Remove the default outline */
    transition: opacity 0.5s ease; /* Add a transition for smooth fade-in/out */
  }

  /* Clear the float to prevent layout issues */
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }

  .content-container {
    border-radius: 10px; /* Add rounded corners to the container */
    padding: 20px; /* Add padding to the container */
    margin-bottom: 20px; /* Add bottom margin to create space between container and text below */
    animation: breathing 2s infinite; /* Apply the breathing animation */
  }

  @keyframes breathing {
    0% {
      background-color: #5D676E; /* Start with red */
    }
    50% {
      background-color: #51454C; /* Transition to yellow at 50% */
    }
    100% {
      background-color: #5D676E; /* Return to red at 100% */
    }
  }
</style>

<div id="content_container">
  <div class="content-container">
    Password is the bold section of Common App Additional Information Section.
  </div>
  <form id="encrypt_form" action="#" method="post" class="clearfix" style="margin-top: 20px;"> <!-- Add margin-top for spacing -->
    <input id="encrypt_password"
           type="password"
           name="password"
           placeholder="Enter password"
           autofocus />
    <input id="unlock_button" type="submit" value="Unlock"/> <!-- Move the button to the right -->
  </form>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
<script>
  document.getElementById('encrypt_form').addEventListener('submit', function(e) {
    e.preventDefault();
    var passphrase = document.getElementById('encrypt_password').value,
        encryptedMsgs = [
          '{{ page.encrypted1 }}',
          '{{ page.encrypted2 }}',
          '{{ page.encrypted3 }}',
          '{{ page.encrypted4 }}',
          '{{ page.encrypted5 }}',
          '{{ page.encrypted6 }}',
          '{{ page.encrypted7 }}',
          '{{ page.encrypted8 }}',
          '{{ page.encrypted9 }}',
          '{{ page.encrypted10 }}',
          '{{ page.encrypted11 }}',
          '{{ page.encrypted12 }}',
          '{{ page.encrypted13 }}',
          '{{ page.encrypted14 }}',
          '{{ page.encrypted15 }}',
          '{{ page.encrypted16 }}',
          '{{ page.encrypted17 }}',
          '{{ page.encrypted18 }}',
          '{{ page.encrypted19 }}',
          '{{ page.encrypted20 }}',
        ];

    var decryptedHTML = null;

    for (var i = 0; i < encryptedMsgs.length; i++) {
      var encryptedMsg = encryptedMsgs[i];
      var encryptedHMAC = encryptedMsg.substring(0, 64);
      var encryptedHTML = encryptedMsg.substring(64);
      var decryptedHMAC = CryptoJS.HmacSHA256(encryptedHTML, CryptoJS.SHA256(passphrase).toString()).toString();

      if (decryptedHMAC === encryptedHMAC) {
        // Password matched, decrypt and display the content
        decryptedHTML = CryptoJS.AES.decrypt(encryptedHTML, passphrase).toString(CryptoJS.enc.Utf8);
        break;
      }
    }

    if (decryptedHTML) {
      // Change the background color of the input box to green to indicate a correct password immediately
      document.getElementById('encrypt_password').style.backgroundColor = '#82FF82';
      // Hide the input box and unlock button with a fade-out effect
      document.getElementById('encrypt_password').style.opacity = 0;
      document.getElementById('unlock_button').style.opacity = 0;

      // Use setTimeout to display the decrypted content after a delay
      setTimeout(function() {
        // Display the decrypted content
        document.getElementById('content_container').innerHTML = decryptedHTML;

        // Add a fade-in effect to the decrypted content
        document.getElementById('content_container').style.opacity = 1;
      }, 500); // Delay before displaying the content (adjust as needed)
    } else {
      // Change the background color of the input box to indicate an incorrect password
      document.getElementById('encrypt_password').style.backgroundColor = '#FF8282';
      // Set a timer to revert the background color back to its original state after 1 second
      setTimeout(function() {
        document.getElementById('encrypt_password').style.backgroundColor = '';
      }, 1000);
    }
  });
</script>

chuckhoupt · November 4, 2023, 11:56pm

In the encryption code, you’re running a Markdown processor on the plain-text, but it seems the plain-text is HTML, not Markdown. The result is the unexpected quoting of HTML tags, and misinterpretation of comments (/* .. */) as emphasis spans, etc. Try removing the Markdown rendering or adjust Markdown-It’s options to enable HTML mixed with Markdown:

420Ayan420 · November 10, 2023, 12:58pm

I’m sorry I’m very rusty at this, is there any chance I could be guided on how to do this? It would be even better if you could do it if at all possible.

Many thanks

Topic		Replies	Views
Why is my main.css being served from http: instead of https:? Help	4	1116	July 28, 2019
At a loss on how to get images to work on GP Help	6	636	March 1, 2022
Need help with image caption Help	15	2168	December 11, 2021
[Solved] Format issue in github page Help	3	659	March 3, 2023
Architect theme - Replace header/banner image and github logo/button Help	2	704	May 13, 2020

Running code after decrypting a HMAC file

Related Topics