To encrypt text, choose a key / password (or generate one randomly), enter the text to be encrypted in "Plain Text", press the "Encrypt" and then (red, under "Cipher Text") copy the HTML code to use on your site (if you have installed the script below).
If you lose your key (password), we cannot help you recover it.
HTML Code
HTML Test
Instructions
To use the script on your site or blog, you must enter the following before </head>:
<script type="text/javascript" src="http://blogcrypt.googlecode.com/files/jsencryption.js"></script>Code
This is the basic code to use in the body of the html code of your webpage to do the decryption:
<div id="uniqueID" title="encrypted text">
<a href="javascript:decryptText('uniqueID')">Show encrypted text</a>
</div>
encrypted text is the encrypted text generated from the encryption/decryption page.
uniqueID is a unique name for the element, which is automatically generated by the encryption/decryption page in the sample code. This can be anything that you want, but do not put your key here because it is visible to everyone.
The decryptText JavaScript function gets the encrypted text from the title of the element with the id uniqueID. Once decrypted, the contents of the element are replaced with the decrypted text.
The two uniqueID's must be exactly the same, otherwise the code will not work.
Advanced
The decryptText function can accept an array of element id's and it will decrypt each of them. The encrypted text in each of these element id's can be encrypted with the same or different keys.
You can change the message in the dialog box that asks for the key by providing the desired message as a second parameter, eg. decryptText('uniqueID', 'Enter the password:')
Instead of the fancy dialog box, you can use the standard JavaScript dialog box to request the key by doing this:
decryptText('uniqueID', null, true) or decryptText('uniqueID', 'Enter the key:', true)
One word of caution is that IE7 blocks the regular JavaScript dialog box and you have to click the pop-up message to allow the dialog to show.
Bookmarklets
Drag these to the bookmark toolbar: Encrypt si DecryptSelect plain text and click the Encrypt button to encrypt it or select the encrypted text and click Decrypt – the bookmarklet will take you here and pre-fill the correct field. The Encrypt button is obviously of more use than the Decrypt button.
examples
The following examples have as password “the key” (without quotes).
Example 1: Basic version
Code:
<div id="uniqueID" title="encrypted text">
<a href="javascript:decryptText('uniqueID')">Show encrypted text</a>
</div>
Plain text:
Hello World!
Example 2: Hidden image and link
Code:
<div id="uniqueID" title="encrypted text">
<a href="javascript:decryptText('uniqueID')">Show encrypted info</a>
</div>
Plain text:
<a href="http://3w.blogidol.ro/enc/"><img src="http://farm3.static.flickr.com/2561/4110970246_ef70b22109_o.jpg" height="200" width="200" /></a><br />
<a href="http://3w.blogidol.ro/p/encryption-and-decryption-with.html">JavaScript Encryption</a>
Example 3: Inline text
RevealThe secret...
Code:
<a href="javascript:decryptText('uniqueID')">Reveal</a>
<br />
<br />
The secret... <span id="uniqueID" title="encrypted text"></span>
Plain text:
has been revealed!
Example 4: Hidden text
There is *** hereCode:
There is <span id="uniqueID" title="encrypted text">
<a href="javascript:decryptText('uniqueID')">***</a></span> here
Plain text:
hidden text
Example 5: Hide your email address from spammers
Email address: Show email address (password: the key)Code:
Email address: <span id="uniqueID" title="encrypted text"><a href="javascript:decryptText('uniqueID', 'Enter password:')">Show email address</a> (password: the key)</span>
Plain text:
<a href="mailto:***">***</a>
Example 6: Multiple encryptions
Decrypt textThis is cool
Code:
<a href="javascript:decryptText(['uniqueID1', 'uniqueID2'])">Decrypt text</a>
<br />
<br />
This is <span id="uniqueID1" title="encrypted text 1"></span>cool<span id="uniqueID2" title="encrypted text 2"></span>
Plain text:
<span style="color:red">really</span> and <span style="color:red">!!!</span>
Example 7: More than 1 key (the second key is: the second key)
Decrypt*** went ***
Code:
<a href="javascript:decryptText(['uniqueID1', 'uniqueID2'], 'Enter one of the decryption keys:')">Decrypt</a>
<br />
<br />
<span id="uniqueID1" title="encrypted text 1">***</span> went <span id="uniqueID2" title="encrypted text 2">***</span>
Plain text:
"Jack and Jill" (encrypted with one key) and "up the hill" (encrypted with the second key)
Example 8: Big example (the second key is: the second key)
Show encrypted textCode:
<a href="javascript:decryptText(['uniqueID1', 'uniqueID2'])">Show encrypted text</a>
<br />
<div id="uniqueID1" title="encrypted text 1"></div>
<div id="uniqueID2" title="encrypted text 2"></div>
<div class="clear"></div>
Plain text:
<div style="float:left; width: 48%">Lots of text</div> (encrypted with one key)
<div style="float:right; width: 48%">Lots more text</div> (encrypted with the second key)
Example 9: My personal blog
Sometimes I use encryption on my personal blog to keep things hidden from prying eyes. Most of my blog can be viewed by anyone, but every once in a while, I want to write about something that I don't want certain people to read.I give the key to people that I trust so they can read the encrypted posts. I use several different keys for my posts and different people have different keys.
Disclaimer and Credits
This is based on original work from several people, including Cheung, Percival and Walker. I am mirroring it here for personal use and to study the code. An online standalone copy is also available.
