General issue: XSS vulnerabilities (CWE-79/CWE-116) not detected in React/Next.js .tsx components
- Lenguaje dominante
- CodeQL
- Estrellas
- 10.1k
- Forks
- 2.1k
- Merge medio
- 2 d 15 h
- PR fusionados (30 d)
- 141
Descripción
**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?
Guía de contribución
Línea de trabajo
Reproduce the report with the shown GitHub Actions workflow, comparing the seeded route.ts findings with the .tsx component examples. Start by reviewing codeql/javascript-queries and the security-extended and security-and-quality query selections. Done means explaining the TypeScript/TSX detection difference and identifying the required query or analysis change, with verification against the listed CWE-79 and CWE-116 cases.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- github-actions, next.js, react, typescript
- Área
- security
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 38/100