面试题：Vue项目中如何防止XSS攻击

数据绑定方面

使用 v - html 时谨慎处理：
- 如果使用 v - html 指令插入动态 HTML 内容，一定要确保内容来源可信。例如，从后端获取的数据，后端需要对数据进行严格的过滤和转义。比如在 Python 的 Flask 框架中，可以使用 MarkupSafe 库的 escape 函数对数据进行转义后再返回给前端。
- 对于不可信数据，尽量避免使用 v - html，而是通过文本插值（{{}}）的方式插入数据，Vue 会自动对数据进行 HTML 转义，防止恶意脚本注入。
绑定属性值：
- 当绑定 HTML 属性值时，同样需要对值进行验证和过滤。例如，绑定 src 属性时，要确保值是合法的 URL，并且不包含恶意脚本。可以使用正则表达式验证 URL 的合法性，如：
```
const urlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
function validateUrl(url) {
    return urlRegex.test(url);
}
```
- 在 Vue 组件中，可以在 data 或 computed 属性中对要绑定的属性值进行验证处理后再绑定。

用户输入处理方面

输入验证：
- 在表单输入时，使用 HTML5 的输入类型限制，如 type="email"、type="number" 等，这样浏览器会自动对输入内容进行基本格式验证。
- 对于文本输入框，在 Vue 组件的 watch 或 methods 中编写自定义验证逻辑。例如，对于用户名输入，限制只能输入字母、数字和下划线，长度在 3 - 20 位之间，可以这样验证：
```
watch: {
    username(newValue) {
        const usernameRegex = /^[a-zA - Z0 - 9_]{3,20}$/;
        if (!usernameRegex.test(newValue)) {
            // 提示用户输入格式错误
        }
    }
}
```
输入过滤和转义：
- 在提交用户输入数据到后端之前，对数据进行过滤和转义。可以使用第三方库如 DOMPurify，它能有效地清理 HTML 字符串中的恶意代码。例如：
```
import DOMPurify from 'dompurify';
const userInput = '<script>alert("XSS")</script>';
const cleanInput = DOMPurify.sanitize(userInput);
// cleanInput 为清理后的安全字符串
```
- 在后端接收数据时，也要再次进行验证和过滤，确保数据的安全性。不同后端语言有相应的转义函数，如 PHP 的 htmlspecialchars 函数。
设置 HTTP 头：
- 在服务器端设置 Content - Security - Policy（CSP）头，它可以限制浏览器从哪些源加载资源，防止恶意脚本的注入。例如，设置只允许从本站点加载脚本：
```
Content - Security - Policy: default - src'self'
```
- 还可以设置 X - Frame - Options 头防止点击劫持，X - XSS - Protection 头开启浏览器内置的 XSS 过滤机制（虽然部分浏览器已弃用，但仍有一定作用）。

星途面试题库

面试题：Vue项目中如何防止XSS攻击

知识考点

面试题答案

数据绑定方面

用户输入处理方面