小洛的前端技术博客Appearance
前端安全的做法
前端安全也是一个很重要的东西，虽然安全方面在前端占比不是很多，但也是要做的，后端必做就肯定的，像 xss、csrf 等都是比较常见的。
文本输入：防止 xss 攻击
虽然 Vue 默认会转义 中的内容，但如果你需要渲染富文本，就必须警惕 XSS。
v-html也是不安全的，直接使用 v-html 渲染未经过处理的用户输入。
vue
<template>
<!-- 危险！如果 userInput 包含 <script>alert('hacked')</script>，脚本将被执行 -->
<div v-html="userInput"></div>
</template>
<script>
export default {
data() {
return {
userInput: '<img src="invalid-source" onerror="alert(\'XSS Attack!\')">',
};
},
};
</script><template>
<!-- 危险！如果 userInput 包含 <script>alert('hacked')</script>，脚本将被执行 -->
<div v-html="userInput"></div>
</template>
<script>
export default {
data() {
return {
userInput: '<img src="invalid-source" onerror="alert(\'XSS Attack!\')">',
};
},
};
</script>使用 DOMPurify 库进行清理
sh
npm install dompurifynpm install dompurifyvue
<template>
<!-- 安全：userInput 在渲染前经过了清理 -->
<div v-html="sanitizedHtml"></div>
</template>
<script>
import DOMPurify from 'dompurify';
export default {
data() {
return {
userInput: '<img src="valid-source"> <script>alert("hacked")</script> <p>This is safe.</p>'
};
},
computed: {
sanitizedHtml() {
// 清理 HTML，移除所有潜在的危险脚本和属性
return DOMPurify.sanitize(this.userInput);
}
}
}
</script><template>
<!-- 安全：userInput 在渲染前经过了清理 -->
<div v-html="sanitizedHtml"></div>
</template>
<script>
import DOMPurify from 'dompurify';
export default {
data() {
return {
userInput: '<img src="valid-source"> <script>alert("hacked")</script> <p>This is safe.</p>'
};
},
computed: {
sanitizedHtml() {
// 清理 HTML，移除所有潜在的危险脚本和属性
return DOMPurify.sanitize(this.userInput);
}
}
}
</script>文件上传能做的就是一些检查了，比如只能上传图片和固定文件大小