React 应用安全最佳实践

中等 🟡React 生态

11 个标签

预计阅读时间：66 分钟

React安全XSSCSRFCSPDOMPurifyJWT点击劫持供应链安全原型污染开放重定向

React 应用安全最佳实践

安全是 React 应用开发的重要考虑因素。前端安全不仅关乎用户数据保护，也直接影响应用的可靠性和用户信任。很多开发者存在一个误区：认为"安全是后端的事"，前端只负责界面。但事实恰恰相反——前端是攻击者最先接触、也最容易操纵的一层。用户的浏览器完全在攻击者的可控范围内：他可以打开控制台、篡改请求、伪造 DOM、注入脚本。任何"只在前端做的校验"都可以被绕过，任何"藏在打包代码里的密钥"都可以被提取。

打个比方：如果把一个 Web 应用比作一栋大楼，后端是金库和保险柜，前端就是大门、玻璃幕墙和前台。攻击者不会直接去砸保险柜，他们会先从大门和玻璃幕墙下手——因为那是暴露在外、最容易接触的部分。XSS、CSRF、点击劫持、令牌泄露这些攻击，几乎全部发生在"前台"这一层。

React 在设计上已经考虑了许多安全问题，比如默认的输出转义机制，帮开发者挡掉了大量最常见的 XSS。但"默认安全"不等于"绝对安全"——一旦你使用了 `dangerouslySetInnerHTML`、动态拼接 `href`、在 `localStorage` 里存令牌，或者引入了带漏洞的第三方依赖，React 的保护就会被绕过。本文将系统梳理 React 应用中最常见的安全威胁，从原理到代码，从真实案例到最佳实践，帮助你构建真正安全可靠的应用。

安全威胁全景：OWASP Top 10 与前端的关系

在深入具体防护之前，我们先建立一个整体认知。OWASP（开放式 Web 应用安全项目）每几年发布一次《Top 10 Web 应用安全风险》，是业界公认的权威参考。下面这张表列出了 OWASP Top 10 中与前端 / React 应用密切相关的条目：

| --- | --- | --- | --- |

| A01 | 访问控制失效 | 高 | 前端隐藏按钮但后端不校验、越权访问 |

| A02 | 加密机制失效 | 中 | 令牌明文存储、未用 HTTPS |

| A03 | 注入（含 XSS） | 高 | dangerouslySetInnerHTML、javascript: 协议注入 |

| A05 | 安全配置错误 | 高 | 缺少 CSP、暴露源码 map、开放 CORS |

| A06 | 易受攻击的组件 | 高 | npm 依赖漏洞、供应链投毒 |

| A07 | 身份认证失效 | 高 | JWT 处理不当、CSRF、令牌泄露 |

| A08 | 软件和数据完整性失效 | 中 | 依赖未锁版本、CDN 无 SRI |

值得注意的是，在 OWASP 2021 版本中，XSS 被合并进了 A03「注入」大类。根据 OWASP 的统计数据，注入类漏洞在被测应用中的出现率约为 19%，而在历史版本里 XSS 曾长期占据前三，被测应用中约有 2/3 存在某种形式的 XSS 弱点。这说明：即便到了 React 时代，XSS 依然是前端安全的头号敌人。

XSS 防护详解

概念：什么是 XSS

跨站脚本攻击（Cross-Site Scripting，XSS） 是指攻击者将恶意脚本注入到网页中，当其他用户浏览该网页时，恶意脚本会在受害者的浏览器中执行。因为脚本运行在受害者的浏览器、且处于目标网站的源（origin）下，它拥有和正常页面脚本完全相同的权限：可以读取 Cookie、读取 localStorage、发起带凭证的请求、篡改页面内容、监听键盘输入。

一句话理解：XSS 的本质是"数据被当成了代码来执行"。你以为用户提交的只是一段昵称文本，但因为没有正确转义，浏览器把其中的 ``，它也只会被当作纯文本显示出来，而不会被执行。这是 React 提供的第一道防线，帮开发者自动挡掉了绝大多数最常见的 XSS。

但要记住：React 的自动转义只作用于 JSX 的文本子节点和属性值。一旦你使用 `dangerouslySetInnerHTML`、把用户数据拼进 `href` / `src`、或者直接操作原生 DOM，这层保护就失效了。

javascriptCode

// React 自动转义演示
function Demo() {
  const evil = '<img src=x onerror="alert(document.cookie)">';

  // ✅ 安全：evil 被当作纯文本，屏幕上原样显示这串字符
  return <div>{evil}</div>;

  // ❌ 危险：下面这行会真正执行 onerror 里的脚本
  // return <div dangerouslySetInnerHTML={{ __html: evil }} />;
}

代码示例：三型 XSS 的防护

javascriptCode

// ============ 反射型 XSS 防护 ============
// ❌ 危险：直接把 URL 参数塞进 innerHTML
function BadSearchResult() {
  const keyword = new URLSearchParams(window.location.search).get('q');
  return <div dangerouslySetInnerHTML={{ __html: '搜索：' + keyword }} />;
  // 攻击者构造 ?q=<img src=x onerror=alert(1)> 即可触发
}

// ✅ 安全：交给 React 自动转义
function GoodSearchResult() {
  const keyword = new URLSearchParams(window.location.search).get('q');
  return <div>搜索：{keyword}</div>;
}

// ============ 存储型 XSS 防护 ============
// 评论内容来自数据库，可能包含其他用户注入的恶意脚本
import DOMPurify from 'dompurify';

function CommentItem({ comment }) {
  // 富文本评论需要保留部分 HTML，必须先清理
  const clean = DOMPurify.sanitize(comment.html, {
    ALLOWED_TAGS: ['p', 'br', 'b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li', 'blockquote'],
    ALLOWED_ATTR: ['href', 'title', 'target', 'rel']
  });
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}

// ============ DOM 型 XSS 防护 ============
// ❌ 危险：直接操作 DOM，绕过 React 转义
function BadHashRender() {
  const ref = useRef(null);
  useEffect(() => {
    // location.hash 完全由用户可控
    ref.current.innerHTML = decodeURIComponent(window.location.hash.slice(1));
  }, []);
  return <div ref={ref} />;
}

// ✅ 安全：用 textContent 而非 innerHTML，或交给 React state 渲染
function GoodHashRender() {
  const [text, setText] = useState('');
  useEffect(() => {
    setText(decodeURIComponent(window.location.hash.slice(1)));
  }, []);
  return <div>{text}</div>; // React 自动转义
}

代码示例：DOMPurify 的进阶配置

DOMPurify 是目前最成熟、最广泛使用的前端 HTML 清理库。它会解析 HTML、构建 DOM 树、剔除所有危险的标签和属性（如 `