前端如何防止XSS攻击

大家好，欢迎来到IT知识分享网。

在前端开发中，防止 XSS（跨站脚本攻击） 是确保应用安全的关键。以下是全面的防护策略和代码示例：

一、XSS 攻击类型

二、防护策略

1. 输入验证与过滤

• 规则：对用户输入进行严格验证，拒绝非法字符
• 示例：
• javascript
• 复制
• function sanitizeInput(input) { return input.replace(/[<>”‘&]/g, ”); // 移除危险字符 } const userInput = ‘<script>alert(1)</script>’; const safeInput = sanitizeInput(userInput); // 输出空字符串

2. 输出编码

• 规则：在渲染动态内容时，对特殊字符进行转义
• 示例：
• javascript
• 复制
• function escapeHTML(str) { return str.replace(/&/g, ‘&’) .replace(/</g, ‘<‘) .replace(/>/g, ‘>’) .replace(/”/g, ‘”‘) .replace(/’/g, ”’); } const userInput = ‘<script>alert(1)</script>’; const safeOutput = escapeHTML(userInput); // 输出转义后的字符串

3. 使用安全的 DOM API

• 规则：避免直接操作 innerHTML，优先使用 textContent 或 setAttribute
• 示例：
• javascript
• 复制
• // 不安全的写法 document.getElementById(‘output’).innerHTML = userInput; // 安全的写法 document.getElementById(‘output’).textContent = userInput;

4. 启用 CSP（内容安全策略）

• 规则：通过 HTTP 头限制脚本加载来源
• 示例：
• http
• 复制
• Content-Security-Policy: default-src ‘self’; script-src ‘self’ https://trusted.cdn.com;

5. 使用安全的第三方库

• 推荐库：
• DOMPurify：净化 HTML 内容
• sanitize-html：过滤危险标签
• 示例：
• javascript
• 复制
• import DOMPurify from ‘dompurify’; const dirtyHTML = ‘<script>alert(1)</script>

  安全内容

  ‘; const cleanHTML = DOMPurify.sanitize(dirtyHTML); // 输出：

  安全内容

三、框架内置防护

1. React

• 自动转义：React 默认对 JSX 中的动态内容进行转义
• 危险操作：避免使用 dangerouslySetInnerHTML
• 示例：
• jsx
• 复制
• const userInput = ‘<script>alert(1)</script>’; return
  {userInput
  }

  ; // 自动转义，安全

2. Vue

• 自动转义：Vue 的模板语法默认对插值内容进行转义
• 危险操作：避免使用 v-html
• 示例：
• html
• 复制
• <div>{{ userInput }}