Concealing a hidden message within printed JavaScript code, waiting to be discovered

Question

Concealing a hidden message within printed JavaScript code, waiting to be discovered

I've received a unique request from a web development company asking for 30 lines of HTML/JavaScript code to create a wall display. The code should be valid, execute in a modern browser, and display a message within 30 words (such as a clever brand slogan).

They are seeking a way to conceal the message within the code, making it appear like a visual puzzle only decipherable by those with intermediate JavaScript knowledge.

The goal is for the code to look like random text to a casual observer.

I'm open to suggestions on how to achieve this objective. I've experimented with online JavaScript minifiers and obfuscators, but they render the code unreadable. Instead, I want it to be challenging for a human coder to understand, without being impossible.

For example, if the hidden message was:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis ipsum ipsum. Donec quis lectus et ante gravida ultricies at."

How should I approach this creative challenge?

HTML/CSS, JS & JQuery are all permissible for this task.

(Moderators, please relocate this question if it doesn't belong on Stack Overflow)

javascript jquery html css

Answer 1

Answer №1

Seems like an interesting programming puzzle, adding the twist of targeting a human code interpreter alongside valid HTML/JS/CSS.

One suggestion could be to present the message in a scrambled or fragmented manner, followed by showcasing some code that unscrambles the message. For instance:

var a = [" consectetur", 
         "dolor", 
         "Lorem ipsum ", 
         " sit amet,"];
return a[2] + a[1] + a[3] + a[0];

This complexity could be enhanced (and made more challenging to decipher) by scattering the relevant string pieces among other code snippets, incorporating conditionals to concatenate variables selectively, allowing logic or computation to determine array indexes, and so forth...

Here's an example where the encoded message is subtly embedded within the code itself:

<script id="codeblock">
  
  //JavaScript

  function getHTML(id) {
    return document.getElementById(id).innerHTML;
  }
  
  var myFavorites = [
    'No Woman No Cry',
    'Exodus',
    'Is This Love',
    'Buffalo Solder',
    'Could You Be Loved'
  ];
  
  var didYouGetTheMessage = (function(letters){
    var x = letters.split(''),
        y = myFavorites,
        z = getHTML('codeblock').split('\/\/')[1];
    x.reverse();
    return [x[17],
            y[2].slice(-4), 
            z.slice(0, 10)]
    .join(' ');
  })('ABCDEFGHIJKLMNOPQRSTUVWXYZ');
  
  //If you still did not get it ...
  console.log(didYouGetTheMessage);
  
</script>

The challenge here would likely involve striking a balance between creating a sufficiently engaging and enjoyable decoding task for humans while ensuring it does not become overly laborious.

Answer 2

Seems like an interesting programming puzzle, adding the twist of targeting a human code interpreter alongside valid HTML/JS/CSS.

One suggestion could be to present the message in a scrambled or fragmented manner, followed by showcasing some code that unscrambles the message. For instance:

var a = [" consectetur", 
         "dolor", 
         "Lorem ipsum ", 
         " sit amet,"];
return a[2] + a[1] + a[3] + a[0];

This complexity could be enhanced (and made more challenging to decipher) by scattering the relevant string pieces among other code snippets, incorporating conditionals to concatenate variables selectively, allowing logic or computation to determine array indexes, and so forth...

Here's an example where the encoded message is subtly embedded within the code itself:

<script id="codeblock">
  
  //JavaScript

  function getHTML(id) {
    return document.getElementById(id).innerHTML;
  }
  
  var myFavorites = [
    'No Woman No Cry',
    'Exodus',
    'Is This Love',
    'Buffalo Solder',
    'Could You Be Loved'
  ];
  
  var didYouGetTheMessage = (function(letters){
    var x = letters.split(''),
        y = myFavorites,
        z = getHTML('codeblock').split('\/\/')[1];
    x.reverse();
    return [x[17],
            y[2].slice(-4), 
            z.slice(0, 10)]
    .join(' ');
  })('ABCDEFGHIJKLMNOPQRSTUVWXYZ');
  
  //If you still did not get it ...
  console.log(didYouGetTheMessage);
  
</script>

The challenge here would likely involve striking a balance between creating a sufficiently engaging and enjoyable decoding task for humans while ensuring it does not become overly laborious.

Answer 3

Answer №2

To prevent the direct visibility of a message in the page source, one method is to encrypt the text and save it as a variable within the script. The decryption can then be done only when necessary for display. This approach ensures that individuals inspecting the source will not easily decipher the exact content displayed on the webpage. However, those skilled in JavaScript may still be able to understand the process being used to reveal the message.

Answer 4

To prevent the direct visibility of a message in the page source, one method is to encrypt the text and save it as a variable within the script. The decryption can then be done only when necessary for display. This approach ensures that individuals inspecting the source will not easily decipher the exact content displayed on the webpage. However, those skilled in JavaScript may still be able to understand the process being used to reveal the message.

Concealing a hidden message within printed JavaScript code, waiting to be discovered

Answer №1

Answer №2

Similar questions

Npm publish seems to be stuck without generating any output

The function req.isAuthenticated() always returns false and never evaluates to true

What methods can be used to customize the font and background color of a website for different user groups?

Arranging ng-grid by a hidden column

Tips for creating a shift function without using the splice method

Tips for organizing and securing downloaded zip files from external websites

Querying with complex aggregations in MongoDB for sorting operations

Dealing with the notorious AngularJS error: $rootScope:infdig while using ng-style function within ng-repeat

JavaScript for validating forms in PHP

Having trouble getting the slideup Jquery function to work properly?

Styling for Ajax Forms when traditional methods don't work

Having trouble getting getStaticProps to display JSX in Next.JS

If an error occurs later in the function, `console.log` will not function properly

Launching a new popup window using jqModal

Removing margins in Bootstrap 5: A step-by-step guide

Comparing the use of visibility: hidden with -webkit-transform: translate3d() within a PhoneGap application

Leveraging Font Awesome icons within a WordPress theme

Receiving user input in ajax

Executing a dropdown menu click event using PHP and AJAX

The use of jQuery's ajax() function to retrieve JSON data from a URL is resulting in a response that is