基于HTML5的圖像混沌加密研究與實(shí)現(xiàn)

姚遠(yuǎn)　余攀

摘要；該文介紹了在網(wǎng)站開(kāi)發(fā)中的最新版本HTML5基礎(chǔ)之上，實(shí)現(xiàn)數(shù)字圖像的混沌加密及其在網(wǎng)絡(luò)傳輸?shù)膶?shí)現(xiàn)方法，對(duì)三維Lorenz混沌系統(tǒng)作離散化處理，用javascript語(yǔ)言和canva8技術(shù)實(shí)現(xiàn)三維Lorenz混沌迭代序列，分別對(duì)本地選擇的數(shù)字圖像的紅、綠、藍(lán)三基色信號(hào)進(jìn)行混沌加密，并對(duì)使用Ajax傳輸?shù)椒?wù)器端的加密圖像進(jìn)行混沌解密，提出了一種混沌應(yīng)用到Canvas對(duì)圖像處理的發(fā)展方向

關(guān)鍵詞：HTMIA；canvas；混沌圖像加密；Ajax

中圖分類號(hào)：TN905；TN908 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2017）07-0066-03

隨著信息技術(shù)的發(fā)展，網(wǎng)絡(luò)技術(shù)的不斷提高，上網(wǎng)已成為人們生活不可缺少的一部分，人們對(duì)網(wǎng)頁(yè)的圖形和圖像的處理的要求及加密技術(shù)也越來(lái)越高，圖像具有像素間相關(guān)性高、冗余度大等特點(diǎn)，而利用網(wǎng)絡(luò)來(lái)傳遞數(shù)據(jù)有著不可替代的優(yōu)越性，與此同時(shí)，利用網(wǎng)絡(luò)來(lái)傳輸數(shù)字圖像數(shù)據(jù)，在傳送過(guò)程中常會(huì)受到病毒攻擊，信息竊取等人為攻擊，選擇合適的數(shù)字圖像加密技術(shù)以及當(dāng)下最新計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)，對(duì)提高圖像的信息安全性有著至關(guān)的重要作用。

作為非線性系統(tǒng)之一的混沌系統(tǒng)，其特有的比如對(duì)初始條件的敏感性、不收斂性，非周期性、類噪聲性等特性使得他具有天然的隱蔽性和長(zhǎng)期的不可預(yù)測(cè)性，很適合應(yīng)用于密碼學(xué)領(lǐng)域。本文提供了通過(guò)HTML5表單選擇本地圖片數(shù)據(jù)，并通過(guò)canvas繪圖技術(shù)與javascdpt的結(jié)合對(duì)圖片進(jìn)行數(shù)據(jù)處理，最終通過(guò)Ajax進(jìn)行傳輸?shù)胶笈_(tái)進(jìn)行解密保存，實(shí)現(xiàn)網(wǎng)頁(yè)上在線加密傳輸。

1HTML5概述

HTML5不僅僅是一次簡(jiǎn)單的技術(shù)升級(jí)，更代表了未來(lái)web開(kāi)發(fā)的方向，最早有來(lái)自Apple、Mozilla、Google、Opera等瀏覽器廠商的人組成，2004年成立。并開(kāi)發(fā)HTML和web應(yīng)用API，同時(shí)為各瀏覽器廠商及其其他有意向組織提供開(kāi)放式合作，并與2012年HTML5規(guī)范編寫(xiě)完成。同以前的html相比，Html5并不是顛覆性的革新，保持一切新特性平滑過(guò)渡，并增加了許多的新功能，例如繪圖，實(shí)時(shí)和跨源通訊，后臺(tái)處理，HTML表單，視音頻支持，繪圖等等，html5會(huì)使HTML這個(gè)一度單純的標(biāo)記語(yǔ)言成為強(qiáng)力的開(kāi)發(fā)工具，將徹底改變現(xiàn)有的web應(yīng)用模式，最終完成將Web帶入一個(gè)成熟應(yīng)用平臺(tái)的使命。

1.1HTML5 File對(duì)象

在HTML5中，Javascript得以獲得更多的權(quán)限來(lái)處理文件，被允許獲得文件的“文件名”，“大小”等等信息，并允許通過(guò)一些不同的方式，獲得文件的內(nèi)容，但這不意味著瀏覽器可以任意的訪問(wèn)用戶的內(nèi)容，只能被動(dòng)的方式獲得文件，切確的而言，可以通過(guò)file input和用戶的拖放操作獲取到文件，這些信息都被放在了File對(duì)象里面，在這里給出兩種方式獲得file對(duì)象的方法：

1）通過(guò)input獲得file對(duì)象的方法

}

1.2Canvas

HTML5的canvas API，能方便地在web頁(yè)面上進(jìn)行圖片的處理，而無(wú)須借助任何第三方插件的情況下，借助Javascript腳本在web頁(yè)面進(jìn)行繪圖，例如直線、矩形、弧形、曲線等，可以繪制圖片以及文字，同時(shí)能夠獲取圖片的像素，對(duì)像素進(jìn)行各種數(shù)學(xué)運(yùn)算，實(shí)現(xiàn)對(duì)圖像進(jìn)行各種效果處理，用Canvas繪制的圖像，交互性更加靈活，并且相比較其他web的圖形圖像處理技術(shù)，HTML5的canvas具有更方便、快捷的優(yōu)勢(shì)，是未來(lái)web上處理圖形圖像的趨勢(shì)所在，主要的繪圖函數(shù)介紹如表；

1.3Ajax

Ajax的特點(diǎn)是局部刷新頁(yè)面、它并不是新技術(shù)，而是之前技術(shù)的整合，包括的技術(shù)有：javascript、XML、CSS、XMLHttpRequest，并且是異步發(fā)送請(qǐng)求以后，不等結(jié)果，由回調(diào)函數(shù)處理，它的核心原理主要是XMLHttpRequest對(duì)象，通過(guò)該對(duì)象向服務(wù)器發(fā)送請(qǐng)求，所有現(xiàn)代的瀏覽器都支持，使用方法如以下幾個(gè)步驟；

（1）創(chuàng)建XMLHttpRequest對(duì)象

（2）使用XMLHttpRequest對(duì)象的屬性與方法：

（a）方法：open（"GET/POST"，URL，true/false）；用來(lái)向服務(wù)器建立連接

send（data）：發(fā)送請(qǐng)求

（b）屬性：

onreadystatechange：設(shè)置狀態(tài)改變時(shí)的回調(diào)函數(shù)，回調(diào)函數(shù)用來(lái)獲取服務(wù)器數(shù)據(jù)。

readyState：服務(wù)器狀態(tài)響應(yīng)

responseText：服務(wù)器返回的數(shù)據(jù)（文本格式）

responseXML：服務(wù)器返回的數(shù)據(jù)（XML格式）

2混沌加密方案

在一個(gè)高效而又便于實(shí)現(xiàn)的保密通信系統(tǒng)中，如何進(jìn)行加解密是非常重要的環(huán)節(jié)，這里介紹一下圖片數(shù)據(jù)加密過(guò)程，如下圖所示：

2.1混沌加密算法的設(shè)計(jì)

本文設(shè)計(jì)的正李指數(shù)無(wú)簡(jiǎn)并離散時(shí)間系統(tǒng)，能滿足正李指數(shù)的個(gè)數(shù)等于系統(tǒng)的維數(shù)，并且不存在零指數(shù)和負(fù)指數(shù)，正李指數(shù)的個(gè)數(shù)達(dá)到了最大，與此同時(shí)，通過(guò)調(diào)節(jié)系統(tǒng)的參數(shù)，使得正李指數(shù)盡可能大，與已有的混沌系統(tǒng)相比，正李指數(shù)無(wú)簡(jiǎn)并混沌系統(tǒng)具有更好的隨機(jī)統(tǒng)計(jì)特性，設(shè)計(jì)過(guò)程如下；

1）制定標(biāo)稱系統(tǒng)的一般形式為

（1）

2）對(duì)矩陣C作相似變換，為了實(shí)施有效控制

（2）

式中P為非奇異矩陣。于是原來(lái)系統(tǒng)改為

（3）

3）設(shè)計(jì)控制矩陣B和反控制器g（σx（k），ε），對(duì)（2.3）式進(jìn)行混沌反控制，得到的受控系統(tǒng)全局有界，系統(tǒng)表達(dá)式如下；

x（k+1）=Ax（k）+Bg（σx（k），ε） （4）

4）根據(jù)前面的表達(dá)式，進(jìn)行極點(diǎn)配置，使得正李氏指數(shù)的個(gè)數(shù)達(dá)到最大置，最終得到正李指數(shù)無(wú)簡(jiǎn)并3D混沌系統(tǒng)的迭代方程

（5）

2.2加密方案的實(shí)現(xiàn)

對(duì)圖像混沌加密過(guò)程如下；

Step1：打開(kāi)數(shù)字圖像文件，在瀏覽器窗口中，通過(guò)Fge對(duì)象通過(guò)兩種方式獲取到圖片數(shù)據(jù)，前面已給出獲取的方法，并將獲取的圖片數(shù)據(jù)信息裝載進(jìn)一個(gè)數(shù)組容器里。

Step2：創(chuàng)建畫(huà)布，寬高又選擇的圖片大小決定，并將選擇的圖片數(shù)據(jù)先進(jìn)行顯示，用來(lái)做對(duì)比，使用canvas的繪圖函數(shù)getIrnageDataO獲取圖片數(shù)據(jù)并獲取其中每一幀數(shù)據(jù)，這里代碼如下：

Step3：先將圖像置亂處理，再根據(jù)三維離散時(shí)間系統(tǒng)的方程迭代產(chǎn)生的混沌序列與置亂后的圖像數(shù)據(jù)R，G，B進(jìn)行按位運(yùn)算，從而形成總的迭代序列，再將得到的序列去驅(qū)動(dòng)狀態(tài)方程，將圖像信息隱藏到混沌序列里，不斷改變每一幀圖像數(shù)據(jù)，不斷重復(fù)置亂與迭代。

Step4：將加密后的圖片數(shù)據(jù)展示在畫(huà)布上，并轉(zhuǎn)換成合適的Blob格式進(jìn)行Ajax傳輸，前面也給出傳輸?shù)姆椒?，下面是展示代碼：

Step5：服務(wù)器端得到的加密圖像，解密過(guò)程是加密的逆過(guò)程，本文后臺(tái)使用的是PHP語(yǔ)言解密，這里出于安全性不再敘述。

3具體的實(shí)現(xiàn)

本文中使用的是Dreamweaver+Wamp搭建了本地服務(wù)器來(lái)模擬正常的網(wǎng)站后臺(tái)。從網(wǎng)上下載好Wamp后進(jìn)行安裝配置，并登錄主頁(yè)測(cè)試可使用，在Dreamwear中新建站點(diǎn)，并使用wamp中的www文件作為服務(wù)器的地址，使用一款los系統(tǒng)的手機(jī)和android手機(jī)分別登錄搭建好的網(wǎng)站，以測(cè)試是否可正常使用，分別創(chuàng)建文件index.html，index.js，index.css，doAction.php。index.html是測(cè)試展示頁(yè)面，主要負(fù)責(zé)將選擇的圖片和加密后的圖片進(jìn)行展示，index.cs8主要是控制展示的位置以及頁(yè)面的整體布局，index.js主要是邏輯控制，獲取到圖片信息進(jìn)行加密和傳輸，doAction.PHP主要是接收到瀏覽器端傳輸?shù)募用軋D片，進(jìn)行解密保存。下面給出測(cè)試的效果圖：

4結(jié)論

HTML5作為時(shí)下流行的技術(shù)，是網(wǎng)頁(yè)未來(lái)發(fā)展的趨勢(shì)，作為HTML5核心的canvas技術(shù)，今后必然會(huì)活躍于舞臺(tái)之上，成為web開(kāi)發(fā)界一個(gè)重中之重的內(nèi)容。本文探討了Callvas作為圖像處理軟件的載體的可行性分析，并且結(jié)合在加密領(lǐng)域流行的混沌加密算法，再結(jié)合Ajax，實(shí)現(xiàn)了選擇本地圖片數(shù)據(jù)加密，并進(jìn)行傳輸?shù)椒?wù)器端解密保存的功能，論文也探討了在瀏覽器這種有限的資源環(huán)境中，使用復(fù)雜的圖像處理算法來(lái)實(shí)現(xiàn)客戶端或者Flash才具備的處理能力，也為混沌加密算法應(yīng)用提供了一個(gè)發(fā)展的方向。