关于Web前端安全之XSS攻击防御增强方法

原创于 2025-08-03 16:57:03 发布 · 705 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #安全 #xss

安全防护专栏收录该内容

8 篇文章

订阅专栏

仅依赖前端验证是无法完全防止 XSS的，还需要增强后端验证，使用DOMPurify净化 HTML 时，还需要平衡安全性与业务需求。

一、仅依赖前端验证无法完全防止 XSS 的原因及后端验证的重要性

1. 前端验证的局限性

前端验证（如 JavaScript 输入检查）可以提升用户体验，但无法作为安全防护的核心，原因如下：

前端代码可被篡改：

攻击者可通过浏览器开发者工具禁用或修改前端验证逻辑，直接向服务器发送恶意数据。

绕过前端提交：

攻击者可通过 curl、Postman 等工具直接构造 HTTP 请求，完全绕过前端页面的验证逻辑。

场景覆盖不全：

前端验证可能仅针对可见输入（如表单），而忽略其他数据来源（如 URL 参数、Cookie、第三方接口返回数据）。

2. 后端验证的核心价值

后端验证是防御 XSS 的最后一道防线，其重要性体现在：

不可绕过性：

所有用户输入（无论来源）最终都需经过服务器处理，后端验证可确保恶意数据在进入存储或渲染流程前被拦截。

一致性：

后端验证可统一处理多端（Web、App、第三方接口）的输入，避免因前端实现差异导致的防护漏洞。

全生命周期防护：

后端验证不仅覆盖输入阶段，还能在数据存储、跨系统传输、渲染输出等全流程中生效，确保数据始终处于安全状态。

二、三种常见的 HTML 转义方法及适用场景

1.HTML 实体转义（核心转义）

转义规则：将 < 转为 <，> 转为 >，& 转为 &，" 转为 "，' 转为 '。
适用场景：所有动态数据插入 HTML 标签内容或属性时（如 <div>{{ 转义后的数据 }}</div> 或 <input value="{{ 转义后的数据 }}">）。
示例：用户输入 <script>alert(1)</script> 转义后变为 <script>alert(1)</script>，仅作为文本显示。

2.encodeURIComponent

作用：对 URL 中的参数进行编码，将特殊字符（如 ?、&、=、空格等）转换为 %XX 形式的 URL 编码。
适用场景：动态生成 URL 参数时（如拼接查询字符串、跳转链接）。
示例：用户输入 a&b=c 经 encodeURIComponent 处理后变为 a%26b%3Dc，避免破坏 URL 结构或注入恶意参数。

3.textContent（DOM API 安全输出）

作用：通过 JavaScript 的 textContent 属性设置元素内容，自动将所有内容视为纯文本，不解析 HTML。
适用场景：前端动态插入文本内容时（替代 innerHTML）。
示例：element.textContent = userInput 会将 <script> 直接显示为文本，而非执行脚本。

三、使用 DOMPurify 时平衡安全性与业务需求的策略

DOMPurify 是一款强大的 HTML 净化库，可过滤恶意标签和属性，但业务中常需允许特定标签（如富文本中的 <b>、<img>）。平衡两者的核心是最小权限原则：仅开放必要功能，同时严格限制风险点。

1. 基础配置：默认严格模式

DOMPurify 默认已过滤绝大多数危险内容（如 <script>、onclick、javascript: 协议），直接使用即可覆盖大部分场景：

import DOMPurify from 'dompurify';

const safeHtml = DOMPurify.sanitize(userInput); // 默认配置：过滤危险内容

2. 允许特定标签和属性（按需开放）

若业务需要支持富文本（如允许 <b>、<i>、<a>、<img>），可通过配置精细控制：

// 允许 <b>、<i>、<a>、<img>，并限制 <a> 和 <img> 的属性
const safeHtml = DOMPurify.sanitize(userInput, {
  ADD_TAGS: ['b', 'i', 'a', 'img'], // 额外允许的标签（默认已允许部分安全标签）
  ADD_ATTR: ['href', 'src', 'alt'], // 额外允许的属性
  ALLOW_UNKNOWN_PROTOCOLS: false,   // 禁止非标准协议（如 javascript:）
  ALLOW_SELF_CLOSE_IN_ATTR: false,  // 禁止属性中的自闭合语法（避免绕过）
  // 限制 <a> 标签的 href 仅允许 http/https 协议
  CHECK_PROTOCOL: true,
  // 自定义过滤逻辑：例如限制 <img> 的 src 仅来自可信域名
  beforeSanitizeElements: (node) => {
    if (node.tagName === 'IMG' && node.src) {
      const allowedDomains = ['trusted-cdn.com', 'example.com'];
      const srcDomain = new URL(node.src).hostname;
      if (!allowedDomains.includes(srcDomain)) {
        node.src = ''; // 清空不可信图片地址
      }
    }
  }
});