JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<div id="encrypted">
</div>

<div id="decrypted">
</div>

<button id="load">Load</button>

CSS

#encrypted {
  border: 1px solid red;
  min-height: 150px;
  min-width: 300px;
}

#decrypted {
  border: 1px solid green;
  min-height: 150px;
  min-width: 300px;
}

JavaScript

//
// Encrypt Utility
//

// 1. Define a password.
var key = "secret";

// 2. Define an array that you want to encrypt in a separate file.
const payload = `[
	'one', 
  'two', 
  'three'
]`;

// 3. Encrypt the array.
const encrypted = CryptoJS.AES.encrypt(payload, key);
// 4. Print the encrypted text to the web page.
document.getElementById('encrypted').innerHTML = encrypted;
// 5. Copy the encrytped string in the textbox, save to a new file, and upload to destination. This example is using github.


//
// Decrypt
//

// 1. Download the encrypted file.
$.get('https://gist.githubusercontent.com/primaryobjects/16907cd0f327119ccc5d7f2a168c5a0f/raw/4913ade697e5312c679f42c2576f8cbd07f44fd9/data.dat', data => {
	// 2. Decrypt the string and evaluate back to an array named 'arr'.
  arr = eval(CryptoJS.AES.decrypt(data, key).toString(CryptoJS.enc.Utf8));
});

// 3. When clicking the 'Load' button, print the contents of arr.
$('#load').click(() => {
	document.getElementById('decrypted').innerHTML = JSON.stringify(arr);
});