Vincent Cheung

Vincent Cheung's Blog


« Newer Post Home Older Post »

Tuesday, July 18, 2006

Encrypted blog posts

This is the old version. Go here for the newer code.

Key (ordinarily kept secret, but shown here for the demos):

the-not-so-secret-key


Demo 1: Encrypted text shown

Decrypt text

bF6Y96p1Ledj+Dj8RuFX+95qSJoIiJTaVmfNG50p8oLI6gyA
kSRGDF8vtTi7ZHeniTVXuZfjqqIdjfKm5zBiiev+bDnTh7aV
QFxxHLr1wjGPmEj3S3v6Ugx+kN7Q/Az7


Demo 2: Encrypted text hidden

Show encrypted text


Javascript must be enabled for this encryption/decryption demo


I use my blog as literally an online journal to record my activities and thoughts so I can look back at them later. Writing things down can also be therapeutic. As a side benefit, it serves as a form of communication with my friends and randoms (it helped me get my apartment).

The problem is that I have to constantly censor myself as I do not want other people reading some of my more personal thoughts, especially ones about people that read my blog. I want my blog to be public, but I want to also add some private text.

My solution is to use cryptography. I will encrypt text I don't want people to read, this way the text is not available anywhere (not even on the server). The difficulty is in making it easy to do both encryption and decryption and doing so in a secure manner, i.e. do everything locally.

I turned to Javascript, as it is ubiquitous and it would allow me to do client side decryption. I found this site that uses Javascript to do 256-bit AES encryption and decryption. This encryption was more than enough for my purposes.

I then modded the code to do dynamic text with CSS. The result is the little demo at the top. When you enter the key into the prompt box, it decrypts the scrambled text on the fly without reloading the page! Better yet, it's all done locally, so not even the server ever sees the plain text.


Here's how you can use it for your site:
  1. Encrypt your text (be sure to remember the key!)

  2. Download the decryption Javascript code and include it in the header of your blog/site

  3. Use one of the two following code templates to put the encrypted text and decryption link on your page, depending on whether or not you want the encrypted text to show by default.

    • Show the encrypted text on the page along with a link to decrypt it

      <a href="javascript:Decrypt_text('unique_name');">Decrypt text</a>

      <div id="unique_name">Encrypted text from step 1</div>


    • Hide the encrypted text and only show the decryption link

      <a href="javascript:Decrypt_text('unique_name', 'Encrypted text from step 1');">Show encrypted text</a>

      <div id="unique_name"></div>


    Note 1: "unique_name" is the ID of the div (it appears in both lines of code) and ID's, have to be unique. In other words, if you use this code multiple times for multiple blocks of encrypted text, you have to change "unique_name" to "encrypted", "encrypted2", "encrypted_text_about_bob", etc. because the same name cannot be used twice.

The encrypted text is secure as long as you keep the key secret. The key is like a super-ultra secure password. You can use the same key over and over for multiple encryptions (so you don't have to remember/store multiple keys). If you want select people to see the encrypted text, you can give them the key. You may want to use a set of keys, one for super private, one for the gf, one for close friends, etc.

FAQ
  1. Is this secure?
    • Yes, the encryption used is very secure.

  2. Is there a back door? Can you read my encrypted text?
    • No. No one without the key can read the encrypted text and I don't know how to make a good back door.

  3. Is this going to install bad stuff on my computer or break stuff? Is this adware crap? Is this a virus?
    • No. I don't know how to do that.

  4. I lost the key, can you help me decrypt the text?
    • No. You lose the key and there's pretty much no way to decrypt the text, that is, until we get quantum computers.

  5. Do you have a quantum computer?
    • Yes, but I don't know how to use it.

Disclaimer: Not to be used if encryption is illegal in your country or used for illegal purposes.


Digg this article

74 Comments:

Anonymous said...

this is a nice piece of code,
but unfortunately i can't get it to work.

where exactly did you place it in the blogger-template?

thanks in advance
lucky

Anonymous said...

finally i got it ;-)

i have missed to place it between
script type=

../script


maybe you could help me with another question:
is there a way to hide the code in the post in a way the decrypted text will expand by entering the right pass and the encrypted cypher-code isn't displayed at all in the blog?

thx in advance
lucky ... lucky got it working :-)

Vince said...

Good to see that you got it working.

I was thinking of doing a combination decrypt and show thing, but have been debating whether I want to actually do that. In some respects, I like having all the encrypted text show so that I can see how much text there is, but then it is annoying to have it all appear on the page.

It should be pretty easy to do, just involve some css to show/hide the div, like how I do the show/hide comments.

Anonymous said...

thx for your answer vince !

you're right! it's a little bit annoying to have all cyphercode appear on the page, especially for people who haven't the password for it.

so my idea was to make it in a way, you've only a link referring to the password-box. if you click it, the box will appear and if you type the right pw, the real text expands.

unfortunately i have no idea, how to modify the template or modify the code.
i'm 'old school' :-)

anyways it's just 'comestical', the rest works fine!

thx for your efforts
lucky

Vince said...

I got the show/hide stuff working, but I don't have time to post about it right now. I'll put it up late tonight.

Anonymous said...

hey vince!

that's really great!!

thanks a ton for helping :-)

greetings
lucky

Anonymous said...

You could either A) leave it visible, but with a small font size (4pt or so?) to still be able to see the general length, or B) get a bit more complicated and hide the cyphertext but display "[43 lines encrypted]" or something.

Anonymous said...

works perfect now ;-)

thx again vince!

Vince said...

Hey, what's your blog (or site)? I'd like to see how you're using it.

Anonymous said...

Is there a way to apply this process within a web mail page? I don't to want to secure my mail traffic, I just want to encrypt the content of my inbaox and other folders within the web mail, like yahoo, hotmail, gmail, etc. so that search bot can't search for key words or email addresses, etc. Can I do that with greasemonkey extension with firefox?

Thanks for your comment and your help.

Richard Soderberg said...

Theoretically you could implement the encryption / decryption using JavaScript bookmarklets. "Replace the selected text with the en/decrypted text", for instance, would be relatively doable and would work with any webmail system without requiring Greasemonkey.

NLS said...

How come why it doesnt work in IE?
With FF is okie. Any suggestion pls!

Vince said...

Strange. It works fine in IE6 for me.

Anonymous said...

Of course, you could just use a blogging service like livejournal which actually has multi-leveled privacy on it's blog posts. You can set your posts so they're visible by only your friends, or sub-groups of your friends or by nobody else.

Vince said...

For the super paranoid, encrypting means that the plain text is never visible on any server, and can never be crawled. You can also use it on regular websites...

The bigger thing is the integration of the two. One post, but only certain people get to see the whole thing, the rest only see what's not encrypted.

Sarah said...

This post is getting too popular for my liking.

Anonymous said...

I created a JavaScript extension with this in mind; encrypting text just by selecting it from a website, very useful for blooger or just crypto fans like me. It's called Pescadito and even do it's super beta I believe it's pretty good, you can downloaded from here http://crackx.webcindario.com/down.php?cat=3

Sarah said...

great idea victor!

Anonymous said...

Hi, i'm trying to encrypt my posts but i can, i don't use blogger i use blocat, maybe you can help me....

Unknown said...

Is there a back door? Can you read my encrypted text?

* No.

Yes! There is always a back door!! The key as to be stored somewhere (dB?)..

Nice script! :) I thought I was the first to come up with encrypted blogging.. Sucks.. ;)

Vince said...

Nope, the key is not stored anywhere. The javascript encryption is done entirely on the client side in your web browser without any communication to any servers. Try it. Download the page to your own computer and encrypt something while not connected to the Internet.

There is no back door.

Bob said...

Finally figured it out. Sweet.

Unknown said...

Awesome hack,man... I love it so much..
Btw, funny Faq... I love it 2..

Anonymous said...

Hi!
Just one question to this remarkable script:
Will the encryption page always be online - what kind of encryption do you use, that I can still use your script, even when the default encryption site no longer exists...
best regards,
Chris

Vince said...

I intend on keeping the encryption page up. If you want, you can save it to your own computer and it will still work as all the encryption happens locally on your computer and not on any servers or anything. You can (and should) also save the javascript code for decryption on your own server, so then you are wholly independent of whether or not I keep the material online. The encryption is 256-bit AES, which is the standard encryption used by the US government.

Anonymous said...

thanks a lot for the quick response!!! great that i can store it locally :-)

rag said...
This comment has been removed by the author.
Anonymous said...

Dude,

Awesome chunk of code!!!! But is there a way to encrypt text in JS but decrypt it on the server-side? Any examples???

Thanks

Cyris said...

Great work Vincent !!

Anonymous said...

Thanks Vincent... Will try to use u'r post and will try to password protect my post...If I am successful will let u know....else will again knock at u'r door...hope u will help..

Thanks again
Mamta
www.mamtabhardwaj.blogspot.com

Coffeee said...

hi! thanks for this code tutorial thing..im trying to use it for my site..and im kinda stuck =[
wen iv encrypted my text wer do i put it? and i dont understand the div id thing..pls help me! i really wanna use it..thanks again!

zbayardo said...

i've downloaded "decryption Javascript code" but it does nothing. i'm stuck here and can't get it to work on my blog. HELP!

it's either this trick works i leave blogspot to one that'll let me protect single entries.

meerkat80 said...

Hello. I have no idea what I am doing with this and have been working on it most of the afternoon. Can you please explain where the encryption script goes and the template to decrypt. This is great and just what I need badly. If you have the time i would greatly appreciate it. i am using the simple ii template for the blog. i have never worked with html and have been looking for an example.

Thank you very much for your time.

jimf

Anonymous said...

Its NOT working for me! Argh!

I get it alright till the last step...when i publish the post, it does not open the dcryption window like it does in yours. There's just no decryption window there:( All i can do is to keep on clicking on this unresponsive link....

:(

WhAT AM I DOING WRONG?!?!

meerkat80 said...

Hi this is meerkat, jim.fillers@gmail.com. If you could help me by explaining where these pieces of code go, I would appreciate it.

jimf

nilimpa said...

Hmm that's strange.. I've done all the steps and yet it only works on Firefox and Opera for some odd reason. On IE the decryption prompt doesn't appear.

What's even more baffling is that the script works well on your site with IE.

Fighter Jet said...

Hi,it was a nice post on encyption.I tried to do as you have mentioned in step 1,2 and 3. But after posting the link for decryption does not work :(((
also do not knowwhere to include the step2 int the blog header??can u elaborate that.
my blogsite is
http://paneerkadhai.blogspot.com

Winnie said...

thank you so much for the code, i've been looking for one like this!

Black & White said...

i wan to do this en/decrypted text for my blog.

I followed your step but still did not get it to work..

Anonymous said...

Really, really fantastic!! I love it. You can even hide photographs...

Thanks a lot.

Mistress Grace's Dungeon said...

Hi -

I am killin' Myself trying to figure out where to paste that decryption key, etc., into the blogger header. Could you please email Me? I need help. I really want to use this super-cool encryption for secret messages to My slaves. Mistress.Grace@yahoo.com - thanks!

Dick Margulis said...

I'm trying to do something a bit simpler, but I feel as if this is the right code to begin with. Nonetheless, I could use a clue. Here's what I'm trying to accomplish:

1. User comes to "buy the book" page, where there is a text field for a courtesy code.

2. If the user enters the correct courtesy code and clicks the Submit button, the price reflected on the next page is price A.

3. If the user enters the incorrect code, the error is trapped and the user is offered the chance to correct the code or clear the box.

4. If the user leaves the box blank and clicks the Submit button, the price reflected on the next page is price B.

Because this is the last piece of the site I'm building and the rest is all in JavaScript, I'd like to do this client-side.

My thinking was that I'd encrypt the correct courtesy code once, then compare the result with the user's result. But I see that every time I click the encrypt button on the demo site (http://www.psi.toronto.edu/~vincent/blog/jscrypt.html), the cipher text is different. So my plan isn't going to work the way I thought.

Help? Please? And happy holidays, too!

taitaitan said...

Vince, looks like you're no longer replying to comments on this post.

This code is great.

Weird thing is i can get "Demo 1: Encrypted text shown" to work but not "Demo 2: Encrypted text hidden"
i view source and went through your template, i've got my codes done the same way you did but the decryption link doesn't show up.

Help?

Iced Nyior said...

thanks for this really great tutorial. I re-wrote it for my blog complete with screenshots and step by step pictures here

Anonymous said...

Hi Vincent,
This script is great. I am looking for a way to encrypt on the server (in php) and decrypt at the client (in javascript). Is this encryption algorithm self made? If so, could you also share a module to do so at the server in php? It would be of great help to many, especially in these AJAX days.

Anonymous said...

Hi,

This is nice!!

But, wouldn't be more interesting if it used to encrypt a web site source code? Does it do anythink like that?

Im looking for a program to encrypt my blog code without interupts anything or to block the source code button and not showing the source code of my blog, im afraid that maybe someone will notify it, maybe a hacker...who knows!!

do you have any ideas my friend?

congrads for your blog!!

Take care

if you know anything about please contact me antreas123@hotmail.com

Ant

Steven 杜 said...

Hello,

Not sure whether is this post still active but i tried out and it does not seem to work. I can get the prompt to ask me enter the key. But regardless of what i enter, it always say:"INVALID DECRYPTION KEY!" I did input the correct key though. Wonder what went wrong. I am using IE and wondering is this the problem? i am stuck.... :(:(:(:(:(


Steven

steven_thoo@hotmail.com

Ming-Yi said...

Thanks, it works!
But how to make an encrypted comment in the encrypted post?

Anonymous said...

hi vince.. i've got problem with it. I can't get it. Can you help me by giving step by step instruction with example. my email: fadella_23@hotmail.com

Tq in advance.

Chia Yi said...

I put in the right key but it says invalid!! why??

Vince said...

Try the new version:
http://www.vincentcheung.ca/jsencryption/

Chia Yi said...

yeah im using the new version already. I followed all your steps. but it still says that i keyed in invalid key. =(

Vince said...

Does it work on the encryption/decryption page and are you sure that you are using the exact same key as you used to encrypt?

♡ Chia Yi ♡ said...

yes. it worked. i used the right key too. sigh

Anonymous said...

Hi, I followed the steps given.

Everything is alright except that nothing pops up when I click on "Show encrypted text"

Any idea why?

Esente said...

I have the same problem with invalid key. I used a very simple key, like secret-key, and no matter how many times I enter that key, it says "Invalid decryption key."

Anonymous said...

heyy.i would like to know how do i protect my blog from being read by public by putting a password to view it?i really appreciate it if you could help ;)

Anonymous said...

I just had to drop a line and say thank you for this bit of code! I just used it because it's entirely client-side encryption/decryption so I don't have to trust anyone with the hidden text. Not even you, the coder of what I'm using! It's exactly what I was looking for, but it is so nicely made I'm sure this won't be a one time use. I'll be sure to always give you some credit in html comments ;) so any intrigued coder will know who to go to.

Loren said...

Hi, could you help me with this please? I did the steps like you said but when i posted it, the decryption window like it does in yours. There's just no decryption window there :( All i can do is to keep on clicking on this unresponsive link.

Unknown said...

Vincent,

How did you get the paragraph breaks in your "long" encryption example? Hope you can help.

Thanks, John

Vince said...

Use regular html tags, such as <br> and <p>. You can encrypt anything and the html will show up as expected once decrypted.

yanjing said...

I'm done with the encryption steps in yr blog and go view my blog. I tried keying in the password to read the message.

But the pop up box tell me that it is an invalid decryption key. may I know what went wrong?

Denisek, 14 said...
This comment has been removed by the author.
Orbyt said...
This comment has been removed by the author.
Chris said...

Hi!
First of all congrats to Your great work.
I would just ask if it´s possible to use your JS Encryption code on
http://www.tumblr.com
I tried to integrate your code at the template, but the postings might not allow JavaScript links...????
I really would love to use it with Tumblr blog posts!
Best regards,
Chris

wordology said...

Hi Vincent,
I tried your code,
Its working fine.
but when I post in in my blog and put my password.
it shows invalid password.
I dont know why its happening.
I have tried many a times.
but no go...
please help me.
Thanks
Vibhor

whatalive said...

Thank you so much for the code.

It ffffffffffinally works for me (after the gazillion tries using the wrong code (shifty eyes)).

Anyway, thank you for sharing.

Yukinari said...

Hi Mr,
I used ver.2.0, but I don't know what to do to keep the colour of text and line break for my secret massage. I don't want seclect it as one line. So would you please guide me what will I have to do? Thank you!

Vince said...

When you enter in your code to be encrypted, include HTML tags

Yukinari said...

Hi Mr,
Thank you for your reply. I really hope that you can say a bit more clearly about "include HTML tags" part in your sentence, please?

Yukinari said...

Hi Mr,
I did what you say last time, but it's only ok with font and colour of text, but with line break ...it stll didn't work! Help me!TT-TT Thank you, really!

Vince said...

For line breaks, use "< br >" (no spaces)

Yukinari said...

Yeah, I did it!0(^o^)0 Everything is ok now! Thank you so much, Vincent!

dhetty said...

thanks! it helps a lot! :D

Post a Comment