General issue: XSS vulnerabilities (CWE-79/CWE-116) not detected in React/Next.js .tsx components
- 主要言語
- CodeQL
- スター
- 10.1k
- フォーク
- 2.1k
- 平均マージ
- 2日 15時間
- マージ済み PR（30日）
- 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 workflow を使ってレポートを再現し、用意された 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