react-security-scanner

v1.0.0

Published

4 months ago

A comprehensive React security scanner with 45+ customizable rules covering XSS, injection attacks, data leaks, and more

0High
0Medium
0Low

ereddate

react security scanner linter security-audit xss injection vulnerability code-analysis static-analysis security-tools react-security security-checker vulnerability-scanner

React Security Scanner

一个全面的React安全扫描工具，包含45+个可自定义规则，覆盖XSS、注入攻击、数据泄露等安全问题。轻松检测React应用程序中的安全漏洞。

功能特性

🔍 45+内置安全规则 - 覆盖22个安全类别
🎯 React专用检测 - 专为React应用程序设计的规则
🔧 自定义规则 - 创建您自己的安全规则
🚫 忽略模式 - 支持.securityignore文件（类似.gitignore）
📊 多种报告格式 - 控制台、JSON和HTML报告
⚡ 高性能 - 使用Babel解析器快速扫描
🎨 严重级别过滤 - 按error、warning或info级别过滤
📝 TypeScript支持 - 完整的TypeScript类型定义
🌐 CLI工具 - 易于使用的命令行界面

安装

全局安装

npm install -g react-security-scanner

本地安装

npm install react-security-scanner --save-dev

快速开始

初始化配置

react-security-scanner init

这将创建：

.securityscanner.json - 扫描器配置文件
.securityignore - 忽略模式文件

扫描项目

# 扫描当前目录
react-security-scanner scan .

# 扫描指定目录
react-security-scanner scan ./src

# 使用自定义规则
react-security-scanner scan ./src -c ./customRules.js

# 指定忽略文件
react-security-scanner scan ./src -i .securityignore

# 生成JSON报告
react-security-scanner scan ./src -f json -o report.json

# 生成HTML报告
react-security-scanner scan ./src -f html -o report.html

# 只扫描error级别的问题
react-security-scanner scan ./src -s error

查看可用规则

# 列出所有规则
react-security-scanner list-rules

# 列出所有分类
react-security-scanner list-categories

安全规则

扫描器包含45个安全规则，涵盖22个类别：

XSS（跨站脚本攻击）

react-dangerously-set-inner-html（错误）检测dangerouslySetInnerHTML的使用，可能导致XSS漏洞
react-insecure-iframe（警告）检测没有sandbox属性的iframe
react-inline-event-handlers（警告）检测内联事件处理器，可能存在安全风险
dom-xss-dangerous-methods（错误）检测使用危险的DOM方法（document.write、innerHTML、outerHTML）
dom-xss-dangerous-operations（错误）检测可能导致XSS攻击的危险DOM操作
dom-xss-url-manipulation（错误）检测可能导致XSS攻击的URL操作

代码注入

react-eval-usage（错误）检测eval()函数的使用，可能导致代码注入
insecure-eval-alternatives（错误）检测使用不安全的eval替代方案，如Function构造函数和setTimeout/setInterval

密钥和凭证

react-hardcoded-secrets（错误）检测硬编码的密钥或API密钥
hardcoded-credentials（错误）检测代码中的硬编码凭证

数据存储

react-unsafe-localstorage（警告）检测在localStorage中存储敏感数据
react-context-sensitive-data（错误）检测在React Context中存储敏感数据
sessionstorage-sensitive-data（错误）检测在sessionStorage中存储敏感数据
insecure-localstorage-get（警告）检测从localStorage读取敏感数据

加密

insecure-crypto-algorithms（错误）检测使用不安全的加密算法（MD5、SHA1、SHA256等）
insecure-random-generation（错误）检测使用不安全的随机数生成方法（Math.random()）

认证

jwt-insecure-usage（错误）检测不安全的JWT处理实践，如使用jwt.decode()而不验证签名

传输安全

react-missing-https（警告）检测使用HTTP而非HTTPS的URL
insecure-http-method（警告）检测不安全的HTTP方法（用于敏感操作的GET请求）

开放重定向

react-unsafe-redirect（警告）检测使用用户输入的不安全重定向
react-link-unsafe-redirect（警告）检测React Link组件中的不安全重定向

注入攻击

sql-injection-risk（错误）检测潜在的SQL注入漏洞
command-injection-risk（错误）检测潜在的命令注入漏洞
path-traversal-risk（错误）检测潜在的路径遍历漏洞

文件操作

insecure-file-upload（错误）检测不安全的文件上传实现
insecure-file-handling（错误）检测不安全的文件处理操作

Cookie

insecure-cookie-usage（错误）检测不安全的Cookie配置

CSRF

missing-csrf-protection（警告）检测表单中缺少CSRF保护

信息泄露

url-sensitive-data（错误）检测URL参数中的敏感数据
debug-information-leak（错误）检测生产环境中的调试信息泄露
html-comment-sensitive-info（警告）检测HTML注释中的敏感信息

输入验证

insufficient-input-validation（错误）检测输入验证不足

错误处理

insecure-error-handling（错误）检测可能泄露敏感信息的不安全错误处理

JSON

insecure-json-parse（错误）检测不安全的JSON.parse()使用

正则表达式

unsafe-regex-pattern（错误）检测可能导致ReDoS的不安全正则表达式模式

网络

insecure-fetch-usage（错误）检测不安全的fetch()使用

安全头

missing-content-security-policy（警告）检测缺少Content-Security-Policy头

XML安全

xxe-attack-risk（错误）检测潜在的XXE（XML外部实体）攻击漏洞
insecure-deserialization（错误）检测XML数据的不安全反序列化

CORS

cors-misconfiguration（错误）检测CORS配置错误

WebSocket

insecure-websocket（错误）检测不安全的WebSocket实现

点击劫持

clickjacking-risk（警告）检测点击劫持漏洞

时序攻击

timing-attack-risk（错误）检测时序攻击漏洞

原型污染

prototype-pollution（错误）检测容易受到原型污染攻击的代码

React Props

react-props-dangerous-usage（警告）检测React Props的危险使用

自定义规则

创建自定义规则文件（例如customRules.js）：

module.exports = {
  rules: [
    {
      id: 'custom-rule-id',
      name: 'Custom Rule Name',
      description: 'Description of the rule',
      severity: 'error', // 'error' | 'warning' | 'info'
      category: 'Category Name',
      check: (node, filePath) => {
        // 返回问题对象或null
        if (/* 检测条件 */) {
          return {
            ruleId: 'custom-rule-id',
            ruleName: 'Custom Rule Name',
            severity: 'error',
            category: 'Category Name',
            message: 'Security issue detected',
            filePath,
            line: node.loc?.start.line || 0,
            column: node.loc?.start.column || 0,
            code: 'code snippet'
          };
        }
        return null;
      }
    }
  ]
};

使用自定义规则：

react-security-scanner scan ./src -c ./customRules.js

忽略模式

.securityignore文件支持类似.gitignore的模式：

# 忽略node_modules
node_modules/**

# 忽略构建输出
dist/**
build/**

# 忽略特定文件
*.min.js
*.min.css

# 忽略特定目录
public/**
vendor/**

# 忽略测试文件
**/*.test.js
**/*.spec.js

配置

.securityscanner.json配置示例：

{
  "rules": {
    "enabled": [],
    "disabled": [],
    "customRulesPath": "./customRules.js"
  },
  "ignore": {
    "patterns": [
      "node_modules/**",
      "dist/**"
    ],
    "ignoreFilePath": ".securityignore"
  },
  "output": {
    "format": "console",
    "filePath": "report.html"
  },
  "severity": "all"
}

CLI选项

Usage: react-security-scanner [options] [command]

Options:
  -V, --version                    output the version number
  -h, --help                       display help for command

Commands:
  init                              Initialize configuration files
  scan [path] [options]            Scan a directory or file
  list-rules                        List all available rules
  list-categories                   List all rule categories

Scan Options:
  -c, --custom <path>              Path to custom rules file
  -i, --ignore <path>              Path to ignore file
  -f, --format <format>            Output format: console, json, html
  -o, --output <path>              Output file path
  -s, --severity <level>           Filter by severity: error, warning, info, all

项目结构

src/
├── cli.ts                 # CLI入口
├── index.ts               # 主入口
├── types.ts               # TypeScript类型定义
├── rules/                 # 安全规则模块
│   ├── baseRules.ts      # 基础规则（45个规则）
│   ├── customRuleManager.ts # 自定义规则管理器
│   └── index.ts          # 规则管理器
├── parser/               # 代码解析模块
│   ├── codeParser.ts     # 代码解析器
│   ├── fileScanner.ts    # 文件扫描器
│   └── index.ts
├── scanner/              # 扫描核心模块
│   ├── securityScanner.ts
│   └── index.ts
├── config/               # 配置管理模块
│   ├── configManager.ts  # 配置管理器
│   ├── ignoreManager.ts  # 忽略模式管理器
│   └── index.ts
└── reporter/             # 报告生成模块
    ├── reportGenerator.ts
    └── index.ts

示例

查看examples/目录中的示例文件：

ExampleComponent.jsx - 包含各种安全问题的示例组件
FinalTestComponent.jsx - 测试所有45个规则的组件
customRules.js - 自定义规则示例

扫描示例文件：

react-security-scanner scan ./examples

开发

# 安装依赖
npm install

# 开发模式
npm run dev scan ./src

# 构建
npm run build

# 运行构建后的版本
npm start scan ./src

贡献

欢迎贡献！请遵循以下步骤：

Fork仓库
创建特性分支（git checkout -b feature/amazing-feature）
提交更改（git commit -m 'Add amazing feature'）
推送到分支（git push origin feature/amazing-feature）
打开Pull Request

添加新规则

要添加新的安全规则：

打开src/rules/baseRules.ts
将规则添加到baseRules数组中：

{
  id: 'rule-id',
  name: 'Rule Name',
  description: 'Rule description',
  severity: 'error', // 'error' | 'warning' | 'info'
  category: 'Category',
  check: (node, filePath) => {
    // 实现检查逻辑
    return null;
  }
}

使用示例代码测试规则
更新README中的新规则

添加新报告格式

要添加新的报告格式：

打开src/reporter/reportGenerator.ts
为您的格式添加新方法
更新CLI以支持新格式

更新日志

[1.0.0] - 2026-01-27

新增

初始发布
45个内置安全规则，涵盖22个类别
自定义规则支持
忽略模式支持（.securityignore）
多种报告格式（控制台、JSON、HTML）
严重级别过滤
CLI工具
TypeScript支持
完整文档

许可证

MIT

支持

📧 邮箱：[email protected]
🐛 问题：GitHub Issues
📖 文档：完整文档

致谢

使用Babel进行代码解析
灵感来自ESLint和SonarQube

English Documentation | 返回顶部