全球都在處理數(shù)字化轉(zhuǎn)型的問(wèn)題，飛速發(fā)展的同時(shí)也為基礎(chǔ)設(shè)施帶來(lái)了一定的壓力。同時(shí)許多黑客也在不斷更新升級(jí)他們的攻擊技術(shù)。
如果我們的應(yīng)用程序有過(guò)多漏洞，被抓住利用，就會(huì)變成大型“芭比Q”現(xiàn)場(chǎng)。
這也是為何現(xiàn)在如此多團(tuán)隊(duì)將安全性轉(zhuǎn)向左翼，甚至將技術(shù)從DevOps遷移到DevSecOps。
所以很多開發(fā)者對(duì)于程序安全性有一定顧慮，甚至?xí)加靡恍r(shí)間專門關(guān)注安全問(wèn)題，但事實(shí)上我們并不需要為了保證絕對(duì)安全性而犧牲版本的快速更迭。
本文將為大家介紹四種可以幫助我們保護(hù)Vue應(yīng)用程序的便捷方法，而且簡(jiǎn)單易用，不會(huì)影響到我們的正常工作進(jìn)程。
Vue框架概述
Vue是一個(gè)用于構(gòu)建Web用戶界面的漸進(jìn)式框架，必須要提到的是它可以和其他框架（如React和Angular）完美集成。Vue與其他框架相比更加專注于視圖層，但明顯的優(yōu)點(diǎn)是它能高效構(gòu)建單頁(yè)應(yīng)用程序(SPA)。
而現(xiàn)在風(fēng)頭正盛的Vue3，可以直接使用TypeScript編寫，隨著應(yīng)用程序的體量逐漸變大，我們不再需要額外工具來(lái)防止?jié)撛诘倪\(yùn)行錯(cuò)誤。
保護(hù)Vue應(yīng)用程序的4種方法
下面是我們將為大家介紹一些攻擊，通過(guò)它可以讓我們了解如何保護(hù)在Vue上運(yùn)行的應(yīng)用程序。這些最佳實(shí)踐將幫助您防止跨站點(diǎn)腳本(XSS)和跨站點(diǎn)請(qǐng)求偽造(CSRF)等攻擊，這些攻擊可以是低調(diào)的自動(dòng)攻擊，也可以是高級(jí)持續(xù)威脅的一部分，用作攻擊的第一步。
1、跨站腳本（XSS）
跨站點(diǎn)腳本(XSS)攻擊是一種代碼注入，最常見的XSS攻擊的手法是基于DOM的攻擊。攻擊者旨在將惡意代碼注入我們網(wǎng)站的DOM元素之中，這樣用戶登陸網(wǎng)頁(yè)時(shí)惡意攻擊指令就會(huì)生效，例如竊取用戶數(shù)據(jù)。為了防止這種意外出現(xiàn)，開發(fā)人員需要將以下位置中有風(fēng)險(xiǎn)的輸入內(nèi)容進(jìn)行清理：
- HTML（綁定內(nèi)部HTML）
- 樣式(CSS)
- 屬性（綁定值）
- 資源（文件內(nèi)容）
不過(guò)開發(fā)者最好在數(shù)據(jù)顯示在頁(yè)面之前，對(duì)數(shù)據(jù)進(jìn)行清理，防止用應(yīng)用程序中的安全漏洞被攻擊。
作為開發(fā)者，我們不能強(qiáng)制用戶輸入什么，所以需要我們對(duì)用戶的輸入內(nèi)容進(jìn)行判斷、清洗，將問(wèn)題內(nèi)容及時(shí)“處理”。npm上提供的vue-sanitize庫(kù)可以輕松將服務(wù)器上的用戶輸入值進(jìn)行清理。
它通過(guò)使用一串HTML來(lái)清理代碼中出現(xiàn)的問(wèn)題，并防止XSS攻擊。它會(huì)刪除有風(fēng)險(xiǎn)的HTML，同時(shí)我們可以將我們需要保留的HTML內(nèi)容作為白名單，自定義設(shè)置。
```importVueSanitizefrom"vue-sanitize";Vue.use(VueSanitize);```輕松將標(biāo)簽和選項(xiàng)列入白名單：```defaultOptions={allowedTags:['a','b'],allowedAttributes:{'a':['href']}}Vue.use(VueSanitize,defaultOptions);```
然后，VueSanitize將獲取用戶傳輸?shù)臄?shù)據(jù)內(nèi)容并清理——保留我們列入白名單的內(nèi)容，防止代碼注入和XSS攻擊。
2、自定義庫(kù)與新版本不匹配
自定義Vue庫(kù)實(shí)在是我們開發(fā)過(guò)程中一個(gè)利器，可以按照我們的需求進(jìn)行自定義內(nèi)容設(shè)置，但對(duì)于一些過(guò)于依賴當(dāng)前版本的自定義庫(kù)而言，這么做的弊端也是顯而易見的，升級(jí)更高版本，有概率會(huì)出現(xiàn)應(yīng)用程序可能會(huì)出錯(cuò)的問(wèn)題，但如果不選擇升級(jí)，我們可能會(huì)錯(cuò)過(guò)Vue一些關(guān)鍵的安全修復(fù)和功能。
修改和更新Vue庫(kù)最好的方式時(shí)通過(guò)區(qū)分享我們的需求和內(nèi)容，這可以讓其他開發(fā)者查看到我們的更改，并考慮將它們添加到下一個(gè)Vue版本。
我們還可以在在Vue應(yīng)用程序中使用NPM包保持最新，這樣可以確保已解決的安全問(wèn)題或更新內(nèi)容都一同更新了。
3.有風(fēng)險(xiǎn)的Vue庫(kù)
Vue一個(gè)亮點(diǎn)是它可以讓開發(fā)人員無(wú)需編輯瀏覽器的DOM來(lái)手動(dòng)渲染組件；然而，這并不意味著開發(fā)人員不需要直接訪問(wèn)DOM元素，為了解決這個(gè)問(wèn)題，Vue為用戶提供了一些API，例如findDOMNode和ref。
使用ref來(lái)訪問(wèn)DOM元素（見下文）：
```<template><divid="account"><user-componentref="user"/></div><template><script>importUserComponentfrom"/components/UserComponent";exportdefault{name:"user-component",components:{UserComponent},mounted(){this.$refs.user.$refs.userName.focus();}};</script>```
使用這種方法，我們不需要通過(guò)Vue操作Dom元素，而直接引用用戶組件及API，通過(guò)應(yīng)用程序直接操作DOM元素。這么做很便捷，但也會(huì)使得應(yīng)用程序容易受到XSS漏洞的攻擊。為了防止惡意代理利用我們的應(yīng)用程序，這里提供幾種途徑來(lái)保護(hù)我們的應(yīng)用程序。
- 輸出文本內(nèi)容而不是直接輸出HTML代碼
- 使用VueSanitize庫(kù)清理數(shù)據(jù)
- API生成Dom節(jié)點(diǎn)
4、HTTP層面漏洞
跨站請(qǐng)求偽造（CSRF）：
CSRF利用了用戶對(duì)網(wǎng)站的信任，在未經(jīng)用戶授權(quán)的情況下發(fā)送惡意命令。舉個(gè)例子是當(dāng)我們?cè)谀承┚W(wǎng)站想閱讀一些內(nèi)容，網(wǎng)站可能需要讓我們登錄用戶。
為了驗(yàn)證刪除請(qǐng)求的身份驗(yàn)證，網(wǎng)站會(huì)話通過(guò)cookie存儲(chǔ)在瀏覽器中。但是，這會(huì)在站點(diǎn)中留下一個(gè)CSRF漏洞。如果想刪除需要用戶使用瀏覽器中的cookie向服務(wù)器發(fā)送刪除請(qǐng)求。
減輕這種威脅的一種常見方法是讓服務(wù)器發(fā)送包含在cookie中的隨機(jī)身份驗(yàn)證令牌。客戶端讀取cookie并在所有后續(xù)請(qǐng)求中添加具有相同令牌的自定義請(qǐng)求標(biāo)頭。這樣就可以拒絕沒(méi)有身份驗(yàn)證令牌的攻擊者發(fā)出的請(qǐng)求。
跨站點(diǎn)腳本包含(XSII)：
XSSI允許攻擊者使用JSONAPI讀取數(shù)據(jù)網(wǎng)站數(shù)據(jù)。它利用了舊瀏覽器上的一個(gè)漏洞，該漏洞包括了原生JavaScript對(duì)象構(gòu)造函數(shù)。
它可以使用腳本標(biāo)簽提供APIURL，這意味著我們的程序中會(huì)有他人代碼，我們不能控制代碼內(nèi)容，也無(wú)法判斷托管它的服務(wù)器是否安全。
解決這種攻擊，可以讓服務(wù)器使所有JSON的響應(yīng)變?yōu)椴豢蓤?zhí)行。例如在對(duì)應(yīng)代碼前加上字符串")]}',\n"，然后在解析數(shù)據(jù)之前將其刪除。因?yàn)槟_本必須保證完整性才能運(yùn)行，所以這樣就可以避免XSII攻擊。
總結(jié)
安全是一個(gè)至關(guān)重要的問(wèn)題，不僅應(yīng)該由安全專業(yè)人員解決，開發(fā)人員也應(yīng)該注意到一些問(wèn)題。本文就從幾種不同攻擊出發(fā)，為大家介紹了一些規(guī)避和解決的方法。
沒(méi)有完美無(wú)缺的應(yīng)用程序，在開發(fā)過(guò)程中不可避免有許多修復(fù)、補(bǔ)丁和需要響應(yīng)的緊急事項(xiàng)，但采用安全的編碼思維可以幫助我們將低許多不必要的風(fēng)險(xiǎn)。
不過(guò)跳脫出框架本身，如果我們使用與框架無(wú)關(guān)的Web組件，我們擁有一套完整的JavaScriptUI組件和強(qiáng)大的類似Excel的JavaScript電子表格組件，為Vue以及Angular和React提供深度支持。
后續(xù)還會(huì)為大家分享更多有趣內(nèi)容~下方是一些demo演示，覺得不錯(cuò)點(diǎn)個(gè)關(guān)注吧~