你必須要知道的4個(gè)前端安全編碼規(guī)范
源自：https://segmentfault.com/a/1190000037657222
聲明：文章著作權(quán)歸作者所有，如有侵權(quán)，請聯(lián)系小編刪除。
前言
隨著互聯(lián)網(wǎng)高速的發(fā)展，信息安全已經(jīng)成為企業(yè)重點(diǎn)關(guān)注焦點(diǎn)之一，而前端又是引發(fā)安全問題的高危據(jù)點(diǎn)，所以，作為一個(gè)前端開發(fā)人員，需要了解前端的安全問題，以及如何去預(yù)防、修復(fù)安全漏洞。下面就以前端可能受到的攻擊方式為起點(diǎn)，講解web中可能存在的安全漏洞以及如何去檢測這些安全漏洞，如何去防范潛在的惡意攻擊。
1. 跨站腳本攻擊（Cross Sites Script）
跨站腳本攻擊，Cross Site Script（簡稱 CSS或）。指黑客通過“HTML注入”篡改了網(wǎng)頁，插入了惡意的腳本（主要是JavaScript腳本），從而在用戶瀏覽網(wǎng)頁時(shí)，控制用戶瀏覽器的一種攻擊。
了解了什么是XSS，那你一定想知道，它有什么危害以及如何去防御 這里羅列一張列表：
掛馬 盜取用戶Cookie。 釣魚攻擊，高級的釣魚技巧。 刪除目標(biāo)文章、惡意篡改數(shù)據(jù)、嫁禍。 劫持用戶Web行為，甚至進(jìn)一步滲透內(nèi)網(wǎng)。 爆發(fā)Web2.0蠕蟲。 蠕蟲式掛馬攻擊、刷廣告、刷瀏量、破壞網(wǎng)上數(shù)據(jù) 其它安全問題
常見的跨站腳本攻擊也可分為：反射型XSS、存儲型XSS、DOM Based XSS 下面針對這三種常見的類型做具體的分析
1.1 反射型XSS--也可被稱為是HTML注入
反射型XSS，也稱為"非持久型XSS"簡單的把用戶輸入的數(shù)據(jù)"反射"給瀏覽器，即黑客往往需要誘使用戶"點(diǎn)擊"一個(gè)惡意鏈接攻擊才能成功，用戶通過點(diǎn)擊這個(gè)惡意鏈接，攻擊者可以成功獲取用戶隱私數(shù)據(jù)的一種方式。如："盜取用戶Cookie信息"、"破壞頁面結(jié)構(gòu)"、"重定向到其他網(wǎng)站"，盜取內(nèi)網(wǎng)IP等。?
那么既然反射型XSS也可以是HTML注入，那么它注入的關(guān)鍵自然也就從前端的HTML頁面開始下手：
1. 用戶能夠與瀏覽器頁面產(chǎn)生交互動作（輸入搜索的關(guān)鍵詞，點(diǎn)擊按鈕，點(diǎn)擊鏈接等等），但這些都需要去誘使用戶去操作，說起來容易，做起來難。
2.?用戶輸入的數(shù)據(jù)會被攻擊方拼接出合適的html去執(zhí)行惡意的js腳本，這樣的過程就像是"一次反射"
1.2 存儲型XSS
存儲型XSS，也稱為"`持久型XSS`"，它與`反射型XSS`不同之處在于，它會將用戶輸入的數(shù)據(jù)"存儲"在攻擊方的服務(wù)器上，具有很強(qiáng)的"穩(wěn)定性"。
例如：訪問某黑客寫下的一篇含有惡意JavaScript代碼的博客文章，黑客把惡意腳本保存到服務(wù)端。
1.3 DOM based XSS
從效果上來說，也是"反射型XSS"，單獨(dú)劃分出來，是因?yàn)槠湫纬墒峭ㄟ^修改頁面的"DOM節(jié)點(diǎn)"形成的XSS。
例如：通過修改DOM節(jié)點(diǎn)上的綁定方法，用戶無意間通過點(diǎn)擊、輸入等行為執(zhí)行這些方法獲取到用戶的相關(guān)信息
1.4 如何去檢測是否存在XSS
一般方法是，用戶可以在有關(guān)鍵字輸入搜索的地方輸入****后點(diǎn)擊搜索，若彈框出現(xiàn)展示123，說明存在XSS漏洞，這就說明前端并沒有對用戶輸入的內(nèi)容過濾處理。
1.5 XSS的攻擊方式
1.Cookie劫持
通過偽裝一些`圖片和按鈕`等，誘使用戶對其操作，使網(wǎng)頁執(zhí)行了攻擊者的惡意腳本，使攻擊者能夠獲取當(dāng)前用戶的Cookie信息
2.構(gòu)造GET和POST請求
若某攻擊者想刪除某網(wǎng)站的一篇文章，首先獲得當(dāng)前文章的id，然后通過使用腳本`插入圖片`發(fā)送一個(gè)`GET請求`，或`構(gòu)造表單`，`XMLHTTPRequest`發(fā)送`POST請求`以達(dá)到刪除該文章的目的
3.XSS釣魚
`釣魚`這個(gè)詞一般認(rèn)識是起源于`社會工程學(xué)`，黑客使用這個(gè)這門學(xué)科的理念思想，在未授權(quán)不知情的情況下誘騙用戶，并得到對方對方的姓名、年齡、郵箱賬號、甚至是銀行卡密碼等私人信息。
比如："某用戶在某網(wǎng)站（已被攻擊）上操作黑客偽造的一個(gè)登錄框，當(dāng)用戶在登錄框中輸入了用戶名（這里可能是身份證號等）和密碼之后，將其信息上傳至黑客的服務(wù)器上（該用戶的信息就已經(jīng)從該網(wǎng)站泄漏）"
4.獲取用戶真實(shí)的IP地址
通過第三方軟件獲取，比如客戶端安裝了Java環(huán)境（JRE），則可通過調(diào)用`Java?Applet`的接口獲取客戶端本地的IP地址
1.6 XSS的防御方式
1.HttpOnly
原理：瀏覽器禁止頁面的Javascript訪問帶有HttpOnly屬性的cookie。（實(shí)質(zhì)解決的是：XSS后的cookie劫持攻擊）如今已成為一種“標(biāo)準(zhǔn)”的做法
解決方案：
JavaEE給Cookie添加HttpOnly的方式為：
response.setHeader("Set-Cookie","cookiename=value;?Path=/;Domain=domainvalue;Max-Age=seconds;HTTPOnly");
2.輸入檢查（XSS Filter）
原理：讓一些基于特殊字符的攻擊失效。（常見的Web漏洞如XSS、SQLInjection等，都要求攻擊者構(gòu)造一些特殊字符）
*?輸入檢查的邏輯，必須在服務(wù)端實(shí)現(xiàn)，因?yàn)榭蛻舳说臋z查也是很容易被攻擊者繞過，現(xiàn)有的普遍做法是兩端都做同樣的檢查，客戶端的檢查可以阻擋大部分誤操作的正常用戶，從而節(jié)約服務(wù)器的資源。
解決方案：
檢查是否包含"JavaScript"，""等敏感字符。以及對字符串中的<>:"&/'等特殊字符做處理
3.輸出檢查
原理：一般來說除了富文本輸出之外，在變量輸出到HTML頁面時(shí)，使用編碼或轉(zhuǎn)義的方式來防御XSS攻擊
解決方案：
*???針對HTML代碼的編碼方式：HtmlEncode
*?? PHP：htmlentities()和htmlspecialchars()兩個(gè)函數(shù)
*?? Javascript：JavascriptEncode（需要使用""對特殊字符進(jìn)行轉(zhuǎn)義，同時(shí)要求輸出的變量必須在引號內(nèi)部）
*???在URL的path（路徑）或者search（參數(shù)）中輸出，使用URLEncode
4.更嚴(yán)格的做法
除了數(shù)字和字母外的所有字符，都使用十六進(jìn)制的方式進(jìn)行編碼
2. 跨站點(diǎn)請求偽造（Cross Sites Request Forgery）
跨站點(diǎn)請求偽造，指利用用戶身份操作用戶賬戶的一種攻擊方式，即攻擊者誘使用戶訪問一個(gè)頁面，就以該用戶身份在第三方有害站點(diǎn)中執(zhí)行了一次操作，泄露了用戶的身份信息，接著攻擊者就可以使用這個(gè)偽造的，但真實(shí)存在的身份信息，到某網(wǎng)站冒充用戶執(zhí)行惡意操作。
但是，攻擊者只有預(yù)測到URL的所有參數(shù)與參數(shù)值，才能成功地偽造一個(gè)請求（當(dāng)然了，他可以在安全站點(diǎn)里以自己的身份實(shí)際去操作一下，還是能拿到參數(shù)的）；反之，攻擊者無法攻擊成功
下圖通俗解釋什么是CSRF，又是如何給用戶帶來危害的
參考上圖，我們可以總結(jié)，完成一次CSRF攻擊，必須滿足兩個(gè)條件
用戶登錄受信任網(wǎng)站A，并且在本地生成Cookie 在不登出網(wǎng)站A的情況下，訪問有害網(wǎng)站B
2.1 CSRF的原理
CSRF攻擊是攻擊者利用**`用戶身份`**操作用戶賬戶的一種攻擊方式
如電影速度與激情5中吉賽爾使用內(nèi)褲獲取巴西大佬指紋，最后成功使用偽造指紋的手法打開保險(xiǎn)柜，CSRF只不過是網(wǎng)絡(luò)上這個(gè)手法的實(shí)現(xiàn)。
2.2 CSRF的攻擊方式
1.瀏覽器的Cookie策略
瀏覽器所持有的策略一般分為兩種：
Session Cookie，臨時(shí)Cookie。保存在瀏覽器進(jìn)程的內(nèi)存中，瀏覽器關(guān)閉了即失效。
Third-party Cookie，本地Cookie。服務(wù)器在Set-Cookie時(shí)指定了Expire Time。過期了本地Cookie失效，則網(wǎng)站會要求用戶重新登錄。
* 在瀏覽網(wǎng)站的過程中，即使瀏覽器打開了Tab頁，Session Cookie都是有效的，因此發(fā)起CSRF攻擊是可行的。
2.P3P頭的副作用
"P3P?Header"是?"W3C"?制定的一項(xiàng)關(guān)于隱私的標(biāo)準(zhǔn)，全稱是?"The?Platform?for?Privacy?Preference"（隱私偏好平臺）
如果網(wǎng)站返回給瀏覽器的 HTTP 頭包含有 P3P 頭，則在某種程度上來說，將允許?瀏覽器發(fā)送第三方 Cookie。在 IE 下即使是"