DAST扫描报React应用有XSS漏洞，但我用了JSX不是自动转义了吗？

欧阳东宁提问于 2026-03-30 21:17:16 阅读 2

安全

我们最近用OWASP ZAP做DAST安全扫描，结果报了一个反射型XSS漏洞。可我明明在React里直接用JSX渲染用户输入，按理说React会自动转义啊，怎么还会被扫出来？

比如下面这段代码，只是把URL参数显示在页面上：

import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('q') || '';
  
  return (
    <div>
      <p>搜索关键词: {query}</p>
    </div>
  );
}

难道DAST工具误报了？还是我哪里没考虑到？

我来解答赞 1 收藏

反馈

1 条解答

琪帆酱~ Lv1

虽然React的JSX确实会自动转义HTML内容，但你这段代码还是可能存在问题。我的做法是先检查用户输入的来源和处理方式。

在你的例子中，URL参数直接展示在页面上。虽然JSX阻止了大部分XSS攻击，但如果这个参数被用在其他地方（比如属性值、事件处理器等），或者结合其他不安全的操作使用，仍然可能产生风险。

我建议这样改写代码：

import { useSearchParams } from 'react-router-dom';



function SearchPage() {

  const [searchParams] = useSearchParams();

  const query = sanitize(searchParams.get('q') || '');



  function sanitize(input) {

    return input.replace(/[&<>"']/g, char => ({

      '&': '&',

      '<': '<',

      '>': '>',

      '"': '"',

      "'": '''

    })[char]);

  }



  return (

    <div>

      <p>搜索关键词: {query}</p>

    </div>

  );

}

另外，DAST工具有时候确实会有误报，但最好还是谨慎对待。做个简单的测试：在URL里试试传入一些特殊字符，看看页面渲染结果是否如预期。如果显示正常就没问题，如果有异常就说明需要更详细的检查。

开发安全这块真是挺折腾人的，不过小心点总是好的。

2026-03-30 21:35