Vue3使用DOMPurify防御XSS攻擊
一、快速入門
1.1 DOMPurify 概述
在 JavaScript 開發(fā)的世界中，安全性是保護應用程序免受潛在威脅和漏洞的至關(guān)重要。在 Vue 3 應用中渲染動態(tài) HTML 內(nèi)容時，安全風險不容忽視。DOMPurify 是一個開源的基于 DOM 的快速 XSS 凈化工具，專門用于凈化HTML、MathML和SVG，能有效防御跨站腳本攻擊（XSS攻擊）。它通過解析遞歸元素節(jié)點來凈化 HTML，輸出安全的 HTML 內(nèi)容，能夠有效抵御防止XSS攻擊。
- DOMPurify 在線演示：cure53.de/purify
1.2 DOMPurify 核心思路
DOMPurify 的核心思想是：不要自己寫 HTML 解析器，而是讓瀏覽器來解析。
1.3 安裝與引入
可以通過 npm 來安裝 DOMPurify 庫，命令如下：
# 確認安裝版本（含嵌套依賴） npm install dompurify # 或者 yarn add dompurify
在需要使用 DOMPurify 的文件中導入 DOMPurify 庫，代碼如下：
import DOMPurify from 'dompurify';
1.4 基礎(chǔ)用法
使用 DOMPurify 庫過濾 HTML 非常簡單，可以直接調(diào)用 DOMPurify.sanitize() 方法，將需要過濾的HTML字符串作為參數(shù)傳入，然后它就會返回一個消毒過的版本。比如，在表單的提交中，或者需要根據(jù)用戶改變html內(nèi)容的時候，凈化字符串，放置隱藏惡意腳本。代碼示例如下：
import DOMPurify from 'dompurify';
// 示例：可能不安全的HTML輸入
let rawHtml = '<p>Safe content</p><scr' + 'ipt>alert("XSS")</scr' + 'ipt>';
let sanitizedHtml = DOMPurify.sanitize(rawHtml);
console.log('DOMPurify過濾前：', rawHtml)
console.log('DOMPurify過濾后：', DOMPurify.sanitize(html))
在上面的示例中，我們嘗試注入一段 JavaScript 代碼。然而，DOMPurify 檢測到此并刪除它，使得輸出的 HTML 代碼是安全的。
二、DOMPurify 高級配置
DOMPurify 不僅支持簡單的清洗操作，它還提供了詳細的配置選項，使得開發(fā)人員能夠通過配置選項自定義凈化規(guī)則，以滿足不同的安全需求。
2.1 白名單過濾
可以定義一個配置對象來指定自定義允許的標簽和屬性。
const config = {
// 只允許這些HTML標簽
ALLOWED_TAGS: ['p', 'a', 'b', 'i', 'em', 'strong'],
// 只允許這些HTML屬性
ALLOWED_ATTR: ['href', 'title', 'target'],
// 允許自定義URI的協(xié)議
ALLOWED_URI_REGEXP: /^(https?|ftp):/i
// 禁止的危險屬性
FORBID_ATTR: ['onclick', 'onload']
};
const dirtyHtml = '<p>Hello, <a rel="external nofollow" target="_blank" οnclick="alert(1)">World</a>!</p>';
const cleanHtml = DOMPurify.sanitize(dirtyHtml, config);
2.2 自定義鉤子
DOMPurify 支持在凈化流程的不同階段插入自定義邏輯，實現(xiàn)高度定制化的安全策略，允許我們在凈化過程中進行更細粒度的控制。
| 鉤子函數(shù) | 簡要說明 |
|---|---|
| beforeSanitizeElements | 在清理元素前觸發(fā)，可用于提前移除某些節(jié)點或?qū)傩?/td> |
| afterSanitizeElements | 對節(jié)點進行基礎(chǔ)清理之后觸發(fā)，常用于處理鏈接安全、圖片防盜鏈、強制 HTTPS |
| uponSanitizeShadowNode | |
| beforeSanitizeAttributes | |
| afterSanitizeAttributes | 在清理屬性后觸發(fā) |
| beforeSanitizeShadowDOM | |
| afterSanitizeShadowDOM | |
| uponSanitizeElement | 當遍歷到具體的 HTML 元素時觸發(fā)，可以用來記錄日志、監(jiān)控被攔截的危險標簽 |
| uponSanitizeAttribute | 在處理具體屬性時觸發(fā)，常用于校驗 URL 協(xié)議，防止執(zhí)行惡意的 JavaScript 代碼 |
例如，可以阻止特定的屬性：
DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
if (data.attrName === 'src' && /javascript:/i.test(data.attrValue)) {
data.keepAttr = false; // 阻止javascript:協(xié)議
}
});
三、最佳實踐
3.1 查看被移除的內(nèi)容
在進行安全審計或調(diào)試時，可能需要知道 DOMPurify 移除了哪些內(nèi)容：
const dirtyInput = '<script>alert("XSS")</script><p>Safe content</p>';
const clean = DOMPurify.sanitize(dirtyInput);
// 查看被移除的節(jié)點
console.log(DOMPurify.removed);
請注意，DOMPurify.removed 主要用于調(diào)試，不建議在生產(chǎn)環(huán)境中依賴它進行業(yè)務邏輯判斷。
3.2 結(jié)合Vue響應式數(shù)據(jù)
通常，我們還會將 DOMPurify 與 Vue 的響應式系統(tǒng)（如 ref、computed）結(jié)合使用：
<script setup>
import { ref, computed } from 'vue';
import DOMPurify from 'dompurify';
const userInput = ref('');
const sanitizedInput = computed(() => DOMPurify.sanitize(userInput.value));
</script>
<template>
<textarea v-model="userInput" placeholder="輸入內(nèi)容"></textarea>
<div v-html="sanitizedInput"></div>
</template>
3.3 使用自定義指令
為了更方便地在模板中使用，可以創(chuàng)建一個自定義指令：
// main.js 或類似文件
import { createApp } from 'vue';
import App from './App.vue';
import DOMPurify from 'dompurify';
const app = createApp(App);
app.directive('safe-html', (el, binding) => {
el.innerHTML = DOMPurify.sanitize(binding.value);
});
app.mount('#app');
在組件中使用自定義指令：
<template> <div v-safe-html="rawHtml"></div> </template>
四、總結(jié)
當今數(shù)字時代，安全性在應用程序開發(fā)中變得愈發(fā)重要。為了確保用戶數(shù)據(jù)的保密性、完整性和可靠性，開發(fā)人員需要采取各種措施來應對安全挑戰(zhàn)。DOMPurify 是 Vue 3 應用中處理不安全 HTML 并防御 XSS 攻擊的強力工具。通過其簡單的 API 和靈活的配置，它可以滿足多種安全需求。關(guān)鍵在于牢記安全需要多層防御，切勿完全依賴客戶端凈化。
到此這篇關(guān)于Vue3使用DOMPurify防御XSS攻擊的文章就介紹到這了,更多相關(guān)Vue3 DOMPurify防御XSS攻擊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue版日歷組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue如何整合mavon-editor編輯器(markdown編輯和預覽)
這篇文章主要介紹了Vue整合mavon-editor編輯器(markdown編輯和預覽)的相關(guān)知識，mavon-editor是目前比較主流的markdown編輯器，重點介紹它的使用方法,需要的朋友可以參考下2022-10-10
本文主要介紹了如何解決el-menu標題過長顯示不全問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,感興趣的朋友們跟著小編來一起學習學習吧2023-12-12
vue使用axios獲取不到響應頭Content-Disposition的問題及解決
這篇文章主要介紹了vue使用axios獲取不到響應頭Content-Disposition的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue3配置全局參數(shù)(掛載全局方法)以及組件的使用
這篇文章主要介紹了vue3配置全局參數(shù)(掛載全局方法)以及組件的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本文介紹將前端項目打包為war包的步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-11-11
Vue3視頻播放組件 vue3-video-play使用方式
vue3-video-play是Vue3的視頻播放組件,基于原生video標簽開發(fā),支持MP4和HLS流,提供全局/局部引入方式,可監(jiān)聽播放、暫停等事件,并具備字幕、播放列表等高級功能,適合靈活配置需求2025-09-09
el-element中el-table表格嵌套el-select實現(xiàn)動態(tài)選擇對應值功能
這篇文章主要給大家介紹了關(guān)于el-element中el-table表格嵌套el-select實現(xiàn)動態(tài)選擇對應值功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue 封裝面包屑組件教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue-cli腳手架config目錄下index.js配置文件的方法
下面小編就為大家分享一篇vue-cli腳手架config目錄下index.js配置文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03