全球都在處理數字化轉型的問題，飛速發展的同時也為基礎設施帶來了一定的壓力。同時許多黑客也在不斷更新升級他們的攻擊技術。
如果我們的應用程序有過多漏洞，被抓按住利用，就會變成大型芭比Q現場。
這也是為何現在如此多團隊將安全性轉向左翼，甚至將技術從 DevOps 遷移到到 DevSecOps。
所以很多開發者對於程序安全性有一定顧慮，甚至會占用一些時間專門關注安全問題，但事實上我們並不需要為了保證絕對安全性而犧牲版本的快速更迭。
本文將為大家介紹四種可以幫助我們便捷保護 Vue 應用程序的便捷方法，而且。這些方法簡單易用，不會影響到我們的正常工作進程。
Vue 框架概述
Vue 是一個用於構建 Web 用戶界面的漸進式框架，必須要提到的是它可以和其他框架（如 React 和 Angular）完美集成。 Vue 與其他框架相比更加專注於視圖層，但明顯的優點是它能高效構建單頁應用程序 (SPA)。
而現在風頭正盛的Vue 3，可以直接使用 TypeScript 編寫，隨着應用程序的體量逐漸變大，我們不再需要額外工具來防止潛在的運行時錯誤。
保護 Vue 應用程序的 4 種方法
下面是我們將為大家介紹一些攻擊，通過它可以讓我們了解如何保護在Vue上運行的應用程序。這些最佳實踐將幫助您防止跨站點腳本 (XSS) 和跨站點請求偽造 (CSRF) 等攻擊，這些攻擊可以是低調的自動攻擊，也可以是高級持續威脅的一部分，用作攻擊的第一步。更廣泛的攻擊活動。
1.跨站腳本（XSS）
跨站點腳本 (XSS) 攻擊是一種代碼注入，最常見的 XSS 攻擊的手法是基於 DOM 的攻擊。攻擊者旨在將惡意代碼注入我們網站的 DOM 元素之中，這樣用戶登陸網頁時惡意攻擊指令就會生效，例如竊取用戶數據。為了防止這種意外出現，開發人員需要將以下位置中有風險的輸入內容進行清理：
- HTML（綁定內部 HTML）
- 樣式 (CSS)
- 屬性（綁定值）
- 資源（文件內容）
不過開發者最好在數據顯示在頁面之前，對數據進行清理，防止用應用程序中的安全漏洞被攻擊。
作為開發者，我們不能強制用戶輸入什么，所以需要我們對用戶的輸入內容進行判斷、清洗，將問題內容及時"處理"。npm 上提供的vue-sanitize 庫可以輕松將服務器上的用戶輸入值進行清理。
它通過使用一串HTML 來清理代碼中出現的問題，並防止 XSS 攻擊。它會刪除有風險的 HTML，同時我們可以將我們需要保留的HTML內容作為白名單，自定義設置。
import VueSanitize from "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>
<div id="account">
<user-component ref="user" />
</div>
<template>
<script>
import UserComponent from "/components/UserComponent";
export default {
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允許攻擊者使用JSON API 讀取數據網站數據。它利用了舊瀏覽器上的一個漏洞，該漏洞包括了原生 JavaScript 對象構造函數。
它可以使用腳本標簽提供 API URL，這意味着我們的程序中會有他人代碼，我們不能控制代碼內容，也無法判斷托管它的服務器是否安全。
解決這種攻擊，可以讓服務器使所有 JSON 的響應變為不可執行。例如在對應代碼前加上字符串 ")]}',\n"，然后在解析數據之前將其刪除。因為腳本必須保證完整性才能運行，所以這樣就可以避免XSII攻擊。
總結
安全是一個至關重要的問題，不僅應該由安全專業人員解決，開發人員也應該注意到一些問題。本文就從幾種不同攻擊出發，為大家介紹了一些規避和解決的方法。
沒有完美無缺的應用程序，在開發過程中不可避免有許多修復、補丁和需要響應的緊急事項，但采用安全的編碼思維可以幫助我們將低許多不必要的風險。
不過跳脫出框架本身，如果我們使用與框架無關的Web 組件，我們擁有一套完整的JavaScript UI 組件和強大的類似 Excel 的 JavaScript 電子表格組件，為Vue以及Angular和React提供深度支持。
這里是一些demo 演示
后續還會為大家分享更多有趣內容~覺得不錯點個贊吧。