# react-security-scanner

**Repository Path**: ereddate2017/react-security-scanner

## Basic Information

- **Project Name**: react-security-scanner
- **Description**: A comprehensive React security scanner with 45+ customizable rules covering XSS, injection attacks, data leaks, and more
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-27
- **Last Updated**: 2026-01-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Security Scanner

[![npm version](https://badge.fury.io/js/react-security-scanner.svg)](https://www.npmjs.com/package/react-security-scanner)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Downloads](https://img.shields.io/npm/dm/react-security-scanner.svg)](https://www.npmjs.com/package/react-security-scanner)
[![Node.js Version](https://img.shields.io/node/v/react-security-scanner.svg)](https://nodejs.org)

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

## 功能特性

- 🔍 **71+内置安全规则** - 覆盖34个安全类别
- 🎯 **React专用检测** - 专为React应用程序设计的规则
- 🔧 **自定义规则** - 创建您自己的安全规则
- 🚫 **忽略模式** - 支持`.securityignore`文件（类似`.gitignore`）
- 📊 **多种报告格式** - 控制台、JSON和HTML报告
- ⚡ **高性能** - 使用Babel解析器快速扫描
- 🎨 **严重级别过滤** - 按error、warning或info级别过滤
- 📝 **TypeScript支持** - 完整的TypeScript类型定义
- 🌐 **CLI工具** - 易于使用的命令行界面
- 🚀 **高级功能**：
  - **批量处理** - 批量处理文件以获得更好的性能
  - **语义分析** - 高级代码分析以获得更深入的安全洞察
  - **依赖安全** - 全面的依赖漏洞扫描
  - **高级报告** - 趋势分析、合规报告、OWASP映射
  - **许可证合规** - 检查许可证策略违规
  - **CI/CD集成** - 原生支持GitHub Actions、GitLab CI、Jenkins、Azure DevOps、CircleCI
  - **NPM审计集成** - 实时依赖漏洞检测
  - **React生态安全** - React包的专门监控

## 安装

### 全局安装

```bash
npm install -g react-security-scanner
```

### 本地安装

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

## 快速开始

### 初始化配置

```bash
react-security-scanner init
```

这将创建：
- `.securityscanner.json` - 扫描器配置文件
- `.securityignore` - 忽略模式文件

### 扫描项目

```bash
# 扫描当前目录
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
```

### 查看可用规则

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

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

## 安全规则

扫描器包含**63个安全规则**，涵盖**30个类别**：

### XSS（跨站脚本攻击）

1. **react-dangerously-set-inner-html**（错误）
   检测`dangerouslySetInnerHTML`的使用，可能导致XSS漏洞

2. **react-insecure-iframe**（警告）
   检测没有sandbox属性的iframe

3. **react-inline-event-handlers**（警告）
   检测内联事件处理器，可能存在安全风险

4. **dom-xss-dangerous-methods**（错误）
   检测使用危险的DOM方法（document.write、innerHTML、outerHTML）

5. **dom-xss-dangerous-operations**（错误）
   检测可能导致XSS攻击的危险DOM操作

6. **dom-xss-url-manipulation**（错误）
   检测可能导致XSS攻击的URL操作

### 代码注入

7. **react-eval-usage**（错误）
   检测`eval()`函数的使用，可能导致代码注入

8. **insecure-eval-alternatives**（错误）
   检测使用不安全的eval替代方案，如Function构造函数和setTimeout/setInterval

### 密钥和凭证

9. **react-hardcoded-secrets**（错误）
   检测硬编码的密钥或API密钥

10. **hardcoded-credentials**（错误）
    检测代码中的硬编码凭证

### 数据存储

11. **react-unsafe-localstorage**（警告）
    检测在localStorage中存储敏感数据

12. **react-context-sensitive-data**（错误）
    检测在React Context中存储敏感数据

13. **sessionstorage-sensitive-data**（错误）
    检测在sessionStorage中存储敏感数据

14. **insecure-localstorage-get**（警告）
    检测从localStorage读取敏感数据

### 加密

15. **insecure-crypto-algorithms**（错误）
    检测使用不安全的加密算法（MD5、SHA1、SHA256等）

16. **insecure-random-generation**（错误）
    检测使用不安全的随机数生成方法（Math.random()）

### 认证

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

### 传输安全

18. **react-missing-https**（警告）
    检测使用HTTP而非HTTPS的URL

19. **insecure-http-method**（警告）
    检测不安全的HTTP方法（用于敏感操作的GET请求）

### 开放重定向

20. **react-unsafe-redirect**（警告）
    检测使用用户输入的不安全重定向

21. **react-link-unsafe-redirect**（警告）
    检测React Link组件中的不安全重定向

### 注入攻击

22. **sql-injection-risk**（错误）
    检测潜在的SQL注入漏洞

23. **command-injection-risk**（错误）
    检测潜在的命令注入漏洞

24. **path-traversal-risk**（错误）
    检测潜在的路径遍历漏洞

### 文件操作

25. **insecure-file-upload**（错误）
    检测不安全的文件上传实现

26. **insecure-file-handling**（错误）
    检测不安全的文件处理操作

### Cookie

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

### CSRF

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

### 信息泄露

29. **url-sensitive-data**（错误）
    检测URL参数中的敏感数据

30. **debug-information-leak**（错误）
    检测生产环境中的调试信息泄露

31. **html-comment-sensitive-info**（警告）
    检测HTML注释中的敏感信息

### 输入验证

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

### 错误处理

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

### JSON

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

### 正则表达式

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

### 网络

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

### 安全头

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

### XML安全

38. **xxe-attack-risk**（错误）
    检测潜在的XXE（XML外部实体）攻击漏洞

39. **insecure-deserialization**（错误）
    检测XML数据的不安全反序列化

### CORS

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

### WebSocket

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

### 点击劫持

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

### 时序攻击

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

### 原型污染

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

### React Props

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

### SSRF（服务端请求伪造）

46. **ssrf-risk**（错误）
    检测潜在的服务端请求伪造（SSRF）漏洞

### 访问控制

47. **missing-access-control**（错误）
    检测路由处理器中缺少访问控制检查

### API安全

48. **api-security-issues**（错误）
    检测API安全漏洞，包括CORS配置错误

### 会话管理

49. **session-management-issues**（警告/信息）
    检测会话管理安全问题

### 依赖安全

50. **dependency-security**（警告）
    检测依赖包的潜在安全问题

### 日志安全

51. **logging-security**（错误）
    检测日志中的敏感信息

### 安全头

52. **security-headers-missing**（警告）
    检测缺少重要的安全头

### 数据验证

53. **data-validation-issues**（警告）
    检测数据验证不足

### HTML 注入

54. **html-injection**（错误）
    检测 HTML 注入漏洞

### DOM Clobbering

55. **dom-clobbering**（错误）
    检测潜在的 DOM Clobbering 漏洞

### JSONP

56. **insecure-jsonp**（警告）
    检测不安全的 JSONP 使用

### PostMessage

57. **insecure-postmessage**（错误）
    检测不安全的 postMessage 使用

### LocalStorage 读取

58. **insecure-localstorage-read**（警告）
    检测从 localStorage 读取敏感数据

### URL 操作

59. **insecure-url-operations**（警告）
    检测不安全的 URL 操作

### 表单操作

60. **insecure-form-operations**（警告）
    检测不安全的表单操作

### Worker 使用

61. **insecure-worker-usage**（错误）
    检测不安全的 Web Worker 使用

### IndexedDB

62. **insecure-indexeddb**（警告）
    检测不安全的 IndexedDB 使用

### 剪贴板

63. **insecure-clipboard**（警告）
    检测不安全的剪贴板操作

### 授权

64. **missing-authorization-check**（错误）
    检测敏感操作中缺少授权检查

### API 安全

65. **insufficient-rate-limiting**（错误）
    检测缺少速率限制的API端点

66. **api-version-security**（错误）
    检测API版本安全问题

### 会话管理

67. **session-fixation**（错误）
    检测会话固定漏洞

### 身份验证

68. **weak-password-policy**（错误）
    检测弱密码策略和验证

69. **account-enumeration**（错误）
    检测账户枚举漏洞

70. **insecure-password-reset**（错误）
    检测不安全的密码重置实现

71. **missing-mfa**（错误）
    检测敏感操作缺少多因素认证

## 自定义规则

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

```javascript
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;
      }
    }
  ]
};
```

使用自定义规则：

```bash
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`配置示例：

```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` - 测试所有63个规则的组件
- `NewSecurityRulesTest.jsx` - 测试8个新增安全规则的组件（SSRF、访问控制、API安全、会话管理、依赖安全、日志安全、安全头、数据验证）
- `AdditionalSecurityTest.jsx` - 测试10个额外安全规则的组件（HTML注入、DOM Clobbering、JSONP、PostMessage、LocalStorage、URL操作、表单操作、Worker、IndexedDB、剪贴板）
- `customRules.js` - 自定义规则示例

扫描示例文件：

```bash
react-security-scanner scan ./examples
```

## 构建插件

我们为Vite和Webpack都提供了插件，以便在构建过程中自动进行安全扫描。

### Vite插件

在Vite构建过程中自动扫描React代码。

**安装：**
```bash
npm install vite-plugin-react-security --save-dev
```

**使用方法：**
```javascript
import { defineConfig } from 'vite';
import reactSecurityScannerPlugin from 'vite-plugin-react-security';

export default defineConfig({
  plugins: [
    reactSecurityScannerPlugin({
      severity: 'all',           // 'error' | 'warning' | 'info' | 'all'
      failOnError: false,         // 发现安全错误时是否失败构建
      reportFormat: 'console',    // 'console' | 'json' | 'html'
      reportPath: './security-report.json'  // 报告文件路径
    })
  ]
});
```

**插件选项：**
- `include` (string[], 默认: `['src/**/*.{js,jsx,ts,tsx}']`) - 包含的文件模式
- `exclude` (string[], 默认: `['node_modules/**', 'dist/**', 'build/**']`) - 排除的文件模式
- `severity` (string, 默认: `'all'`) - 按严重级别过滤: `error`, `warning`, `info`, 或 `all`
- `failOnError` (boolean, 默认: `true`) - 发现安全错误时是否失败构建
- `reportFormat` (string, 默认: `'console'`) - 报告格式: `console`, `json`, 或 `html`
- `reportPath` (string) - 保存报告文件的路径（json/html格式需要）

**文档：** [vite-plugin-react-security](https://www.npmjs.com/package/vite-plugin-react-security)

### Webpack插件

在Webpack构建过程中自动扫描React代码。

**安装：**
```bash
npm install webpack-plugin-react-security --save-dev
```

**使用方法：**
```javascript
const { ReactSecurityScannerWebpackPlugin } = require('webpack-plugin-react-security');

module.exports = {
  plugins: [
    new ReactSecurityScannerWebpackPlugin({
      severity: 'all',           // 'error' | 'warning' | 'info' | 'all'
      failOnError: false,         // 发现安全错误时是否失败构建
      reportFormat: 'console',    // 'console' | 'json' | 'html'
      reportPath: './security-report.json'  // 报告文件路径
    })
  ]
};
```

**插件选项：**
- `include` (string[], 默认: `['src/**/*.{js,jsx,ts,tsx}']`) - 包含的文件模式
- `exclude` (string[], 默认: `['node_modules/**', 'dist/**', 'build/**']`) - 排除的文件模式
- `severity` (string, 默认: `'all'`) - 按严重级别过滤: `error`, `warning`, `info`, 或 `all`
- `failOnError` (boolean, 默认: `true`) - 发现安全错误时是否失败构建
- `reportFormat` (string, 默认: `'console'`) - 报告格式: `console`, `json`, 或 `html`
- `reportPath` (string) - 保存报告文件的路径（json/html格式需要）

**文档：** [webpack-plugin-react-security](https://www.npmjs.com/package/webpack-plugin-react-security)

## 开发

```bash
# 安装依赖
npm install

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

# 构建
npm run build

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

## 贡献

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

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

### 添加新规则

要添加新的安全规则：

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

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

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

### 添加新报告格式

要添加新的报告格式：

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

## 更新日志

### [1.0.0] - 2026-01-27

#### 新增
- 初始发布
- 53个内置安全规则，涵盖28个类别
- 自定义规则支持
- 忽略模式支持（.securityignore）
- 多种报告格式（控制台、JSON、HTML）
- 严重级别过滤
- CLI工具
- TypeScript支持
- 完整文档
- Vite插件支持（vite-plugin-react-security）
- Webpack插件支持（webpack-plugin-react-security）
- 构建时安全扫描
- 插件的包含/排除模式选项
- 构建失败配置选项

## 许可证

MIT

## 支持

- 📧 邮箱：ereddate@gmail.com
- 🐛 问题：[GitHub Issues](https://github.com/ereddate/react-security-scanner/issues)
- 📖 文档：[完整文档](https://github.com/ereddate/react-security-scanner#readme)

## 致谢

- 使用[Babel](https://babeljs.io/)进行代码解析
- 灵感来自[ESLint](https://eslint.org/)和[SonarQube](https://www.sonarqube.org/)

---

[English Documentation](README.md) | [返回顶部](#react-security-scanner)