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

23 則留言:

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

    (感動ing)

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

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

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

    榮幸阿...超級阿..

    真的感謝^^ 打擾囉....

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

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

    <(_._)>

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

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

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

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

    回覆刪除
  7. 十分感谢了,知道了。

    回覆刪除
  8. 感謝這篇文章.. 真的很實用。

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

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

    請大大解惑 >.<

    回覆刪除
  9. 解決了 ...

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

    可是我想隱藏 >"<

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

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

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

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

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

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

    回覆刪除
  15. 您好, 請教一個問題: 我有朋友在中國工作, 想要寫blog, 可是那邊會進行封鎖. 這位朋友貼了一些對中國的看法之後, 就進不去自己的部落格了. 想請問這個加密法, 對於躲避網路文字警察有沒有用呢? 不好意思我很不懂~"~

    又, 用了您的無腦安裝, 非常感謝^^.

    回覆刪除
  16. 您好,我在網路上看到了加密的方法,自己跑去作者部落格學著弄了一下,在自己的部落格上卻無法跳出輸入密碼的視窗....

    後來找到您這裡,你的教學跟我之前弄的步驟差不多,我看了您的 demo ,但是您的 demo 在我的電腦不管是 ie還是 firefox 還是都無法跳出密碼視窗...

    但是這個網站的卻可以
    http://veenix.blogspot.com/2006/07/encrypted-blog-posts.html

    不知道問題是出在哪裡呢?
    懇請賜教...

    回覆刪除
  17. 想請問一下
    欲加密文章的長度
    是否會影響讀取
    或是顯示不出key密碼的小室窗

    我很愛抱怨
    可是好像只有比較短的文章才會順利
    長一點的文章點了"顯示加密後的文章"
    也沒有回應
    想請教一下是否需要考量一下文章長度的問題
    duncanhsu13@gamil.com

    回覆刪除
  18. 謝謝!
    終於解決我的困擾!

    回覆刪除
  19. 謝謝這篇文章:)
    感謝您的網誌
    讓我能更加順利的使用Blogger!!

    回覆刪除
  20. 想請問一些問題....
    可以給我你的MSN嘛>"<

    回覆刪除
  21. 不好意思~"~因為我是新手不太懂~"~
    步驟一的程式碼要加在哪呢?我是不知道要加在什麼範本ㄟ...
    步驟四的DEMO程式碼是要加在想要鎖碼文章的HTM最前端嘛?

    回覆刪除