CodeQL Syntax Errors for javascript-typescript

[cardoppler]

Hello,

We’re currently encountering issues with CodeQL / Analyze (javascript-typescript) (dynamic), which fails to run due to syntax errors reported in the analysis output. A file is flagged as unprocessable due to presumed parsing errors. Here’s the code and associated extract of the error messages:

Code:

import React, { useState } from 'react';
import { exec } from 'child_process';

const BadPractices = () => {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');

  // Example of using eval (bad practice)
  const handleEval = () => {
    try {
      const result = eval(input); // BAD: Using eval
      setOutput(result);
    } catch (error: any) {
      setOutput('Error: ' + error.message);
    }
  };

  // Example of using exec (bad practice)
  const handleExec = () => {
    exec(input, (error, stdout, stderr) => {
      if (error) {
        setOutput('Error: ' + error.message);
        return;
      }
      if (stderr) {
        setOutput('Stderr: ' + stderr);
        return;
      }
      setOutput('Output: ' + stdout);
    });
  };

  // Example of insecure direct object reference (IDOR)
  const handleInsecureIDOR = () => {
    const userId = input; // BAD: Directly using user input
    fetch(`/api/user/${userId}`)
      .then((response) => response.json())
      .then((data) => setOutput(JSON.stringify(data)))
      .catch((error) => setOutput('Error: ' + error.message));
  };

  return (
    <div>
      <h1>Bad Practices Example</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Enter input"
      />
      <button onClick={handleEval}>Run Eval</button>
      <button onClick={handleExec}>Run Exec</button>
      <button onClick={handleInsecureIDOR}>Fetch User Data</button>
      <div>
        <h2>Output</h2>
        <pre>{output}</pre>
      </div>
    </div>
  );
};

export default BadPractices;

Logs:

...
Analysis produced the following diagnostic information:
Could not process some files due to syntax errors (23 results)
    * app/features/base/components/BadPractices.ts#L44C15:15: A parse error occurred: `')' expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L44C33:33: A parse error occurred: `Unterminated regular expression literal.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L48C19:19: A parse error occurred: `Property assignment expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L48C23:23: A parse error occurred: `';' expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L48C50:50: A parse error occurred: `Declaration or statement expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L50C8:8: A parse error occurred: `Expression expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L51C15:15: A parse error occurred: `'>' expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L51C22:22: A parse error occurred: `';' expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L51C35:35: A parse error occurred: `Expression expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L51C40:40: A parse error occurred: `';' expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L51C45:45: A parse error occurred: `Unterminated regular expression literal.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L52C15:15: A parse error occurred: `';' expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L52C40:40: A parse error occurred: `';' expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L52C45:45: A parse error occurred: `Unterminated regular expression literal.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L53C15:15: A parse error occurred: `';' expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L53C50:50: A parse error occurred: `';' expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L53C60:60: A parse error occurred: `Unterminated regular expression literal.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L55C20:20: A parse error occurred: `Unterminated regular expression literal.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L56C23:23: A parse error occurred: `Unterminated regular expression literal.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L57C8:8: A parse error occurred: `Unterminated regular expression literal.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L58C6:6: A parse error occurred: `Unterminated regular expression literal.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L59C3:3: A parse error occurred: `Declaration or statement expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
    * app/features/base/components/BadPractices.ts#L60C1:1: A parse error occurred: `Declaration or statement expected.`. Check the syntax of the file. If the file is invalid, correct the error or [exclude](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/customizing-code-scanning) the file from analysis.
...

---

Environment:

• "productName" : "CodeQL", "vendor" : "GitHub", "version" : "2.19.1",
• CODEQL_ACTION_VERSION: 3.26.13
• /language:javascript-typescript

---

Context:

This code was intentionally generated (with ChatGPT) to showcase insecure coding practices for a security demonstration. Our objective was to verify if CodeQL would detect these issues. However, CodeQL was unable to parse the file, so no analysis was completed.

Assistance Needed:

• Does the parsing issue lies within CodeQL or are these genuine javascript-typescript syntax errors?
• Is there a repo configuration option to ensure that a push/PR to a branch is blocked if CodeQL encounters errors like these?
• Are there any recommended steps or adjustments we should take to resolve this issue and successfully complete the scan?

Thanks in advance.
Best regards,

[jketema]

Hi,

The return near the bottom does not seem to be valid typescript. Please make sure your code is valid before submitting any questions.

[cardoppler]

Hi @jketema,

I’m not very familiar with frontend development, but from what I understand, the file syntax should be aligned with React rather than plain JavaScript or TypeScript. Could you recommend a good resource for performing syntax checks?

Anyway, I changed the file extension from .js to .tsx (same body) and triggered a scan. This time, CodeQL ran without errors, but it didn’t detect any security vulnerabilities, which is concerning. I’ve attached screenshots for reference. Is there something I might have misconfigured?

Thanks in advance for your help!

[asgerf]

The test case uses e.target.value as the source of untrusted user input, which would be a form of self-xss which usually isn't flagged by any query. If you replace it with something like window.location.search.substring(1) it should be flagged by the CodeInjection query.

[cardoppler]

Hi,

I’ve created a new file BP2.js specifically to test the potentially unsafe usage of eval and exec functions. CodeQL ran the CodeInjection checks, but no alerts were raised. Is this the expected outcome? If so, could you explain why? Does CodeQL assume that these functions won’t be called with unsafe parameters from external code? How does it make this determination?

Thanks very much for your help in advance!

[asgerf]

As a rule of thumb, we try hard to only flag real issues. There are valid reasons to create wrapper functions around exec and eval, so it isn't something we generally flag on its own.

However, we do consider library inputs as untrusted in some contexts, but it is involves some heuristics to determine if it expected behaviour or not. For example, getFiles below is flagged by the query js/shell-command-constructed-from-input:

// BP2.js
const { exec } = require("child_process");

function runEvalExample(code) {
    eval(code);
}

function runExecExample(command) {
    exec(command); // No alert. Creating a wrapper around 'exec' is not an alert.
}

function getFiles(folder) {
    exec("ls " + folder); // Alert. Using 'exec' with the 'folder' parameter in an unsafe way.
}

module.exports = { runEvalExample, runExecExample, getFiles };


// package.json
{
    "name": "blahblah",
    "main": "BP2.js"
}

Note that library inputs are only considered if there is an associated package.json file.

[cardoppler]

Thanks for the explanation!