“四大高手”為你的 Vue 應用程式保駕護航

葡萄城技術團隊發表於2022-03-03
Vue

全球都在處理數字化轉型的問題，飛速發展的同時也為基礎設施帶來了一定的壓力。同時許多黑客也在不斷更新升級他們的攻擊技術。

如果我們的應用程式有過多漏洞，被抓按住利用，就會變成大型芭比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 演示

後續還會為大家分享更多有趣內容~覺得不錯點個贊吧。

相關文章