我們的日常工作已經(jīng)被各種需要?jiǎng)谛馁M(fèi)神的要素所占據(jù)，但對(duì)每個(gè)人來說，其中一大關(guān)鍵仍然值得高度關(guān)注：如何確保自己的應(yīng)用程序有能力抵御安全威脅。沒錯(cuò)，我們必須面對(duì)現(xiàn)實(shí)，安全考量已經(jīng)在整個(gè)開發(fā)流程當(dāng)中占據(jù)了大量時(shí)間。在今天的文章中，我希望能夠幫助大家了解安全因素在JavaScript與HTML 5開發(fā)環(huán)境當(dāng)中為何如此重要，我們又該如何想辦法以更為便捷的方式實(shí)現(xiàn)開發(fā)工作中的安全保障。

JavaScript一直保持著旺盛的發(fā)展勢(shì)頭，而我們也在實(shí)踐活動(dòng)中感受到了這項(xiàng)技術(shù)的強(qiáng)大潛能與發(fā)展空間。與此同時(shí)，Node.js等平臺(tái)的發(fā)布則讓我們進(jìn)行了一個(gè)全新紀(jì)元——在這里，開發(fā)流程將變得更加專業(yè)、安全且保持著不斷演進(jìn)。總而言之，大家應(yīng)當(dāng)盡可能挑選最適合自己的工作流程，而非長期被固化在習(xí)慣思路當(dāng)中，這也正是JavaScript的核心吸引力之一。

在另一方面，HTML 5則仍然在等待著自身官方標(biāo)準(zhǔn)版本的發(fā)布。W3C早在2011年就曾經(jīng)編寫過一套標(biāo)準(zhǔn)發(fā)行版，并告知技術(shù)社區(qū)預(yù)計(jì)最終標(biāo)準(zhǔn)版本將于2014年年內(nèi)正式推出。然而現(xiàn)在2015年都快結(jié)束了，我們還在等待著這位習(xí)慣性遲到的“標(biāo)準(zhǔn)”先生。

HTML 5中的新特性

• 跨來源資源共享機(jī)制
• 內(nèi)容安全保護(hù)策略
•  Web存儲(chǔ) & Web SQL
• 新的輸入與事件標(biāo)簽/屬性
• Web worker工作線程
• 沙箱iframe
• 地理定位

需要強(qiáng)調(diào)的是，安全關(guān)注及意義對(duì)于這兩款編程語言非常重要，因?yàn)樗鼈円呀?jīng)成為目前新手程序員們首選的學(xué)習(xí)起點(diǎn)（因?yàn)閾碛胸S富的說明材料可供遵循）。而且新人們不應(yīng)陷入一味追求學(xué)習(xí)進(jìn)度的誤區(qū)——我的意思是，每個(gè)人都應(yīng)該在學(xué)習(xí)過程中同時(shí)了解安全保障的重要意義，而這也正是編程工作當(dāng)中的關(guān)鍵性基礎(chǔ)因素。

不過也有一部分人樂于看到標(biāo)準(zhǔn)版本的延期發(fā)布，而他們的思路也非常明確——盡可能地參與到完整HTML 5標(biāo)準(zhǔn)的制定當(dāng)中。無論如何，我們的瀏覽器在未來將超越單純的網(wǎng)絡(luò)頁面瀏覽或者視頻觀看功能，迎接更為廣泛的發(fā)展前景。下面一起來看短期內(nèi)瀏覽器將具備的各類新功能：

• 執(zhí)行代碼（在線或者脫機(jī)形式）
• 與設(shè)備交互（包括攝像頭、麥克風(fēng)以及GPS等等）
• 播放多媒體及加速3D應(yīng)用程序
• 開啟TCP連接（面向任意主機(jī)）
• 指向本地存儲(chǔ)進(jìn)行數(shù)據(jù)讀取與寫入（數(shù)據(jù)庫及文件）
• 利用多線程實(shí)現(xiàn)并行計(jì)算

#p#

而這一切都需要借助我們的雙手逐步實(shí)現(xiàn)，因此大家應(yīng)當(dāng)意識(shí)到如果在開發(fā)流程當(dāng)中采取了錯(cuò)誤的實(shí)現(xiàn)方法——特別是在安全方面，那么必然會(huì)帶來高昂的修復(fù)成本以及大量棘手的難題。在多數(shù)情況之下，JavaScript的此類情況甚至更為嚴(yán)重，因?yàn)槲覀兊拇a內(nèi)容往往可由任意第三方進(jìn)行查看。為了解決此類問題，我個(gè)人總結(jié)出了幾下幾條方案。

學(xué)習(xí)如何對(duì)代碼進(jìn)行混淆處理

源代碼混淆是一種被廣泛應(yīng)用的保護(hù)機(jī)制，旨在限制針對(duì)軟件系統(tǒng)的潛在惡意逆向工程或者攻擊活動(dòng)。這項(xiàng)技術(shù)在JavaScript業(yè)界當(dāng)中非常流行，因?yàn)镴avaScript代碼本身并不存在編譯過程，而且其內(nèi)容能夠輕松為他人所窺探。那么我們?cè)摬扇∧男┚唧w手段？

JScrambler是一項(xiàng)JavaScript代碼保護(hù)與優(yōu)化服務(wù)。它能夠被用于保護(hù)各種類型的基于JavaScript的Web應(yīng)用程序，具體包括常規(guī)HTML/JS應(yīng)用、移動(dòng)應(yīng)用、HTML 5應(yīng)用、WebGL游戲、瀏覽器插件、功能組件甚至是Windows 8 Metro應(yīng)用。全部上述應(yīng)用程序已經(jīng)越來越多地開始利用JavaScript進(jìn)行構(gòu)建，但其所采用的明文傳輸機(jī)制也給軟件開發(fā)人員帶來了新的安全隱患。

既然大家已經(jīng)耗費(fèi)了可觀的時(shí)間與精力開發(fā)自己的應(yīng)用程序，那么為什么要讓競爭對(duì)手以簡單易行的方式竊取到我們的代碼內(nèi)容？而未受保護(hù)的代碼又可能引發(fā)哪些危險(xiǎn)后果？下面我們一起來了解：

• 聲譽(yù) — 聲譽(yù)往往是吸引用戶選擇我們應(yīng)用程序的最為重要的隱性資產(chǎn)，而一旦由安全漏洞引發(fā)的欺詐等惡意活動(dòng)襲來，由此帶來的苦果顯然只能由我們自己來承擔(dān)。
• 競爭關(guān)系 — 如果大家開發(fā)出的成果在市場(chǎng)上獨(dú)一無二，那么很可能會(huì)有競爭對(duì)手對(duì)代碼內(nèi)容進(jìn)行窺探——特別是其具體算法——并借此奪取競爭優(yōu)勢(shì)。這絕對(duì)是大家所不想看到的，對(duì)吧？
• 商業(yè)利益 — 想想我們耗費(fèi)在開發(fā)、維護(hù)、重寫以及思考方面的無數(shù)時(shí)光。未受保護(hù)的代碼極易被竊取，這樣我們長久以來的努力將直接被競爭對(duì)手所獲取，而可觀的潛在商業(yè)利益也將因此被拱手送人。
• 資源投入 — 我們的投資者在面對(duì)現(xiàn)有開發(fā)成果被他人山寨這類狀況時(shí)絕對(duì)會(huì)欲哭無淚，這種結(jié)果既對(duì)不起他們的信任與資源投入、更對(duì)不起我們自己為開發(fā)付出的無數(shù)艱辛。因此別忘了引入混淆機(jī)制，這樣大家都會(huì)更開心！

AuditMark公司是一家專門幫助開發(fā)人員及其應(yīng)用程序免受惡意攻擊、代碼竊取乃至未授權(quán)訪問侵?jǐn)_的服務(wù)供應(yīng)商。JScrambler則是該公司發(fā)布的一款產(chǎn)品，專門保護(hù)開發(fā)人員及程序員對(duì)抗第三方入侵者。

除了這款工具的必要性之外，我還想多提幾句其目前的功能定位及其能夠?yàn)閭€(gè)體應(yīng)用開發(fā)人員及企業(yè)帶來的代碼優(yōu)化靈活性。下面來看JScrambler的幾項(xiàng)突出優(yōu)勢(shì)：

• 有助于保護(hù)知識(shí)產(chǎn)權(quán)——例如具體算法——JScrambler能夠利用混淆技術(shù)遮蔽并保護(hù)實(shí)際算法，從而立足于JavaScript源代碼之內(nèi)防止各類惡意窺探行為。
• 保護(hù)我們的代碼不至于被直接重復(fù)使用或者竊取。盡管惡意人士獲取到的未必是我們的核心算法，但再小的代碼泄露都代表著我們的工作成果遭到了褻瀆。
• JavaScript原始代碼其實(shí)極易被挪用（或者說竊取），而在域鎖定以及混淆等技術(shù)機(jī)制的幫助下，大家將能夠從根本上強(qiáng)化這兩大層面的安全性水平。 大家可以實(shí)現(xiàn)域鎖定（即代碼只能在預(yù)設(shè)的特定域當(dāng)中執(zhí)行）并為自己的代碼設(shè)定過期日期。
• JScrambler能夠帶來其它安全工具難以比肩的寶貴安全層，如此一來黑客們將需要投入大量時(shí)間來找出應(yīng)用程序當(dāng)中的安全漏洞。另外JScrambler能夠運(yùn)行在多種平臺(tái)之上——這使其足以成為我們工作流程中的重要組成部分。

毫無疑問，我們應(yīng)當(dāng)將更多精力集中在更為嚴(yán)肅的安全保障舉措身上，而必要的軟件輔助手段當(dāng)然也是其中不可或缺的一環(huán)。之所以如此推崇JScrambler，是因?yàn)樗巧贁?shù)具備多平臺(tái)支持能力的安全工具。

#p#

學(xué)習(xí)如何高效進(jìn)行代碼調(diào)試

根據(jù)我的個(gè)人經(jīng)驗(yàn)，以高效方式調(diào)試JavaScript應(yīng)用程序幾乎是一項(xiàng)不可能完成的任務(wù)。不過幸運(yùn)的是，我們已經(jīng)擁有大量備選工具來解決這方面難題。Firebug就是其中的佼佼者，而其最大亮點(diǎn)就是包含大量針對(duì)DOM、XHR以及Web開發(fā)者工具欄的安全機(jī)制改進(jìn)。Chrome瀏覽器目前已經(jīng)內(nèi)置這款開發(fā)者工具。

//大家可以利用JavaScript中的catch函數(shù)輔助代碼調(diào)試工作。 
 
try { 
 
 // 此處為您的代碼內(nèi)容 
 
} catch (e) { 
 
 // Character No 
 
 // Stack Traces 
 
 // Works for cross origin 
 
} 

在現(xiàn)實(shí)生活當(dāng)中，我們最有力的調(diào)試工具往往是自己的朋友或者同事。相當(dāng)大家都有過無數(shù)次這樣的經(jīng)歷，就是有人走到自己面前并直接提出問題，而直到這時(shí)我們才意識(shí)到原來自己已經(jīng)被困在了思維習(xí)慣的束縛當(dāng)中。有鑒于此，學(xué)會(huì)提出正確的問題將成為開發(fā)工作得以成功的關(guān)鍵所在——而且如果足夠幸運(yùn)，也許大家的朋友正好在應(yīng)用程序安全領(lǐng)域頗有心得。

另外大家不妨試試Web Inspector——這是一款出色的調(diào)試工具，能夠幫助大家對(duì)面向移動(dòng)設(shè)備的代碼成果進(jìn)行分析。

‘use strict’; //有助于解決錯(cuò)誤與代碼問題

Strict模式是JavaScript當(dāng)中的一種可選限制機(jī)制，它能夠幫助大家在無需編譯器的情況下以更為安全的方式進(jìn)行JavaScript編程工作。事實(shí)上，致命錯(cuò)誤在整個(gè)開發(fā)流程當(dāng)中隨時(shí)可能出現(xiàn)，而strict模式能夠在一定程度上幫我們解決問題。

其設(shè)置方式非常簡單，大家只需將其添加到JavaScript文件的起始位置即可：'use strict';

不過需要強(qiáng)調(diào)的是，這一模式并不能解決我們可能遇到的全部代碼問題，但其往往能夠立足于瀏覽器為我們提供更多與問題相關(guān)的信息，從而幫助大家更清晰地了解問題的出現(xiàn)原因。另外，它確實(shí)是在函數(shù)當(dāng)中起效：

function CodeCondo() { 
 
      'use strict'; 
 
          .... 
 
} 

我建議大家點(diǎn)擊此處訪問Mozilla公司的官方網(wǎng)站，這里提供了更為詳盡的示例以及關(guān)于strict模式的解釋（英文原文），大家可以盡量加以利用。

#p#

學(xué)習(xí)如何更為透徹地理解Web安全

要提升應(yīng)用安全水平，大家還有另一種較為理想的選項(xiàng)，即更為透徹地理解Web安全及其起效方式。HTML 5與JavaScript都屬于腳本語言，而正因?yàn)槿绱怂鼈兒苋菀资艿匠Ｒ奧eb攻擊活動(dòng)的影響，具體包括跨站點(diǎn)腳本攻擊、跨站點(diǎn)請(qǐng)求偽造攻擊以及SQL注入攻擊。

大家應(yīng)當(dāng)通過實(shí)踐嘗試?yán)斫釽eb安全相關(guān)知識(shí)，從而讓自己編寫的代碼擁有更為出色的安全保障水平，這同時(shí)也有助于大家掌握代碼混淆等相關(guān)技術(shù)的基本原理與起效方式。大家并不一定需要在一夜之間把自己培養(yǎng)成黑客選手，但盡可能從另一個(gè)角度審視開發(fā)工作絕對(duì)能夠帶來可觀的收益，請(qǐng)相信我。

各類組織機(jī)構(gòu)在網(wǎng)絡(luò)安全領(lǐng)域已經(jīng)取得了相對(duì)不錯(cuò)的發(fā)展成果。不過面對(duì)已經(jīng)擁有相當(dāng)水平的網(wǎng)絡(luò)層安全保障，黑客們則開始針對(duì)計(jì)算堆棧中的更高層級(jí)組織薄弱點(diǎn)攻擊活動(dòng)。

而其中更值得關(guān)注的一點(diǎn)在于，目前攻擊者們的行為動(dòng)機(jī)已經(jīng)發(fā)生了重大轉(zhuǎn)變。他們不再像過去那樣單純?yōu)榱瞬┤￡P(guān)注并獲得名聲，而是傾向于集中精力獲取各類有價(jià)值信息，包括密碼、信用卡信息以及社保號(hào)碼，并借此獲取經(jīng)濟(jì)回報(bào)。

除此之外，黑客們開始將攻擊活動(dòng)的重點(diǎn)放在應(yīng)用層方面，這主要是因?yàn)閼?yīng)用程序本身已經(jīng)成為上述有價(jià)值數(shù)據(jù)的直接及便捷獲取通道。

如何安全地進(jìn)行開發(fā)工作

作為一名開發(fā)人員，大家可能會(huì)把提升個(gè)人技術(shù)水平作為第一要?jiǎng)?wù)——當(dāng)然，這確實(shí)是個(gè)不錯(cuò)的發(fā)展起點(diǎn)。不過大家如果從企業(yè)成員的角度出發(fā)，也應(yīng)當(dāng)考慮到安全問題給業(yè)務(wù)造成每天數(shù)千美元營收損失的可能性，而這類問題的根源往往只是一些愚蠢的錯(cuò)誤、被忽視的小問題甚至單純由于對(duì)安全缺乏足夠的關(guān)注。

我個(gè)人很偏愛安全開發(fā)這類議題，而且我的研究結(jié)論與親身經(jīng)歷也堅(jiān)定了自己將更多精力集中在這方面工作上的信心。學(xué)會(huì)如何構(gòu)建一套面向Web（包括HTML 5與JavaScript）的安全開發(fā)環(huán)境可能會(huì)成為大家未來幾年當(dāng)中最有價(jià)值也最值得高度關(guān)注的任務(wù)。

也許大家認(rèn)為像‘use strict’這類簡單的作法不值得自己耗費(fèi)精力或者時(shí)間加以關(guān)注。不過在真實(shí)世界當(dāng)中，正是這些小細(xì)節(jié)成就或者摧毀了規(guī)模可觀的整體商業(yè)模式——因此請(qǐng)以嚴(yán)肅的態(tài)度看待這一切。同志們，加油！

原文標(biāo)題：How to Develop Safely in HTML5 & JavaScript Environment

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】