使用 CSS 屬性設定之靜態網頁資訊隱藏技術
張詠馨1、賴沛錞2、周永振3*
1, 2, 3亞洲大學資訊工程學系
1[email protected], 2[email protected], 3[email protected]
摘要
網路與資訊科技的蓬勃發展，資訊傳送變得十分方便，然而在網路連結讓生活變得 十分便利的同時卻也衍生出許多資安問題，例如: 在傳送訊息時最擔心被有心人士擷取 或被竄改。對機密資料進行加密並傳送雖然是個不錯的方式，但是卻也因為密文看起來 雜亂無章反而更容易引起有心人士的關注。資訊隱藏技術是利用掩護媒體攜帶加密後的 機密資訊至隱藏在影像裡的安全傳送機密技術。許多數位媒體都可被用來當作資訊隱藏 時的負載媒體，最常見的是以數位影像為負載媒體。靜態網頁的組成是由許多標籤語言 與風格設計的屬性調整合作，因此存在許多彈性設定空間，也是十分適合用來當作資訊 隱藏的負載媒體。靜態網頁主要是透過HTML5與CSS的屬性設定達到豐富內容的網頁 表現，我們利用網頁設計時的一些彈性設定作法來達到隱示機密資訊的目的。嚐試透過 網頁中的色彩設定來進行資訊藏入，例如顏色的設定法就有rgb, hex, hsl與rgba等設定 法而且使用不同設定法仍可以得到同樣的視覺效果。除此之外，我們亦可以透過修改色 彩中的三原色值的LSB進一步多藏一些資料。經實驗測試，我們所提出的方法有效的將 大量機密資訊藏入到網頁檔案之中，而且藏有機密資訊的網頁與原始網頁有著同樣的視 覺品質。
關鍵詞：資訊隱藏、靜態網頁、機密資訊傳遞
Static Webpage Data Hiding Scheme Using CSS Attribute Setting
Yung-Shin Chang1, Pei-Chun Lai2, Yung-Chen Chou3*
1, 2, 3Department of Computer Science and Information Engineering, Asia University, Taichung 41354, Taiwan (R.O.C.)
1[email protected], 2[email protected], 3[email protected]
Abstract
Because of the advanced development of networking and information technique, data delivery more convenient than before. However, some information security issues have been raised due to the wildly connected public computer networks. Such as, how to ensure that the integrity of secret message and secure delivered to the right receiver. To encrypt the message as cipher text is an excellent way to achieve the goal of secret data delivery but it will attractive
unexpected user to pay extra attention on the cipher text. The reason is that the cipher text look like a meaningless random noise. Steganography is another way to securely deliver secret data.
The main idea of Steganography is using digital multimedia to play the cover media for carrying the encrypted secret message. Here, the cover multimedia includes Image, Video, Audio, Text file, Program, and HTML file. The image is one of most popular digital media used to carry the secret message. A beautiful static webpage is composed by several mark language tags cooperating with the style settings. As we know, the usage of mark language tag is very flexible for arranging the look of webpage. We inspired from the tag and CSS attribute setting to design the data embedding rules to conceal secret data into the source code of static webpage. We try to modify the color setting to carry secret message. For example, the color setting has four ways namely rgb, hex, hsl, and rgba. All of those setting can generate the same effect of webpage view. Furthermore, the values in color setting can apply the LSB substitution to imply the secret data and increase the embedding payload. From the experimental results, the proposed method success achieves the goal of secret data delivery with large embedding payload.
Keywords: Data hiding, Static webpage, Secret data delivery
壹、前言
隨著資訊科技的發展，取得資訊的方法變得越來越容易，使用者能輕鬆的從網路上 下載或複製各式各樣的資料。網路連結讓生活變得十分便利卻也衍生出許多資安問題，
例如: 在傳送訊息時最擔心遭到有心人士擷取或被竄改。為了強化機密資訊在網路上傳 送時的安全性，常見的作法是將機密資訊進行加密後傳送，但是看起來雜亂無章的密文 資料卻更容易引起有心人士的關注。於是「資訊隱藏技術」被發展來提高機密資訊傳送 的成功率，其主要概念是利用掩護媒體攜帶加密後的機密資訊並進行傳送以達到安全傳 送機密資訊的目的。
資訊隱藏技術 (Steganography) 是利用掩護媒體協助機密資訊傳送，因此，必須滿 足不容易察覺與高負載量的特性。一般而言，在網路上傳送的資料以多媒體資料最適合 當作負載媒體，主要是因為多媒體資料有許多冗餘資料空間可用來藏匿機密資料，此外，
多媒體資料就算被修改了，基於人體感官能力的極限所以很難看出多媒體資料被修改的 地方。這裡提到適合做為負載媒體的多媒體資料包含影像 (Image)、視訊 (Video)、音訊 (Audio)、文字檔 (Text file)及網頁 (Web page)等。數位影像 (Digital image) 是由許多像 素點 (Pixel) 所組成，像素值的大小代表著顏色光的強弱，數值愈大代表顏色光較強，
反之代表顏色光較弱。由於人眼對於顏色光的小幅度改變 (亦即像素值的小幅度改變) 不容易察覺，因此Chan與Cheng學者提出了修改影像中的像素值的幾個最低有效位元
(Least Significant Bits, LSB)用來藏匿機密資訊[1]。雖然像素值被改變了，可是人眼仍然 無法有效的辨識出藏有機密資訊的影像 (Stego image)與原始影像 (Original image) 之間 的差別[8][9][12]。
視訊 (Video) 可看成是由許多張影像的組成，這是利用人眼有視覺暫留的特性使得 在一秒鐘有 30 張影像以上播放時便不會覺得影像延遲。我們知道，數位影像具有許多 的冗餘空間可以被用來攜帶機密資訊，同樣的在視訊檔案中也具有同樣的情況。然而數 位視訊並不是透過修改影像幀 (Frame) 中的像素值，而是透過修改視訊壓縮編碼中的規 則來進行機密資訊隱藏。主要是因為視訊資料量龐大所以往往需要使用壓縮技術進行資 料量縮減的過程以節省儲存及傳輸時所需的成本[10]。
數位音訊 (Audio) 資料是將音樂或聲音的音量、旋律與頻率等相關資料數位化後儲 存起來。同樣的，人的耳朵敏銳度有限，對於過高或過低的聲音頻率是無法察覺的，然 而這些過高或過低的資料仍可以被儲存起來，也就是說在數位音訊中藏入機密資訊的作 法除了修改原有的音訊資料之外，也可以將機密資訊轉換成較高頻率或較低頻率的資料 儲存在音訊檔中。如此一來，有心人士即使播放這個Stego audio並不會察覺其中有異樣 之處。
靜態網頁是由 HTML5 的標籤與風格設計的 CSS 及提供使用者互動與特效的
Javascript所形成，如同大家熟知的，HTML5的標籤寫法有許多彈性以符合各式各樣的
網頁瀏覽需求，因此，將機密資料加密後透過修改HTML5的標籤或CSS的屬性設定來 達到藏匿機密資訊的目的。這裡提到的彈性設定法是指可以使用不同的設法得到同樣的 網頁效果。使用網頁來傳輸資料十分便利，只要有一台行動裝置連上網路後查看網頁並 運用檢視網頁原始碼或者解析網頁原始碼就可以輕鬆獲取藏在特別網頁中的機密資訊。
為了提昇使用網頁傳遞機密資訊的安全性，資料在藏入到網頁原始碼之前仍然需要經過 加密系統加密，如此一來就算有心人士從網頁上取得藏入的資料，當其在沒有解密金鑰 情況下仍然無從得知真實的機密資訊內容[2][4][7][11][13]。
使用網頁做為資訊傳輸的媒介主要概念是修改網頁標籤設定或調整 CSS 的屬性設 定來達到隱藏機密資訊的目的。Huang 等學者提出利用 HTML 標籤屬性設定的先後順 序不同進行機密資訊隱藏[5]。Lee與Tsai學者發現在網頁上顯示空白字元有許多種特殊 字元在網頁上也是示出空白字元，Lee與Tsai便利用不同的空白特殊字元來顯示英文文 章中的空白字元[6]。Yang 與 Yang 學者利用 HTML 的標籤屬性進行設定時使用引號
(Quote)或不使用引號進行設定藉此達到在 Webpage 中進行機密資訊藏入的目的[2]。
Chou 等學者利用Cartesian乘積的概念設計出組合多種特殊空白字元的組合用來顯示英 文文章中的空白字之外也用來達到隱示機密資訊的目的。
由上可知，許多學者針對使用 HTML 網頁作為傳遞機密資訊的負載媒體有深入的 研究，但是，上述的方法仍有可以改進的地方，例如 Huang 等學者提出的方法與 Yang 與 Yang學者的方法其資訊藏量非常有限。而 Lee與 Tsai學者的方法與Chou 等人的方 法則是受限於只能在英文系列的網頁才能有好的發揮，在中文網頁或其他語系比較沒有
空白字元的網頁便不太實用。另外，HTML標籤語言為了因應更廣泛的多媒體娛樂需求 而的不斷推陳出新及瀏覽技術大幅提昇，網頁的設計的使用技術變得更多樣化。同樣的 這些技術都具有良好的設計彈性(例如 CSS 的風格屬性設定)。由於 CSS 裡要做到同樣 的網頁風格效果可以使用多種屬性寫法，在檢視原始碼時也不會出現亂碼或是特殊代碼，
因此 CSS 設定十分適合用來藏入祕密訊息。舉例來說: 在 CSS 中有許多屬性具有多種 設定方式都可以達到同樣的網頁效果，例如padding屬性的值就有px、pt、%、em等表 示法，還有padding-left、padding-top等寫法，最後都有相同的網頁顯示結果，在原始碼 上看起來也不突兀，因此將機密資訊藏入CSS中就不會遭到有心人士的懷疑。
本論文之章節安排如下: 第二節將介紹 HTML 資訊隱藏相關背景知識及一些學者 曾提出來的方法。第三節將詳細的介紹我們所提出來資訊隱藏規則。第四節將列示實驗 結果以驗證我們提出來的方法有效性。第五節將整理本論文所做研究的重點並做出結論。
貳、文獻探討
機密資訊在進行隱藏之前一樣要先將資料進行加密，我們將簡單介紹加密技術。另 外，我們也將介紹 HTML與CSS 的設定法。接著會介紹學者們已經提出來的資訊隱藏 技術。
2.1 Data Encryption Standard (DES) (資料加密標準)
DES是一種對稱密鑰演算法[8]，由於它加解密十分便利且可以透過多重DES加密 達到更佳的安全性，因此很廣泛被運用各式各樣的場合。它的加密原理是將明文按64位 元進行分組並且使用64位的密鑰(只使用其中的56位，剩餘的第8、16、24、32、40、
48、56、64位元用於奇偶校驗)進行按位替代或交換的方法形成64位元密文塊。
2.2 HTML5 與CSS
網 頁 是 由 許 多 標 籤 (Tag)組 合 而 成 ， 大 部 份 的 標 籤 都 是 成 對 的 ， 例 如:
“<html></html>”，只有少部份的標籤是不需成對的，例如: <img>… 等。在標籤裡可以 加入屬性設定以達到網頁豐富化的效果。雖然 HTML5裡增強了許多多媒體相關的標籤 但也去移除了部份具有安全疑慮 (例如: iframe) 標籤的使用，還有就是已經在 CSS 中 有良好設定的標籤也不再使用(例如: Font)。Cascading Style Sheets (CSS)是一種用來添加 樣式(間距或顏色等)的網頁效果屬性設定法[13]。CSS由選擇器、屬性、值組成，屬性與 值之間用冒號隔開，例如: {font-size:1em;}。CSS的使用非常有彈性，如果只是少部份區 域需要設定可以在該區域直接設定，也稱之為inline設定法。另外一種，當某一個網頁
裡的很多同性質資料需要進行同樣的設定，則可以在 HTML 檔的<head></head>標籤中 以<style></style>標籤定義欲使用的風格設定，如此一來在<body></body>裡的資料如果 要使用到該風格就可以直接使用class= “style1”的形式進行套用，十分方便。這樣的作法
也稱之為 Internal 設定法。另外一種設定法稱之為 External，當有很多網頁都會使用到
同一種設定，而且這些網頁頁面內容希望都能保持一致，為了方便維護所以可以將這些 CSS設定定義在一個 style.css 檔裡，需要使用到這些設定的網頁只要在 <head></head>
設定之間加入 <link rel= “stylesheet” href= “style.css”>便可以套用在style.css中的相關設 定。圖一是一個簡單的範例，從圖一中我們可以看出 liStyle1 是透過 Internal 方式定義 下方的<li>標籤要顯示的格式，而li的套用該風格設定的方式為 <li class= “liStyle1”>即 可。此外，我們也可以透過像<H2>標籤裡加入style 屬性設定即可達到美化靜態網頁的 效果。CSS可用來設計網頁效果的項目非常豐富，例如: font-size: 16px是用來設定文字 的大小為16像素點; color: rgb(255, 0, 0)則是用來設定文字顏色為紅色的作法。
圖一:html與CSS範例
2.3 標籤字母大小寫藏匿法[11]
Sui與Luo學者提出透過修改HTML標籤的字母大小寫來隱示藏入的機密資訊[11]，
例如: 原始的標籤為<html>機密資訊為 “1011”且定義大寫字母表示為“1”反之表示為
“0”，那藏完機密資訊後的標籤就變成了“<HtML>”。圖二是一個簡單的範例，從圖中我 們可看出網頁原始碼經過藏入機密資訊後的標籤字體改變，但是網頁的顯示沒有私毫差 異。
圖二:Sui與Luo學者方法的範例
2.4 標籤屬性順序資訊藏入法[5]
Huang等學者使用html裡 font標籤屬性size(字體大小)、color(字體顏色)跟face(字 體)等屬性的排列順序組合來隱示嵌入的秘密信息[5]，例如藏入秘密訊息 11 用< font color = “black” face = “Times New Roman” size=“1”>來表達，表一是font屬性設置的編 碼表。表一整理了在font標籤屬性的排列順序用來表示資訊。圖三是一個簡單範例，從 範例中網頁原始碼的紅色標示區可看出標籤屬性在不同的排列順序下用來表示機密資 訊，當然使用<font>標籤來藏入資訊只是一個範例，只要是有多個屬性的標籤都是適合 來藏入機密資訊的。
表一:font標籤屬性的六種組合編碼表
組合 Bits
<font size, color, face> 00
<font size, face, color> 01
<font color, size, face> 10
<font color, face, size> 11
<font face, size, color> none
<font face, color, size> none
圖三:Huang等學者方法的範例 2.5 引號使用資訊藏入法[13]
Yang和Yang學者提出利用引號來嵌入秘密訊息[13]，例如<font color=“red”>和<font color='red'>一個是雙引號另外一個是單引號，但最後在網頁顯示的結果會是一樣的，因 此可以利用這點來藏機密資訊。例如單引號表示 0，雙引號表示 1。圖四是使用單引號 跟雙引號的網頁結果跟程式碼。
圖四:Yang與Yang學者方法的範例
2.6 空白特殊字元資訊藏入法[6]
Lee 與 Tsai 提出的網頁數據隱藏方法，藉由收集 html 中空白字符的多種特殊代碼 來嵌入秘密訊息[6]，英文文章的兩個單字間有大量的空白字符，選8種特殊代碼做成編 碼表，但此方法在檢視原始碼時會看到空白字符代碼，容易引來有心人士來解密破壞。
此外，此類作法僅適用於像英文或具空白字元的文章網頁中，中文網頁中的文章因較少 具有空白字元，便不適合使用這類方法。表二是空白字符代碼的編碼表。
表二:空白字符代碼編碼表 空白字符代碼 Secret Bits
Type space 000
  001
  010
011
  100
  101
  110
  111
  None
參、方法
為了確保資料在傳送過程不會被有心人士窺探，機密資料需先經過 DES 加密過後 變成密文再對照傳送方與接收方共同設定好的編碼表藏進 CSS 的多種屬性寫法中，最 後用html引用CSS，使外表看起來就像一般網頁。就算被人發現擷取下來，因為不知道 加密規則跟編碼表，所以也難以破解。在瞭解前人所提出的方法之後，我們發現使用CSS 來藏入機密資訊是一種非常可行的方法。在瞭解 CSS 的設定規則之後我們發現色彩設 定有許多種模式如RGB，HEX，HSL及HWB等，另外還有一種CMYK目前雖然還未
被列入HTML5的支援範圍，但未來可能會被CSS4所採用。
RGB是我們熟知的三原色(Red, Green, Blue)色彩系統，表示法為rgb(255, 0, 0)，其 中三個值分別代表紅色，綠色及藍色。每一個值範圍從0到255，所以透過三個值的調 整來達到顏色的設定，例如要顯示黃色是以rgb(255, 255, 0)，而藍色則為rgb(0, 0, 255)。
HEX (Hexadecimal Colors)三原色值分別以兩個16進位值表示，所以三原色中的每一種
顏色值從 00 到 FF。所以使用 HEX的設定法可從 #000000(表示為 黑色) 到 #FFFFFF
(顯示顏色為白色)，例如紅色的HEX表示為 #FF0000。圖五是三原色的示意圖。
圖五:三原色色彩系統示意圖
HSL色彩系統是指色調(hue)，飽和度(saturation)與亮度(lightness)，色調是指在彩色 輪上的色調值(0度~360度, 0是紅色，120度是綠色而240度為藍色); 飽和度是0%~100%
的色彩飽合程度，愈接近0%該顏色愈暗淡，而100%則是顯示該色彩非常札實飽合。亮 度的值也是介於 0%~100%之間，0%表示為無亮光所以是黑色，而 100%則是開啟最強 的光也就是白色。在 CSS 裡還有另外一種顏色的設定是使用加入透明度的 Alpha 層的
設定法rgba(red, green, blue, alpha)，這種設定的作用是在使用了RGB的顏色設定之後增
加物件的透明度。例如要在一張照片上加上層白色的薄霧可使用rgba(255, 255, 255, 0.4) 的設定，其中0.4是透明度，當數字為1時表示為不透明，0.0是全透明看不出有什麼顏 色。圖六是使用不同的色彩系統進行 div 標籤的背景色設定所得到的結果。從 RGB 色 彩系統轉換到HSL色彩系統最可經由公式1-3進行轉換，其中h[0, 360]度是色相角，
而s, l [0, 1]是飽和度與亮度，公式中的max與min指的是r, g,與b的值取最大值與最 小值。
ℎ =
{
0o 𝑖𝑓 𝑚𝑎𝑥 = 𝑚𝑖𝑛 60o× 𝑔 − 𝑏
𝑚𝑎𝑥 − 𝑚𝑖𝑛+ 0o 𝑖𝑓 𝑚𝑎𝑥 = 𝑟 𝑎𝑛𝑑 𝑔 ≥ 𝑏 60o× 𝑔 − 𝑏
𝑚𝑎𝑥 − 𝑚𝑖𝑛+ 360o 𝑖𝑓 𝑚𝑎𝑥 = 𝑟 𝑎𝑛𝑑 𝑔 < 𝑏 60o× 𝑔 − 𝑏
𝑚𝑎𝑥 − 𝑚𝑖𝑛+ 120o 𝑖𝑓 max = 𝑔 60o× 𝑔 − 𝑏
𝑚𝑎𝑥 − 𝑚𝑖𝑛+ 240o 𝑖𝑓 𝑚𝑎𝑥 = 𝑏
(1)
𝑠 = {
0, 𝑖𝑓 𝑙 = 0 𝑜𝑟 𝑚𝑎𝑥 = min 𝑚𝑎𝑥 − 𝑚𝑖𝑛
𝑚𝑎𝑥 + 𝑚𝑖𝑛= 𝑚𝑎𝑥 − 𝑚𝑖𝑛
2𝑙 , 𝑖𝑓 0 < 𝑙 ≤1 2 𝑚𝑎𝑥 − 𝑚𝑖𝑛
2 − (𝑚𝑎𝑥 + 𝑚𝑖𝑛)= 𝑚𝑎𝑥 − 𝑚𝑖𝑛
2 − 2𝑙 , 𝑖𝑓 𝑙 > 1 2
(2)
𝑙 =1
2(𝑚𝑎𝑥 + 𝑚𝑖𝑛) (3)
從HSL系統轉換成為RGB則需要經由公式4-13進行轉換得到rgb的值。當s=0表 示該顏色不是沒有飽和度所以其呈現的顏色是灰色的，此時r, g,與b會等於l。當s0時 表示為彩色經過公式4-13進行轉換成RGB的值，其中公式13中的𝐶 ∈ {𝑅, 𝐺, 𝐵}。我們 可以將網頁中的顏色設定部份依我們的需求自由的轉換，如此一來便可達到顯示同樣的 效果的目的。
𝑞 = {
𝑙 × (𝑙 + 𝑠), 𝑖𝑓 𝑙 <1 2 𝑙 + 𝑠 − (𝑙 × 𝑠), 𝑖𝑓 𝑙 ≥ 1 2
(4)
𝑝 = 2 × 𝑙 − 𝑞 (5)
ℎ𝑘 = ℎ
360 (6)
𝑡𝑅 = ℎ𝑘+1
3 (7)
𝑡𝐺 = ℎ𝑘 (8)
𝑡𝐵 = ℎ𝑘−1
3 (9)
If 𝑡𝐶 < 0 → 𝑡𝐶 = 𝑡𝐶+ 1.0 𝑓𝑜𝑟 𝑒𝑎𝑐ℎ 𝐶 ∈ {𝑅, 𝐺, 𝐵} (10) If 𝑡𝐶 > 1 → 𝑡𝐶 = 𝑡𝐶− 1.0 𝑓𝑜𝑟 𝑒𝑎𝑐ℎ 𝐶 ∈ {𝑅, 𝐺, 𝐵} (11) 𝑐𝑜𝑙𝑜𝑟 = (𝑐𝑜𝑙𝑜𝑟𝑅, 𝑐𝑜𝑙𝑜𝑟𝐺, 𝑐𝑜𝑙𝑜𝑟𝐵) = (𝑟, 𝑔, 𝑏) (12)
𝑐𝑜𝑙𝑜𝑟𝐶 =
{
𝑝 + ((𝑞 − 𝑝) × 6 × 𝑡𝐶), 𝑖𝑓 𝑡𝐶 < 1 6 𝑞, 𝑖𝑓 1
6 ≤ 𝑡𝐶 <1 2 𝑝 + ((𝑞 − 𝑝) × 6 × (2
3− 𝑡𝐶)) , 𝑖𝑓 1
2 ≤ 𝑡𝐶 <2 3 𝑝, 𝑜𝑡ℎ𝑒𝑟𝑤𝑖𝑠𝑒
(13)
透過圖六的範例，我們可以知道在網頁設計中許多地方需要使用顏色設定，因此，
在瞭解最基本的資訊隱藏方法 LSB (Least Significant Bits) 替換法之後，我們認為可以 透過搭配不同的顏色設定法來達到藏匿機密資訊的作法。主要的想法是使用rgb()，HEX，
HSL及rgba()方式設定可分別表示機密資訊“00”，“01”，“10”及“11”。此外為了達到更大
的資訊藏量，所以我們可以在rgb設定法中的red, green及blue的值的LSB也拿來藏機 密資訊，而HEX的三原色16進制值也可以拿來藏機密資訊，同樣的HLS與rgba()也可 以套用LSB的藏入方式進行隱藏。由LSB資訊隱藏技術可知使用LSB位數多可提高資 訊藏量，但是在色彩的改變也愈大，一般而言使用LSB=3是比較適合的選擇。
我們提出的方法主要步驟如下:
Input: 負載網頁 (Cover webpage)為 H，機密資訊為S
Output: 輸出藏有機密資訊的Stego webpage H’
Step 1: 使用DES或AES將S加密後產生二進制的加密後密文S’
Step 2: 產生機密資訊與CSS設定對應表 mt // (mt: mapping table)
Step 3: 解析 H 並找出有使用 Color 或使用 background-color的 CSS 設定
Step 4: 參考mt比對機密資訊找出對應的 CSS設定替代原本設定
Step 5: 檢查機密資訊是否全部藏入，如果已藏完則輸出 Stego webpage H’，否則重復執
行 Step 3~Step 5直到所有機密資訊都藏入H’
圖六:使用不同色彩系統得到的結果
範例:
假設，我們定義了一個機密資訊與 color 屬性設定的對照表如表三所示，而經過加 密後的機密資訊為“11001 01001 10000 00101”，經過修改藏入機密資訊後的 Stego
webpage 如圖七所示。
表三:機密資訊與color屬性設定範例對照表
機密 Color 屬性修改 範例 (LSB=1)
00 000 rgb(r/2*2, g/2*2, b/2*2) color: rgb(13, 11, 10) color: rgb(12, 10, 10) 00 001 rgb(r/2*2, g/2*2, b/2*2+1) color: rgb(13, 11, 10) color: rgb(12, 10, 11) 00 010 rgb(r/2*2, g/2*2+1, b/2*2) color: rgb(13, 11, 10) color: rgb(12, 11, 10) 00 011 rgb(r/2*2, g/2*2+1, b/2*2+1) color: rgb(13, 11, 10) color: rgb(12, 11, 11)
00 100 rgb(r/2*2+1, g/2*2, b/2*2) color: rgb(13, 11, 10) color: rgb(12, 10, 10) 00 101 rgb(r/2*2+1, g/2*2, b/2*2+1) color: rgb(13, 11, 10) color: rgb(13, 10, 11) 00 110 rgb(r/2*2+1, g/2*2+1, b/2*2) color: rgb(13, 11, 10) color: rgb(13, 11, 10) 00 111 rgb(r/2*2+1, g/2*2+1, b/2*2+1) color: rgb(13, 11, 10) color: rgb(13, 11, 11) 01 000 #rr/2*2 gg/2*2 bb/2*2 color: #0D 0B 0A color: #0C 0A 0A 01 001 #rr/2*2 gg/2*2 bb/2*2+1 color: #0D 0B 0A color: #0C 0A 0B
: : :
10 000 使用rgb(r/2*2, g/2*2, b/2*2) 轉HSL color: hsl(20, 13%, 5%) color: hsl(0, 9%, 4%) 10 001 使用rgb(r/2*2, g/2*2, b/2*2+1) 轉
HSL
color: hsl(20, 13%, 5%) color: hsl(330, 9%, 4%)
: : :
11 000 rgba(r/2*2, g/2*2, b/2*2, 1) color: rgba(13, 11, 10, 1) color: rgba(12,10,10, 1) 11 001 rgba(r/2*2, g/2*2, b/2*2+1, 1) color: rgba(13, 11, 10, 1) color: rgba(12,10,11, 1)
a) Stego Webpage顯示結果
b) Stego webpage 網頁原始碼 圖七:網頁用來藏入機密後的結果
資訊擷取 (Data extraction)
由於要用來當負載資訊的網頁一開始就經由發送者與接收者協調好了，因此，正確 的訊息接收者可透過簡單的網頁原始碼解析找出網頁中跟顏色相關的屬性設定，並依事 先溝通好的密碼對照表找出對應的機密資訊內容，接著再將取出的機密串接起來，串接 出來後的依然是經過加密的密文資料。由於訊息接收者擁有正確的解密金鑰，所以可以 順利解出正確的機密訊息。
肆、實驗結果
為了測試我們所提方法的有效性，我們使用Octave進行網頁原始碼的解析，並加入 藏匿機密資訊的規則將資料藏入到網頁裡的CSS設定中。從圖七的測試結果可看出，雖 然我們藏入了一些機密資訊但是在瀏覽網頁資料時是看不出有任何差異的，即使每一個 div 段落的文字使用不同的顏色設定法，網頁上看到的結果是一樣的絲毫沒有差異。網 頁資訊隱藏與影像數位隱藏不同，數位影像資訊隱藏可以透過像素的差異計算 PSNR (Peak-Signal-Noise-to-Ratio) 或 SSIM (Structural Similarity Index Measure)得到一個客觀 的比較指標，當PSNR的值愈高表示負載影像與原始影像愈相似，反之則表示負載影像 被破壞的程度愈高。但在網頁影像隱藏裡目前沒有類似的衡量指標可進行分析。
我們使用常用的網頁瀏覽器Safari，Firefox，Chrome及Opera等進行負載網頁的查 看(請參看圖八)，我們可以發現看到的網頁內容是一致的。另外，假設有心人士使用檢 視原始碼查看則前人的方法很容易就會被察覺出來有異樣，例如 HTML 標籤屬性變定 的引號使用，同一位網頁開發者往往都會有一致的用法，當有心人士查看到屬性設定的 引號用法不一致反而容易讓人起疑。另外，用標籤字母大小寫也會有同樣的情況，使用 者只要看到標籤大小寫字母不一致是容易聯想到有藏機密資訊的。其他像 Li 與Tsai 學 者的方法以及使用標籤屬性順序排列組合的方法也都存在同樣的風險。而本篇提出來來 的方法是在 CSS 的調整上進行資訊隱藏，有心人士很難使用檢視原始碼就可以察覺異 樣。另外一方面，我們提出來的方法在資訊藏量上非常有彈性，假設當需要用到顏色設 定的 標籤數量不多，此時可以彈性加入 <span></span>的標籤來增加藏入的機密數，如 此一來就算機密資訊再多也一樣可以藏到數位影像之中。當然<span></span>標籤中又不 含任何其他網頁要顯示的內容，很可能會讓有心人士產生疑慮。所以這是一個魚與熊掌 不可兼得的問題。即使有心人士取出機密資訊了，但在其未握有正確解密金鑰時一樣還 是無法看到真正的機密資訊，因為藏在靜態網頁中的機密資訊都經過事先加密過的。
a) 使用Safari瀏覽器查看的結果
b) 使用Firefox瀏覽器查看的結果
c) 使用Chrome瀏覽器查看的結果
d) 使用Opera瀏覽器查看的結果
圖八:網頁用來藏入機密後的結果
伍、結論
靜態網頁比數位影像更適合擔任負載媒體的角色，因為網頁是透過伺服器提供網使 用者瀏覽用的，只要可以進行網頁連線就可以看到網頁並進行解析，所以其不像數位影 像有可能遭受阻斷傳送的影響，造成無法成功傳遞機密資訊的目的。在HTML網頁的設 計上有許多彈性設定法，提供了非常好的機密資訊藏匿管道。CSS中有些屬性能有多種 寫法，例如: padding、margin及各種Color的設定方法，例如:color、background-color等 都能用來隱藏資訊。經過我們實驗的結果發現，我們的機密資訊傳遞方法可以成功達到 傳機密資訊的目的，同時不會影響靜態網頁的視覺影響。同時我們的方法並不需要大量 的計算成本，需要的只是非常簡單的網頁標籤語言解析操作即可。
參考文獻
[1] C. K. Chan and L. M. Cheng, “Hiding Data in Images by Simple LSB Substitution,”
Pattern Recognition, Vol. 37, No. 3, pp. 469-474, Mar. 2004.
[2] Y. C. Chou, C. Y. Huang and H. C. Liao, “A Reversible Data Hiding Scheme Using Cartesian Product for HTML File,” Proceedings of the Sixth International Conference on Genetic and Evolutionary Computing (ICGEC - 2012), Kitakyushu, Japan, pp. 153-156, Aug. 2012.
[3] S. Dey, H. Al-Qaheri and S. Sanyal “Embedding Secret Data in HTML Web page,” Image Processing & Communications Challenges, pp. 474–481, 2009.
[4] B. Feng, J. Weng, W. Lu and B. Pei, “Steganalysis of Content-adaptive Binary Image Data Hiding,” Journal of Visual Communication and Image Representation, Vol. 46, pp. 119- 127, July 2017.
[5] H. J. Huang, S. H. Zhong and X. M. Sun, “An Algorithm of Webpage Information Hiding Based on Attributes Permutation,” Proceedings of the Fourth International Conference on Intelligent Information Hiding and Multimedia Signal Processing, Harbin, China, pp. 257- 260, Aug. 2008.
[6] I. S. Lee and W. H. Tsai, “Secret Communication through Webpages Using Special Space Codes in HTML Files,” International Journal of Applied Science and Engineering, Vol. 6, No. 2, pp. 141-149, 2008.
[7] H. C. Liao, “Based on HTML Tag Attribute and CSS Style Setting Data Hiding Technique,”
Master Thesis, Asia University, 2014.
[8] C. H. Liu, J. S. Ji and Z. L. Liu, “Implementation of DES Encryption Arithmetic based on FPGA,” AASRI Conference on Parallel and Distributed Computing Systems, Vol. 5, pp.
209-213, 2013.
[9] Z. L. Liu and C. M. Pun, “Reversible Data-hiding in Encrypted Images by Redundant Space Transfer,” Information Sciences, Vol. 433–434, pp. 188-203, Apr. 2018.
[10] M. Ramalingam and N. A. M. Isa, “A Data-hiding Technique Using Scene-change Detection for Video Steganography,” Computers & Electrical Engineering, Vol. 54, pp.
423-434, Aug. 2016.
[11] X. G. Sui and H. Luo, “A New Steganography Method based on Hypertext,” Proceedings of 2004 Asia-Pacific Radio Science Conference, Qingdao, China, pp. 181—184, 24-27 Aug. 2004.
[12] Z. Tang, Q. Lu, H. Lao, C. Yu, and X. Zhang, “Error-free Reversible Data Hiding with High Capacity in Encrypted Image,” Optik, Vol. 157, pp. 750-760, Mar. 2018.
[13] Y. J. Yang, and Y. M. Yang, “An Efficient Webpage Information Hiding Method Based on Tag Attributes,” Proceedings of the Seventh International Conference on Fuzzy Systems and Knowledge Discovery, Yantai, China, pp. 1181-1184, Aug. 2010.
