一、快速入門(mén)

1.1 DOMPurify 概述

在 JavaScript 開(kāi)發(fā)的世界中，安全性是保護(hù)應(yīng)用程序免受潛在威脅和漏洞的至關(guān)重要。在 Vue 3 應(yīng)用中渲染動(dòng)態(tài) HTML 內(nèi)容時(shí)，安全風(fēng)險(xiǎn)不容忽視。DOMPurify 是一個(gè)開(kāi)源的基于 DOM 的快速 XSS 凈化工具，專門(mén)用于凈化HTML、MathML和SVG，能有效防御跨站腳本攻擊（XSS攻擊）。它通過(guò)解析遞歸元素節(jié)點(diǎn)來(lái)凈化 HTML，輸出安全的 HTML 內(nèi)容，能夠有效抵御防止XSS攻擊。

• DOMPurify 在線演示：cure53.de/purify

1.2 DOMPurify 核心思路

DOMPurify 的核心思想是：不要自己寫(xiě) HTML 解析器，而是讓瀏覽器來(lái)解析。

1.3 安裝與引入

可以通過(guò) npm 來(lái)安裝 DOMPurify 庫(kù)，命令如下：

# 確認(rèn)安裝版本（含嵌套依賴）
npm install dompurify
# 或者
yarn add dompurify

在需要使用 DOMPurify 的文件中導(dǎo)入 DOMPurify 庫(kù)，代碼如下：

import DOMPurify from 'dompurify';

1.4 基礎(chǔ)用法

使用 DOMPurify 庫(kù)過(guò)濾 HTML 非常簡(jiǎn)單，可以直接調(diào)用 DOMPurify.sanitize() 方法，將需要過(guò)濾的HTML字符串作為參數(shù)傳入，然后它就會(huì)返回一個(gè)消毒過(guò)的版本。比如，在表單的提交中，或者需要根據(jù)用戶改變html內(nèi)容的時(shí)候，凈化字符串，放置隱藏惡意腳本。代碼示例如下：

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過(guò)濾前：', rawHtml)
console.log('DOMPurify過(guò)濾后：', DOMPurify.sanitize(html))

在上面的示例中，我們嘗試注入一段 JavaScript 代碼。然而，DOMPurify 檢測(cè)到此并刪除它，使得輸出的 HTML 代碼是安全的。

二、DOMPurify 高級(jí)配置

DOMPurify 不僅支持簡(jiǎn)單的清洗操作，它還提供了詳細(xì)的配置選項(xiàng)，使得開(kāi)發(fā)人員能夠通過(guò)配置選項(xiàng)自定義凈化規(guī)則，以滿足不同的安全需求。

2.1 白名單過(guò)濾

可以定義一個(gè)配置對(duì)象來(lái)指定自定義允許的標(biāo)簽和屬性。

const config = {
  // 只允許這些HTML標(biāo)簽
  ALLOWED_TAGS: ['p', 'a', 'b', 'i', 'em', 'strong'],
  // 只允許這些HTML屬性
  ALLOWED_ATTR: ['href', 'title', 'target'],
  // 允許自定義URI的協(xié)議
  ALLOWED_URI_REGEXP: /^(https?|ftp):/i
  // 禁止的危險(xiǎn)屬性
  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 支持在凈化流程的不同階段插入自定義邏輯，實(shí)現(xiàn)高度定制化的安全策略，允許我們?cè)趦艋^(guò)程中進(jìn)行更細(xì)粒度的控制。

例如，可以阻止特定的屬性：

DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
  if (data.attrName === 'src' && /javascript:/i.test(data.attrValue)) {
    data.keepAttr = false; // 阻止javascript:協(xié)議
  }
});

三、最佳實(shí)踐

3.1 查看被移除的內(nèi)容

在進(jìn)行安全審計(jì)或調(diào)試時(shí)，可能需要知道 DOMPurify 移除了哪些內(nèi)容：

const dirtyInput = '<script>alert("XSS")</script><p>Safe content</p>';
const clean = DOMPurify.sanitize(dirtyInput);

// 查看被移除的節(jié)點(diǎn)
console.log(DOMPurify.removed);

請(qǐng)注意，DOMPurify.removed 主要用于調(diào)試，不建議在生產(chǎn)環(huán)境中依賴它進(jìn)行業(yè)務(wù)邏輯判斷。

3.2 結(jié)合Vue響應(yīng)式數(shù)據(jù)

通常，我們還會(huì)將 DOMPurify 與 Vue 的響應(yīng)式系統(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)建一個(gè)自定義指令：

// 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é)

當(dāng)今數(shù)字時(shí)代，安全性在應(yīng)用程序開(kāi)發(fā)中變得愈發(fā)重要。為了確保用戶數(shù)據(jù)的保密性、完整性和可靠性，開(kāi)發(fā)人員需要采取各種措施來(lái)應(yīng)對(duì)安全挑戰(zhàn)。DOMPurify 是 Vue 3 應(yīng)用中處理不安全 HTML 并防御 XSS 攻擊的強(qiáng)力工具。通過(guò)其簡(jiǎn)單的 API 和靈活的配置，它可以滿足多種安全需求。關(guān)鍵在于牢記安全需要多層防御，切勿完全依賴客戶端凈化。

到此這篇關(guān)于Vue3使用DOMPurify防御XSS攻擊的文章就介紹到這了,更多相關(guān)Vue3 DOMPurify防御XSS攻擊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論