Running code after decrypting a HMAC file

[420Ayan420]

Hello!

I have been using crypto.js to password protect some aspects of my website at www.ayanali.net/admissions/

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