我最近開(kāi)發(fā)了我的***個(gè)網(wǎng)頁(yè)游戲：一個(gè)HTML5的視頻智力游戲。開(kāi)發(fā)的過(guò)程很有趣，我喜歡編程，但當(dāng)實(shí)現(xiàn)了游戲邏輯后，我有了一個(gè)有趣的想法：為什么不想個(gè)辦法把代碼隱藏起來(lái)？起初我想到的是一些很簡(jiǎn)單的做法，比如禁止上下文菜單，以防右鍵點(diǎn)擊時(shí)可以查看頁(yè)面源代碼。但這毫無(wú)意義，右鍵菜單不能用，人們?nèi)匀豢梢酝ㄟ^(guò)鍵盤(pán)快捷鍵或菜單欄里的“查看源文件”來(lái)觀看源代碼。

一張圖片能隱含千言萬(wàn)語(yǔ)。

這依賴于圖片的體積。但我決定要把源代碼加密存放到一張圖片里。HTML5的畫(huà)布(canvas)組件很適合干這種事情，因?yàn)樗С轴槍?duì)圖像像素的操作。一個(gè)像素由四個(gè)值(通道)來(lái)表示：紅，綠，藍(lán)和alpha通道。它們的值的分布范圍是從0到255。我的Javascript代碼就是一個(gè)個(gè)的字符，每個(gè)字符都有一個(gè)ASCII對(duì)應(yīng)值。ASCII值的范圍也是0-255，所以，我想做的是，遍歷畫(huà)布上的每個(gè)像素，給每個(gè)像素設(shè)置3個(gè)代碼字符的ASCII值作為它的RGB值，你可以通過(guò)charCodeAt函數(shù)輕松的取出這些字符。

.charCodeAt(0) 

生成的是一張色彩斑斕、很小的圖片，它就是我的程序代碼 [[91102]] 。看看吧:

解碼的時(shí)候，我只需要把這個(gè)圖片畫(huà)到畫(huà)布上，遍歷像素點(diǎn)，取出r,g,b值所代表的字符：

String.fromCharCode(code) 

把它們連接成一個(gè)大的字符串，這就是你的代碼了——可執(zhí)行的代碼。 [[91102]]

這樣就能保護(hù)你的源代碼了嗎？

其實(shí)不能——一個(gè)有經(jīng)驗(yàn)的(甚至沒(méi)有經(jīng)驗(yàn)的)程序員仍然能夠知道如何去解碼圖片，取出里面的代碼，但我想這是能防止那些懷著不良商業(yè)目的人偷盜你的的代碼的***步措施——而那些能夠想出如何解碼的程序員(大部分)都不是來(lái)剽竊的 [[91104]]

這種方法的主要缺陷

這種技術(shù)只能應(yīng)用在支持HTML5畫(huà)布(canvas)技術(shù)的現(xiàn)代瀏覽器里，IE6、IE8 里肯定是不行的。甚至有些現(xiàn)代的瀏覽器對(duì)于圖片的alpha通道的編碼也有支持問(wèn)題，所以，每個(gè)像素點(diǎn)你只能放3個(gè)字符——一個(gè)100×100大小的圖片可以存放3萬(wàn)個(gè)文本字符。 [[91102]]

你還有其它簡(jiǎn)單的能防止別人拷貝你的代碼的方法嗎？我們當(dāng)然可以把字符進(jìn)行加密，但如何保證你的解密步驟能不被人輕易的破解呢？告訴我你的想法吧！

英文原文：A technique for hiding your JavaScript Code

本文鏈接：http://www.aqee.net/a-technique-for-hiding-your-javascript-code/