2007年3月27日

利用JavaScript加密文章內容

經使用過有名大站的人,或許會很喜歡它的文章密碼鎖定這個功能(至少我一些朋友不肯離開有名大站就是因為Blogger沒有這個功能),我曾經在Blogger Hacks的Wiki上看到一個「Encrypted blog posts」,這是一個利用JavaScript將文章內容以Advanced Encryption Standard (AES) 256 bit加密,就以我那低空飛過的密碼學的認識來說,安全性是足夠的,加密過後的文章會以不規則的英文顯示,當你想要看原始的文章內容,則需要輸入一串加密時所使用的Key(自行設定的字串),所以當你忘記key的內容,就無法看到原始的文章內容。

當初之所以沒有用這個Hack,是因為我覺得既然要在Blog上PO文又何必怕被人看呢?但是在跟朋友強力推薦Blogger時,卻又常常被以文章沒有保密的功能而加以回絕,昨天因RaRaYA的留言又讓我想起了這個Hack,於是決定將這個Hack的用法寫出來,順便看能不能打動我的朋友也加入Blogger的行列。

我在這裡有做了一篇Demo,建議各位先去看看,如果覺得這個效果不錯,再往下看這的Hack的做法。

  1. 前面提過這Hack是利用JavaScript以AES 256 bit將文章加密,所以第一步就是要將加密/解密用的Javascript加入範本中,所以請將下列的程式碼加入範本的</head>之前:
  2. <script src='http://vincentcheung.googlepages.com/blogjscrypt.js' language='JavaScript'></script>
  3. 這個網頁將文章加密;“key”的欄位可自行輸入,也可以按自動產生,但是key的內容請一定要留著,因為文章的解密一定要用,如果忘記key的內容,我想大概也沒有人能解出原來的文章內容。

  4. “Plain Text”這個欄位輸入想要加密的文章內容,按下會在下方的“Cipher Text”產生加密過後的字串。

  5. 而要在Blog內顯示的做法,就像我在Demo頁面有二種,一種是顯示加密過後的內容,一種是隱藏加密過後的內容,方法如下:
    方法一(Demo1):
    <a href="javascript:Decrypt_text('unique_name');">Decrypt text(文章解密)</a>
    <div id="unique_name">這裡輸入步驟3所產生的字串</div>


    方法二(Demo2):
    <a href="javascript:Decrypt_text('unique_name', '這裡輸入步驟3所產生的字串');">Show encrypted text(顯示加密過後的字串)</a>
    <div id="unique_name"></div>

    而當你要解密時,按下上面所產生的連結時,會出現一個字串輸入視窗,將步驟2的key輸入就會將字串解密為原來的文章,所以當你只想讓特定的人士觀看你的文章時,只需要將步驟2的“key”給那個人即可,而不知道“key”的人所看到的不過就是一堆不相關英文字串,這樣就能有文章保密的效果了。
  • 在步驟4中“unique_name”代表的是Div的ID,請儘量取一個不會和別的Div重覆的名字。紅字部份一定要填入“Cipher Text”的內容,這是文章解密的依據。
  • “key”的內容一定要備份。