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