vue-quill-editor安全最佳实践：内容 sanitization 实现
项目地址: https://gitcode.com/gh_mirrors/vu/vue-quill-editor 前言：富文本编辑器的安全痛点
你是否曾因用户输入的恶意HTML代码导致XSS（跨站脚本攻击）漏洞？在使用富文本编辑器时，未经处理的用户输入可能包含危险的<script>标签、onclick事件或其他恶意代码，这些都可能被用于窃取用户Cookie、篡改页面内容或执行未授权操作。
本文将从实际场景出发，详细介绍如何为vue-quill-editor实现完整的内容安全过滤方案，通过3个层级的防护措施，构建可靠的富文本内容安全屏障。
读完本文后，你将能够：
- 理解富文本编辑器面临的XSS攻击风险类型
- 掌握使用sanitize-html库进行内容过滤的方法
- 实现基于Quill自定义模块的输入验证机制
- 配置前后端协同的内容安全防护策略
一、XSS风险分析与防护体系设计
1.1 常见富文本XSS攻击类型
| 攻击类型 | 示例代码 | 危害程度 |
|---|---|---|
| 脚本注入 | <script>alert(document.cookie)</script> | 高 |
| 事件触发 | <div onclick="stealData()">点击查看</div> | 高 |
| 恶意链接 | <a href="javascript:hack()">链接</a> | 中 |
| iframe嵌入 | <iframe src="http://malicious.com"></iframe> | 高 |
| SVG注入 | <svg onload="alert('xss')"></svg> | 高 |
| 样式注入 | <style>@import url('http://attacker.com')</style> | 中 |
1.2 安全防护体系架构
二、内容过滤实现：sanitize-html集成方案
2.1 安装与基础配置
sanitize-html是一个功能强大的HTML清理库，能够基于白名单策略过滤HTML内容。首先需要安装该依赖：
npm install sanitize-html --save
# 或
yarn add sanitize-html
2.2 核心过滤逻辑实现
创建src/utils/html-sanitizer.js文件，实现基础过滤功能：
import sanitizeHtml from 'sanitize-html';
// 默认安全配置
const defaultSanitizeOptions = {
// 允许的标签
allowedTags: [
'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'div', 'span', 'blockquote',
'pre', 'code', 'ul', 'ol', 'li', 'a', 'img', 'video', 'table', 'thead',
'tbody', 'tr', 'th', 'td', 'em', 'strong', 'u', 's', 'i', 'b'
],
// 允许的属性
allowedAttributes: {
'*': ['class', 'style'],
'a': ['href', 'target', 'rel'],
'img': ['src', 'alt', 'title', 'width', 'height'],
'video': ['src', 'controls', 'width', 'height']
},
// 允许的样式属性
allowedStyles: {
'*': {
'font-size': [/^\d+(\.\d+)?(px|em|rem|%)$/],
'color': [/^#([0-9a-fA-F]{3}){1,2}$/, /^rgb\(\d+,\s*\d+,\s*\d+\)$/],
'text-align': [/^left$/, /^right$/, /^center$/, /^justify$/],
'margin': [/^\d+(\.\d+)?(px|em|rem|%)$/],
'padding': [/^\d+(\.\d+)?(px|em|rem|%)$/],
'line-height': [/^\d+(\.\d+)?$/],
'font-weight': [/^\d+$/, /^bold$/, /^normal$/],
'font-style': [/^normal$/, /^italic$/],
'text-decoration': [/^none$/, /^underline$/, /^line-through$/]
}
},
// 转换不安全链接
transformTags: {
'a': function(tagName, attribs) {
if (attribs.href && attribs.href.startsWith('javascript:')) {
return {
tagName: 'a',
attribs: {
href: '#',
onclick: 'return false;',
class: 'unsafe-link'
}
};
}
return { tagName, attribs };
}
},
// 移除空标签
removeEmpty: true,
// 禁止自闭合标签
selfClosing: [],
// 解析器选项
parser: {
lowerCaseTags: true
}
};
// 安全过滤函数
export function sanitizeContent(html, customOptions = {}) {
// 合并默认配置和自定义配置
const options = { ...defaultSanitizeOptions, ...customOptions };
// 执行过滤
const sanitized = sanitizeHtml(html, options);
// 额外处理：移除可能的事件属性
return sanitized.replace(/on\w+="[^"]*"/gi, '');
}
// 验证HTML是否安全
export function isContentSafe(html) {
const sanitized = sanitizeContent(html);
return sanitized === html;
}
2.3 在vue-quill-editor中集成
修改编辑器组件，在内容变更时进行安全过滤：
<template>
<quill-editor
ref="editor"
v-model="safeContent"
:options="editorOptions"
@text-change="handleTextChange"
/>
</template>
<script>
import { quillEditor } from 'vue-quill-editor';
import { sanitizeContent } from '@/utils/html-sanitizer';
export default {
components: { quillEditor },
data() {
return {
content: '',
safeContent: '',
editorOptions: {
theme: 'snow',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'header': [1, 2, 3, false] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['link', 'image', 'code-block']
]
}
}
};
},
watch: {
content(newVal) {
// 对输入内容进行安全过滤
this.safeContent = sanitizeContent(newVal);
}
},
methods: {
handleTextChange({ html }) {
// 保存原始内容
this.content = html;
// 检查是否有不安全内容被过滤
if (html !== this.safeContent) {
this.$notify({
type: 'warning',
title: '内容安全提示',
message: '检测到潜在不安全内容已自动过滤，请检查您的输入。'
});
}
}
}
};
</script>
三、自定义Quill模块：输入验证与拦截
3.1 创建安全验证模块
Quill允许通过自定义模块扩展其功能，我们可以创建一个模块来拦截并验证用户输入：
// src/utils/quill-safety-module.js
import Quill from 'quill';
import { isContentSafe, sanitizeContent } from './html-sanitizer';
const Block = Quill.import('blots/block');
const Inline = Quill.import('blots/inline');
// 自定义Block blot验证
class SafeBlock extends Block {
static create(value) {
const node = super.create(value);
// 验证块级元素内容
if (!isContentSafe(node.innerHTML)) {
node.innerHTML = sanitizeContent(node.innerHTML);
}
return node;
}
}
SafeBlock.blotName = 'block';
SafeBlock.tagName = Block.tagName;
// 自定义Inline blot验证
class SafeInline extends Inline {
static create(value) {
const node = super.create(value);
// 验证内联元素属性
Object.keys(node.attributes).forEach(attr => {
if (attr.startsWith('on')) {
node.removeAttribute(attr);
}
});
return node;
}
}
SafeInline.blotName = 'inline';
SafeInline.tagName = Inline.tagName;
// Quill安全模块
class SafetyModule {
constructor(quill, options = {}) {
this.quill = quill;
this.options = options;
this.init();
}
init() {
// 替换默认的Blot
Quill.register(SafeBlock);
Quill.register(SafeInline);
// 监听文本变更事件
this.quill.on('text-change', this.validateContent.bind(this));
// 监听粘贴事件
this.quill.clipboard.addMatcher(Node.ELEMENT_NODE, this.handlePaste.bind(this));
}
// 验证内容安全性
validateContent(delta, oldDelta, source) {
if (source !== 'user') return; // 只验证用户输入
const content = this.quill.container.innerHTML;
if (!isContentSafe(content)) {
// 保存光标位置
const selection = this.quill.getSelection();
// 过滤不安全内容
const safeContent = sanitizeContent(content);
this.quill.container.innerHTML = safeContent;
// 恢复光标位置
if (selection) {
this.quill.setSelection(selection.index, selection.length);
}
// 触发安全警告
this.quill.emit('safety-warning', {
original: content,
sanitized: safeContent,
timestamp: new Date()
});
}
}
// 处理粘贴内容
handlePaste(node, delta) {
if (node.innerHTML) {
// 过滤粘贴的HTML
const safeHtml = sanitizeContent(node.innerHTML);
node.innerHTML = safeHtml;
}
return delta;
}
}
// 注册模块
Quill.register('modules/safety', SafetyModule);
export default SafetyModule;
3.2 配置编辑器使用安全模块
<script>
import { quillEditor } from 'vue-quill-editor';
import SafetyModule from '@/utils/quill-safety-module';
import 'quill/dist/quill.snow.css';
export default {
components: { quillEditor },
data() {
return {
content: '',
editorOptions: {
theme: 'snow',
modules: {
safety: {
// 安全模块配置
showWarning: true
},
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'header': [1, 2, 3, false] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['link', 'image', 'code-block']
]
}
}
};
},
mounted() {
// 监听安全警告事件
this.$refs.editor.quill.on('safety-warning', (data) => {
console.warn('检测到不安全内容已过滤:', data);
// 显示警告提示
if (this.editorOptions.modules.safety.showWarning) {
alert('检测到潜在不安全内容，已自动清理。');
}
});
}
};
</script>
三、进阶防护：自定义策略与最佳实践
3.1 分级安全策略实现
根据内容类型和使用场景，实现不同级别的安全策略：
// src/utils/security-policies.js
import { sanitizeContent } from './html-sanitizer';
// 安全策略定义
export const SecurityPolicies = {
// 严格模式：只允许基本文本格式
strict: {
allowedTags: ['b', 'i', 'u', 's', 'p', 'div', 'br', 'ul', 'ol', 'li', 'h1', 'h2', 'h3'],
allowedAttributes: {},
allowedStyles: {}
},
// 标准模式：允许常见格式和有限属性
standard: {
allowedTags: [
'b', 'i', 'u', 's', 'p', 'div', 'br', 'ul', 'ol', 'li', 'h1', 'h2', 'h3',
'a', 'img', 'code', 'pre', 'blockquote'
],
allowedAttributes: {
'a': ['href', 'target'],
'img': ['src', 'alt', 'title']
},
allowedStyles: {
'*': {
'font-size': [/^\d+(\.\d+)?(px|em|%)$/],
'color': [/^#([0-9a-fA-F]{3}){1,2}$/],
'text-align': [/^left$/, /^right$/, /^center$/]
}
}
},
// 宽松模式：允许大部分安全HTML
relaxed: {
allowedTags: [
'b', 'i', 'u', 's', 'p', 'div', 'br', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4',
'h5', 'h6', 'a', 'img', 'code', 'pre', 'blockquote', 'table', 'thead', 'tbody',
'tr', 'th', 'td', 'span', 'em', 'strong'
],
allowedAttributes: {
'*': ['class', 'style'],
'a': ['href', 'target', 'rel'],
'img': ['src', 'alt', 'title', 'width', 'height'],
'table': ['border', 'cellspacing', 'cellpadding'],
'td': ['colspan', 'rowspan']
},
allowedStyles: {
'*': {
'font-size': [/^\d+(\.\d+)?(px|em|rem|%)$/],
'color': [/^#([0-9a-fA-F]{3}){1,2}$/, /^rgb\(\d+,\s*\d+,\s*\d+\)$/],
'text-align': [/^left$/, /^right$/, /^center$/, /^justify$/],
'margin': [/^\d+(\.\d+)?(px|em|rem|%)$/],
'padding': [/^\d+(\.\d+)?(px|em|rem|%)$/],
'font-weight': [/^\d+$/, /^bold$/, /^normal$/],
'font-style': [/^normal$/, /^italic$/],
'text-decoration': [/^none$/, /^underline$/, /^line-through$/]
}
}
}
};
// 根据策略过滤内容
export function filterByPolicy(html, policy = 'standard', customRules = {}) {
if (!SecurityPolicies[policy]) {
throw new Error(`Invalid security policy: ${policy}`);
}
return sanitizeContent(html, {
...SecurityPolicies[policy],
...customRules
});
}
// 策略切换组件
export function usePolicySwitcher(component) {
return {
methods: {
setSecurityPolicy(policy, customRules = {}) {
this.currentPolicy = policy;
// 立即重新过滤当前内容
this.content = filterByPolicy(this.content, policy, customRules);
}
},
data() {
return {
currentPolicy: 'standard'
};
},
watch: {
currentPolicy(newPolicy) {
this.setSecurityPolicy(newPolicy);
}
}
};
}
3.2 前后端协同防护策略
3.3 完整安全编辑器组件实现
<template>
<div class="secure-editor">
<div class="policy-controls">
<label>安全策略:</label>
<select v-model="currentPolicy" @change="applyPolicy">
<option value="strict">严格模式</option>
<option value="standard">标准模式</option>
<option value="relaxed">宽松模式</option>
</select>
<div class="security-status" :class="securityLevel">
<span class="status-icon" :class="statusIcon"></span>
<span class="status-text">{{ statusText }}</span>
</div>
</div>
<quill-editor
ref="editor"
v-model="currentContent"
:options="editorOptions"
@text-change="handleTextChange"
@safety-warning="handleSafetyWarning"
/>
<div class="content-stats" v-if="showStats">
<p>原始长度: {{ rawLength }} 字符</p>
<p>过滤后长度: {{ safeLength }} 字符</p>
<p v-if="unsafeCount > 0">已拦截不安全内容: {{ unsafeCount }} 次</p>
</div>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor';
import { filterByPolicy, usePolicySwitcher } from '@/utils/security-policies';
import { isContentSafe } from '@/utils/html-sanitizer';
import SafetyModule from '@/utils/quill-safety-module';
export default {
components: { quillEditor },
mixins: [usePolicySwitcher()],
data() {
return {
rawContent: '',
currentContent: '',
editorOptions: {
theme: 'snow',
modules: {
safety: true, // 启用安全模块
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'header': [1, 2, 3, false] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['link', 'image', 'code-block'],
['clean']
]
}
},
showStats: true,
unsafeCount: 0,
securityEvents: []
};
},
computed: {
// 原始内容长度
rawLength() {
return this.rawContent.length;
},
// 安全内容长度
safeLength() {
return this.currentContent.length;
},
// 安全级别样式
securityLevel() {
switch(this.currentPolicy) {
case 'strict': return 'level-strict';
case 'relaxed': return 'level-relaxed';
default: return 'level-standard';
}
},
// 状态图标
statusIcon() {
if (this.unsafeCount > 0) return 'icon-warning';
return 'icon-safe';
},
// 状态文本
statusText() {
if (this.unsafeCount > 0) {
return `已过滤 ${this.unsafeCount} 处不安全内容`;
}
switch(this.currentPolicy) {
case 'strict': return '严格模式 - 仅允许基本文本格式';
case 'relaxed': return '宽松模式 - 允许大部分安全HTML';
default: return '标准模式 - 平衡安全性和功能性';
}
}
},
methods: {
// 应用安全策略
applyPolicy() {
this.currentContent = filterByPolicy(this.rawContent, this.currentPolicy);
this.checkSafety();
},
// 处理文本变更
handleTextChange({ html }) {
this.rawContent = html;
this.currentContent = filterByPolicy(html, this.currentPolicy);
this.checkSafety();
},
// 检查内容安全性
checkSafety() {
if (!isContentSafe(this.rawContent)) {
this.unsafeCount++;
this.logSecurityEvent('content_filtered', '内容包含不安全元素，已自动过滤');
}
},
// 处理安全警告
handleSafetyWarning(event) {
this.unsafeCount++;
this.logSecurityEvent('safety_warning', event.message || '检测到不安全内容');
},
// 记录安全事件
logSecurityEvent(type, message) {
this.securityEvents.push({
timestamp: new Date(),
type,
message
});
// 可以将安全事件发送到后端进行审计
if (this.$options.sendSecurityLogs) {
this.$api.logSecurityEvent({
type,
message,
policy: this.currentPolicy,
timestamp: new Date().toISOString()
});
}
}
},
mounted() {
// 应用初始策略
this.applyPolicy();
// 监听编辑器就绪事件
this.$nextTick(() => {
const editor = this.$refs.editor.quill;
if (editor) {
console.log('安全编辑器初始化完成，当前策略:', this.currentPolicy);
}
});
},
// 配置选项
sendSecurityLogs: true // 是否发送安全日志到后端
};
</script>
<style scoped>
.secure-editor {
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 15px;
}
.policy-controls {
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 15px;
}
.security-status {
padding: 5px 10px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 5px;
}
.status-icon {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
}
.status-icon.icon-safe {
background-color: #4CAF50;
}
.status-icon.icon-warning {
background-color: #FF9800;
}
.level-strict {
background-color: #e8f5e9;
color: #2e7d32;
}
.level-standard {
background-color: #fff3e0;
color: #e65100;
}
.level-relaxed {
background-color: #ffebee;
color: #c62828;
}
.content-stats {
margin-top: 15px;
padding-top: 15px;
border-top: 1px dashed #e0e0e0;
font-size: 0.9em;
color: #666;
display: flex;
gap: 20px;
}
</style>
四、安全配置与性能优化
4.1 安全配置检查表
| 配置项 | 安全建议 | 优先级 |
|---|---|---|
| 允许的HTML标签 | 基于最小权限原则，只开放必要标签 | 高 |
| 属性白名单 | 严格限制允许的属性，禁止所有事件属性 | 高 |
| 样式限制 | 使用正则表达式严格限制样式值格式 | 中 |
| 图片处理 | 限制图片来源，考虑使用中转服务 | 高 |
| 链接处理 | 验证并净化所有链接，禁止javascript:协议 | 高 |
| 粘贴过滤 | 对粘贴内容进行完全过滤，移除格式 | 中 |
| SVG处理 | 完全禁止或严格限制SVG元素 | 高 |
| iframe处理 | 完全禁止iframe标签 | 高 |
| 策略分级 | 根据内容类型使用不同安全策略 | 中 |
| 过滤日志 | 记录所有过滤操作，用于安全审计 | 中 |
4.2 性能优化策略
对于大型文档，内容过滤可能会影响性能，可采用以下优化措施：
- 延迟过滤：使用防抖技术，避免高频过滤
// 防抖过滤函数
export function debouncedSanitize(html, delay = 300) {
if (!this.debounceTimer) {
this.debounceTimer = setTimeout(() => {
this.safeContent = sanitizeContent(html);
this.debounceTimer = null;
}, delay);
}
}
- 分块处理：对大型文档进行分块过滤
// 分块处理大型HTML
export function chunkedSanitize(html, chunkSize = 10000) {
const chunks = [];
let position = 0;
// 将HTML分成块
while (position < html.length) {
chunks.push(html.substring(position, position + chunkSize));
position += chunkSize;
}
// 并行过滤所有块
const sanitizedChunks = chunks.map(chunk => sanitizeContent(chunk));
// 合并结果
return sanitizedChunks.join('');
}
- Web Worker过滤：使用Web Worker避免主线程阻塞
// 创建过滤Worker
// src/workers/sanitize-worker.js
import { sanitizeContent } from '../utils/html-sanitizer';
self.onmessage = function(e) {
const { html, options } = e.data;
const result = sanitizeContent(html, options);
self.postMessage({ result });
};
// 主线程调用
export function workerSanitize(html, options = {}) {
return new Promise((resolve) => {
// 检查Worker支持
if (!window.Worker) {
// 不支持Worker时直接过滤
return resolve(sanitizeContent(html, options));
}
// 创建Worker实例
const worker = new Worker('/workers/sanitize-worker.js');
// 发送数据
worker.postMessage({ html, options });
// 接收结果
worker.onmessage = function(e) {
resolve(e.data.result);
worker.terminate(); // 完成后终止Worker
};
// 处理错误
worker.onerror = function(error) {
console.error('过滤Worker错误:', error);
worker.terminate();
// 回退到普通过滤
resolve(sanitizeContent(html, options));
};
});
}
五、总结与最佳实践
5.1 核心安全原则
- 最小权限原则：只允许必要的HTML标签和属性
- 深度防御：前后端同时实施安全过滤
- 内容验证：不信任任何用户输入，始终进行验证
- 安全默认：默认使用最严格的安全策略
- 可审计性：记录所有安全相关事件
5.2 实施步骤
- 评估风险：根据应用场景确定安全需求
- 选择策略：基于风险评估选择合适的安全策略
- 集成过滤：实现前后端过滤机制
- 测试验证：使用XSS测试用例验证防护效果
- 监控改进：记录安全事件，持续优化策略
5.3 常见问题与解决方案
| 问题 | 解决方案 |
|---|---|
| 过滤后格式丢失 | 调整白名单配置，添加必要的标签和样式 |
| 性能问题 | 采用延迟过滤、分块处理或Web Worker方案 |
| 误报安全风险 | 优化过滤规则，减少误判 |
| 复杂内容处理 | 使用自定义转换规则处理特殊需求 |
| 多语言支持 | 确保过滤规则兼容Unicode和特殊字符 |
通过本文介绍的安全方案，你可以为vue-quill-editor构建多层次的安全防护体系，有效防范XSS攻击和内容注入风险。记住，安全是一个持续过程，需要根据实际应用场景不断调整和优化安全策略。
最后，建议定期更新sanitize-html和vue-quill-editor依赖，关注安全补丁发布，并建立安全事件响应机制，以应对不断演变的安全威胁。
如果本文对你有所帮助，请点赞收藏，并关注获取更多前端安全实践内容。下期我们将探讨"富文本内容的安全存储与传输加密"，敬请期待！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
