Drupal - Secret Messages


Example: Adding Hidden Secret Messages to Drupal

I had fun building the encoded secret messages for 247Coding.com and thought I would give a quick show on how it works.
The first thing I had to do was to create an encoder panel. This would allow me enter in a secret message, encrypt it and then paste it into the page when editing the article, forum, etc.

I made it so that it would start closed and I could open it as needed.

Keep in mind, this is not a complex encryption, it is for fun so I did not concentrate on strong encryption, just something that I could do without having to load encryption modules or libraries, it worked with Drupal as is.

The secret text is saved in a DIV element that will be common across all pages which you can open and close by the Secret Message button..
The encrypted text is stored in a <p> paragraph element that stores the data... something like id='encryptedText' for the div ID.
If there is no data in the article element, I type in the new text and click the encode button. Then I copy the encrypted text and then paste it into the element within the body of the article in Drupal edit mode. The article mode must be set to php mode so that it handles the Drupal roles, but the encryption source code is all simple java script so you could display without PHP if you did not want to lock it down using either text or html mode.
To simply things, the Load button will load the encrypted data if it is in the P element and decrypt it. This makes it easy to update existing encrypted messages.

Once I have the secret message the way I want it, I click the encode button and the data is ready to be pasted into the "P" element in the article.

Next was to create the elements that will actually display the secret message content.
On page load, the secret message box is also closed but there is a button to open it.

If you look at the image carefully, you will see a floating Decode button that will be displayed on every page with a secret message. The one thing I did not like was the ability to load the decoder button via direct page load. For now, if the secret code exists it will append an &enc argument to the url and redirect. The block will see the &enc argument and then load the decoder pieces parts. The decoder editor and decode button will only load if you have a special Drupal decoder role set for each.
Now in all actuality, it does the exact same thing that the encoding editor panel does, but instead of putting it into an editable text area, it just displays it as html in the <p> element.

In Drupal, to save from having to place the code in every article, I created a new block and put most of the code in there.
This way, all i have to do is to place the <p> element in the article and the block will do the rest if the element contains encrypted data.
There are a few other tricks as well, which allows the actual Decode button to appear only if the user has a specific Drupal role value assigned to their account.

Somewhere down the road, I may put up the source code and scripts to handle this, but it will probably only be available to patrons...sorry.