前端项目里怎么集成SAST工具做代码扫描？

伊可提问于 2026-02-27 05:13:22 阅读 12

安全

我们团队最近要落地安全开发生命周期，领导让在前端项目里加上SAST（静态应用安全测试）工具。但我试了几个，比如 ESLint 的 security 插件，还有 SonarQube，配置起来特别迷糊。

比如我用 eslint-plugin-security 装上了，但跑的时候根本没报任何安全问题，哪怕我故意写了个 eval('xxx') 它也视而不见。是不是我漏了什么配置？

另外，有没有适合 React + TypeScript 项目的轻量级 SAST 工具推荐？最好是能塞进 CI 流程里的，别太重。

现在 CI 用的是 GitHub Actions，本地开发用的是 Vite。下面是我 .eslintrc.js 的部分配置：

module.exports = {
  plugins: ['security'],
  extends: ['plugin:security/recommended'],
  rules: {
    'security/detect-eval-with-expression': 'error'
  }
};

我来解答赞 11 收藏

反馈

1 条解答

一婷婷 Lv1

你这个配置其实没大问题，但 eslint-plugin-security 默认只检测一些运行时风险，比如 eval、new Function、setTimeout(string) 这类，不过它对 TypeScript 的支持有点鸡肋——很多规则是基于 JS AST 的，TS 里写法稍微变一下它就识别不出来，尤其是你用了 Vite + React，可能还开启了 noEmit 或者 Babel 编译路径绕过了 ESLint 的某些检查。

先解决你本地不报错的问题：
1. 确保你装了 eslint-plugin-security（不是 @eslint/security，那个是新出的内置插件，但还没覆盖全），版本最好 ≥1.7.0
2. 检查你有没有把 .ts 和 .tsx 加进 ESLint 的处理范围，比如 extends 里加了 plugin:@typescript-eslint/recommended，但没处理冲突规则
3. 重点：security/detect-eval-with-expression 这个 rule 是检测 eval(someVar)，但如果你写的是 eval('xxx')，它其实走的是 detect-eval-with-expression 的兄弟规则：security/detect-eval（注意没 with-expression）
你试试改成 'security/detect-eval': 'error'，这个是管字面量 eval('xxx') 的

另外你可能漏了 ESLint 的 parserOptions 配置，比如：

parserOptions: {

  ecmaVersion: 2022,

  sourceType: 'module',

  ecmaFeatures: {

    impliedStrict: true

  }

}

不过说实话，纯靠 ESLint 做 SAST 真的很局限，尤其前端代码里很多逻辑是运行时拼接的（比如 React 的 dangerouslySetInnerHTML），ESLint 根本跑不全。

推荐几个轻量级、适合 CI 的方案，按优先级排：

1. eslint-plugin-security + eslint-plugin-react（专门抓 dangerouslySetInnerHTML、script-src 等）
这个组合已经能覆盖 60% 的常见前端 XSS 风险，配合 GitHub Actions 很简单：

- name: Run ESLint

  run: npx eslint --max-warnings=0 'src/**/*.{js,jsx,ts,tsx}'

2. 如果想再加一层，用 sonarqube-scanner，但别用它整个大套件，只跑静态分析即可。不过 SonarQube 对前端支持一般，得自己写 sonar-project.properties，而且它默认只扫 JS，TS 需要额外装 typescript 插件，容易踩坑。

3. 真正适合 React + TS 的轻量 SAST 是 tslint-security（注意不是 TSLint 旧版，是单独的安全插件），它基于 TypeScript AST，能准确识别 eval、localStorage 滥用、fetch 的不安全参数等，而且和 eslint 不冲突，可以并行跑。不过它只支持 TSLint，而 TSLint 已经废弃了，所以更推荐迁移到 typescript-eslint 的替代方案——但如果你项目还没升级到 ESLint 8+，这个插件确实香。

4. 最近比较火的是 codeql（GitHub 官方的），你直接在 Actions 里加个 step：

- name: Initialize CodeQL

  uses: github/codeql-action/init@v3

  with:

    languages: javascript-typescript

- name: Perform CodeQL Analysis

  uses: github/codeql-action/analyze@v3

它能识别 XSS、SSRF、路径遍历等，连 React 的 dangerouslySetInnerHTML 都能 trace 到源头，不过第一次跑可能有点慢，需要下载数据库。

一般这样处理：先用 eslint-plugin-security + eslint-plugin-react 起步，确保 CI 能跑通，再逐步引入 CodeQL 做深度分析。别一开始就想用 SonarQube，它对前端项目配置成本高，维护起来很累，尤其是团队人少的时候。

顺带一提，你故意写 eval('xxx') 但没触发，大概率是 ESLint 没扫到这个文件——检查下 eslint.config.js（如果你用的是新格式）或者 .eslintrc.js 里的 files / exclude 配置，或者干脆用 npx eslint src/test-file.ts 手动跑一下看看有没有输出。

2026-02-27 06:00