General issue: XSS vulnerabilities (CWE-79/CWE-116) not detected in React/Next.js .tsx components
- 主要語言
- CodeQL
- 星號
- 10.1k
- 分支
- 2.1k
- 平均合併
- 2 天 15 小時
- 30 天內合併 PR
- 141
描述
**Description**
I am testing the CodeQL accuracy by seeding different types of XSS vulnerabilities and running the advanced workflow with security-extended and security-and-quality queries. I noticed an issue with CodeQL flagging vulnerabilities in .tsx files. While the seeded code is detected as expected in route.ts, it is not in the component files. In both cases, at least CWE-79 should be noted.
**Setup**
- GitHub Advanced Security enabled on a public test repo
- Language: typescript
- Framework: Next.js
- CodeQL initialized with codeql/javascript-queries and security-extended,security-and-quality
**Workflow file**
```
name: "CodeQL Advanced"
on:
push:
branches: ["main", "security/*"]
pull_request:
branches: ["main", "dev"]
jobs:
analyze:
name: Analyze (${{ matrix.language }})
runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
permissions:
security-events: write
packages: read
actions: read
contents: read
strategy:
fail-fast: false
matrix:
include:
- language: actions
- language: javascript-typescript
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Initialize CodeQL
uses: github/codeql-action/init@v4
with:
languages: ${{ matrix.language }}
queries: security-extended,security-and-quality
packs: codeql/javascript-queries
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v4
with:
category: "/language:${{matrix.language}}"
```
**Reference**
https://github.com/aniakowalewska1/migration-playground/pull/39
**Expected CWEs that are not detected, but are present in documentation (https://codeql.github.com/codeql-query-help/javascript-cwe/)**
CWE-79
```tsx
export default function Seed({ msg }: { msg: string }) {
return (
Seed XSS page
);
}
```
CWE-20/CWE-116
```tsx
export async function getServerSideProps(context: GetServerSidePropsContext) {
const { query } = context;
const msg = query?.msg ?? "";
return { props: { msg } };
}
```
CWE-79
```tsx
export default function TestPage({ userInput }: TestPageProps) {
return ;
}
```
CWE-20/CWE-601
```tsx
export async function getServerSideProps(context: GetServerSidePropsContext) {
return { props: { userInput: context.query.content || "" } };
}
```
CWE-79
```tsx
```
CWE-116
```tsx
const userInput =
userContent || "Hello";
```
**Questions**
- Is there additional setup needed for scanning React?
- Why is CWE-79 and CWE-116 flagged is a .ts file and ignored in .tsx?
貢獻指南
研究方向
使用所示的 GitHub Actions 工作流程重現該報告，並將已準備好的 route.ts 偵測結果與 .tsx 元件範例進行比較。首先檢視 codeql/javascript-queries 以及 security-extended 和 security-and-quality 查詢選擇。完成的標準是說明 TypeScript 與 TSX 之間的偵測差異，並找出所需的查詢或分析變更，同時根據列出的 CWE-79 和 CWE-116 案例進行驗證。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- github-actions, next.js, react, typescript
- 領域
- security
- Issue 類型
- 缺陷
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 活躍度
- 停滯
- 描述清晰度
- 基本清楚
- 新手友好度
- 38/100