Josh’s note

利用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”的內容一定要備份。

三月 27, 2007 - 發文作者 | Blogger Hacks, JavaScript, Tutorials

14 則迴響 »

  1. 我不知道怎麼形容我的感動…
    對…就是這個感覺…

    (感動ing)

    感謝Josh 大的熱情+有效率+超高的技術…
    我原本不抱怎麼期待說…

    感謝您…(向內行人跪拜…….拜….)

    PS.看到自己的ID出現在名人的Blog..
    有一種莫名的虛榮…

    榮幸阿…超級阿..

    真的感謝^^ 打擾囉….

    迴響 由 RaRaYA | 三月 27, 2007 |

  2. To RaRaYA:
    我只是將曾經看過的hack再挖出來分享,如此而已,沒有你說的那麼偉大啦!!

    迴響 由 Joseph | 三月 27, 2007 |

  3. 很感謝您的分享。
    最近正好有些心事想記錄下來,卻又不想被人看見,有這個方法真好!!
    Thanks~~

    < (_._)>

    迴響 由 kevinee | 四月 1, 2007 |

  4. 其實在下已經在您的blog潛水好久好久了,這次終於首度浮上水面。

    每次逛您的blog都有種期待,就像小朋友逛玩具店那樣,每次都能在您這邊看到新奇、好玩又實用的好東西。真的很讚唷!!

    迴響 由 kevinee | 四月 2, 2007 |

  5. 当使用firefox+noscript时,这个js还能起到作用么

    迴響 由 DangerBOY | 四月 15, 2007 |

  6. To DangerBOY:
    密文解密就是用JavaScript + Key來進行的,所以noscript就不能解密了。

    迴響 由 Joseph | 四月 15, 2007 |

  7. 十分感谢了,知道了。

    迴響 由 DangerBOY | 四月 15, 2007 |

  8. 感謝這篇文章.. 真的很實用。

    但是,,請教一下,最近po了一篇文章,FF裡面,密碼視窗會跳出,但是在IE就不行,其他幾篇加密的都正常。

    DIV ID 也確實取了不一樣的名字,更改過的只有blogjscrypt.js這隻檔案裡的wiindows 對話視窗的呈現文字。

    請大大解惑 >.<

    迴響 由 morris | 四月 16, 2007 |

  9. 解決了 …

    用顯示模式,IE就正常了 ..

    可是我想隱藏 >"<

    迴響 由 morris | 四月 16, 2007 |

  10. To morris:
    可能是你的語法下錯了,請再檢查一下方法2的語法。因為語法錯誤就會有你所說的情形發生。

    迴響 由 Joseph | 四月 16, 2007 |

  11. 我後來發現,跟文章字數有關。用隱藏方式,太長的文章加密之後,IE密碼視窗會跳不出來。

    但是短一點的文章可以,只是我不知道字元數限制是多少就是了 :I

    迴響 由 morris | 四月 16, 2007 |

  12. To morris:
    嗯,的確是IE才會這樣,還是FireFox好用。

    迴響 由 Joseph | 四月 16, 2007 |

  13. 您好,不好意思,請問Hide encrypted text和Show encrypted text的差別在哪邊?只知道這兩種加密後的文字出來不太一樣,謝謝^^

    迴響 由 kaewnlonq | 四月 23, 2007 |

  14. To kaewnlonq:
    Hide encrypted text就是把加密後的密文隱藏起來,只留下一個解密的Link,Show encrypted text則是將密文顯示出來,並不會出現兩種解出來不一樣的內容,我在Demo中的Hide encrypted text是在測試所能加密的文章長度。

    迴響 由 Joseph | 四月 24, 2007 |


發表迴響

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

連結到 %s

Follow

Get every new post delivered to your Inbox.