> For the complete documentation index, see [llms.txt](https://developer.harness.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.harness.io/sast-and-sca/prezero/static-analysis-sast/analyzing-applications/javascript.md).

# JavaScript/TypeScript

This article shows you how to analyze your applications written in JavaScript or TypeScript (including those that use the Angular, React.js, and Vue.js frameworks) using Qwiet AI by Harness. It assumes that you have already [set up and authenticated](broken://spaces/uPVBkglG6gsk2SsnsKgG/pages/fDfomI4jhzwCNFxmGSLc) with Qwiet.

![](/files/mlZo7QhbBaWAQlpvEVi9)note

Qwiet offers sample applications that you can use to run and test Qwiet AI by Harness. They also include functioning configuration files to demonstrate how you can leverage GitHub Actions to automate code analysis whenever you open a new Pull Request (PR).

* [Angular](https://github.com/ShiftLeftSecurity/sl-angular)
* [JavaScript](https://github.com/ShiftLeftSecurity/shiftleft-js-example)
* [React](https://github.com/ShiftLeftSecurity/sl-react)
* [Vue.js](https://github.com/ShiftLeftSecurity/shiftleft-vue-demo)
* [TypeScript](https://github.com/ShiftLeftSecurity/shiftleft-ts-example)

## Requirements <a href="#requirements" id="requirements"></a>

See [Prerequisites](broken://spaces/uPVBkglG6gsk2SsnsKgG/pages/0c1ezDgaUil5NxR4VnY3#language-support-and-requirements) for more information.

## Analyzing your JavaScript application <a href="#analyzing-your-javascript-application" id="analyzing-your-javascript-application"></a>

{% tabs %}
{% tab title="JavaScript (Source) - Preferred" %}
To analyze your JavaScript application without the need to build it, run:

```
sl analyze --app <name> --jssrc [<path>]
```

![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)

| Parameter      | Description                                                                 |
| -------------- | --------------------------------------------------------------------------- |
| `--app <name>` | The name of the application to be analyzed (maximum length: 100 characters) |
| `--jssrc`      | The flag identifying the application's language                             |
| `<path>`       | The path to the application directory                                       |

See the [CLI reference](broken://spaces/4t03gua31tHpZwtcczPO/pages/bfq0NtVB7O7f6pFvFzK3) for additional `sl analyze` options.

## Additional parameters <a href="#additional-parameters" id="additional-parameters"></a>

The analysis accepts additional parameters after a double hyphen `--`.

For example, the following excludes any folder with `tests` in its path:

```
sl analyze --jssrc /path/to/my/javascript-project -- --exclude-regex 'tests'
```

![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)

Such parameters, if valid, are passed directly to the JavaScript plugin.

| Parameter                           | Description                                                                                                                                         |
| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--exclude <path-1>, <path-2>, ...` | Exclude the specified directories during code analysis; the path provided can be a full path or a relative path to the JavaScript project directory |
| `--exclude-regex <value>`           | a regex specifying files to exclude during CPG generation (paths relative to `<input-dir>` are matched)                                             |
| `--enable-early-schema-checking`    | enables early schema validation during AST creation (disabled by default)                                                                           |

### SCA <a href="#sca" id="sca"></a>

To [identify open-source vulnerabilities](/sast-and-sca/prezero/oss-vulnerabilities.md), Qwiet AI by Harness automatically searches for build manifests in the project path you provided when running `sl analyze`. However, depending on how your project repo is structured, you may need to provide `--oss-project-dir <project-path>` so that Qwiet AI by Harness can identify where your dependencies are located.

## Tagging results with your branch name <a href="#tagging-results-with-your-branch-name" id="tagging-results-with-your-branch-name"></a>

To include the branch name in your Qwiet AI by Harness results, allowing you to distinguish one set of results from another, add the following to your invocation of Qwiet:

```
sl analyze --tag branch=$(git symbolic-ref --short HEAD)
```

![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)

If you're working in a GitHub environment (e.g., [GitHub Actions](https://github.com/features/actions)), you can also use `--tag branch=${{ github.head_ref }}` to populate your branch name.

If you don't provide a branch name, but Qwiet detects one available in your environment, it will use that name.
{% endtab %}

{% tab title="JavaScript" %}
To analyze your JavaScript application, run:

```
# Ensure node_modules does not exist
sl analyze --app <name> --js [<path>]
```

![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)

| Parameter      | Description                                                                 |
| -------------- | --------------------------------------------------------------------------- |
| `--app <name>` | The name of the application to be analyzed (maximum length: 100 characters) |
| `--js`         | The flag identifying the application's language                             |
| `<path>`       | The path to the application directory                                       |

See the [CLI reference](broken://spaces/4t03gua31tHpZwtcczPO/pages/bfq0NtVB7O7f6pFvFzK3) for additional `sl analyze` options.

### SCA <a href="#sca-1" id="sca-1"></a>

To [identify open-source vulnerabilities](/sast-and-sca/prezero/oss-vulnerabilities.md), Qwiet AI by Harness automatically searches for build manifests in the project path you provided when running `sl analyze`. However, depending on how your project repo is structured, you may need to provide `--oss-project-dir <project-path>` so that Qwiet AI by Harness can identify where your dependencies are located.

## Additional parameters <a href="#additional-parameters-1" id="additional-parameters-1"></a>

The analysis accepts additional parameters after a double hyphen `--`.

For example, the following ignores minified JavaScript sources in the analysis and uses a custom `package.json` in the `config` sub-directory:

```
sl analyze --app Xyz --js /path/to/my/typescript-project -- --ignore-minified --package-json /path/to/my/typescript-project/config/package.json
```

![](/files/CRrxFX9wuboXxDrdB2dv)

![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)

Such parameters, if valid, are passed directly to the JavaScript plugin.

| Parameter                               | Description                                                                                                                                                                                                                                                                                                          |
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--package-json <path>`                 | The custom path to **package.json** (by default, Qwiet AI by Harness looks for the file in the JavaScript project directory)                                                                                                                                                                                         |
| `--output <value>`                      | The CPG output file name (defaults to `cpg.bin.zip` if none provided)                                                                                                                                                                                                                                                |
| `--no-ts`                               | Exclude TypeScript sources from the analysis (by default, Qwiet AI by Harness includes Typescript sources)                                                                                                                                                                                                           |
| `--no-babel`                            | Exclude Babel sources in the analysis (by default, Qwiet AI by Harness includes Babel sources)                                                                                                                                                                                                                       |
| `--no-vue-js`                           | Exclude Vue.js sources in the analysis (by default, Qwiet AI by Harness includes Vue.js sources)                                                                                                                                                                                                                     |
| `--no-nuxt-js`                          | Exclude Nuxt.js sources in the analysis (by default, Qwiet AI by Harness includes Nuxt.js sources)                                                                                                                                                                                                                   |
| `--no-templates`                        | Exclude EJS and Pug template sources in the analysis (by default, Qwiet AI by Harness includes EJS and Pug template sources)                                                                                                                                                                                         |
| `--include-minified`                    | Include minified Javascript sources (e.g., filenames ending with `-min.js` or `.min.js`) in the analysis (by default, Qwiet AI by Harness excludes all such sources)                                                                                                                                                 |
| `--include-tests`                       | Include test files (typically required for sample vulnerable apps, such as OWASP Juice Shop)                                                                                                                                                                                                                         |
| `--exclude <path>`                      | Exclude the specified file/directory during code analysis; the path provided must either be an absolute path or a relative path to the project directory; can be specified multiple times                                                                                                                            |
| `--exclude-html`                        | Exclude HTML files from the analysis                                                                                                                                                                                                                                                                                 |
| `--exclude-regex <value>`               | A regex specifying the files to exclude during the analysis (the match is to the absolute file path), e.g., `--exclude-regex ".*([-.])min\\.js"` or \`--exclude-regex ".\*.(spec                                                                                                                                     |
| `--exclude-private-deps`                | Exclude private modules/dependencies in `node_modules` (defaults to `false`)                                                                                                                                                                                                                                         |
| `--all-dependencies`                    | Install all project dependencies during transpilation. May result in slow execution times depending on your project setup and network speed. Defaults to `false`. If this option is not used, only a minimal set of dependencies relevant for transpilation is installed (and may result in faster execution times). |
| `--private-deps-ns <dep1>, <dep2>, ...` | Additional private dependencies you would like to be analyzed from `node_modules`                                                                                                                                                                                                                                    |

## Tagging results with your branch name <a href="#tagging-results-with-your-branch-name-1" id="tagging-results-with-your-branch-name-1"></a>

To include the branch name in your Qwiet AI by Harness results, allowing you to distinguish one set of results from another, add the following to your invocation of Qwiet:

```
sl analyze --tag branch=`git symbolic-ref --short HEAD`
```

![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)

If you're working in a GitHub environment (e.g., [GitHub Actions](https://github.com/features/actions)), you can also use `--tag branch=${{ github.head_ref }}` to populate your branch name.

If you don't provide a branch name, but Qwiet detects one available in your environment, it will use that name.

## Scanning Node.js applications <a href="#scanning-nodejs-applications" id="scanning-nodejs-applications"></a>

If your Node.js application either:

1. Uses v8.x.x or
2. Doesn't include `package-lock.json` or `yarn.lock` in the repository

Then there are a couple of additional steps you must take when analyzing your application to ensure that the SCA results you obtain are accurate.

1. Run `npm install` and remove `node_modules`:

   ```prism-code
   npm install
   rm -rf node_modules
   ```

   ![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)
2. If present, you should also remove any directory that's produced by the build that should *not* be included in the analysis (e.g., `build` or `dist` directories):

   ```prism-code
   rm -rf frontend/dist frontend/node_modules dist build
   ```

   ![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)

## Scanning Vue.js applications <a href="#scanning-vuejs-applications" id="scanning-vuejs-applications"></a>

When analyzing a Vue.js application, you **must** include a `vue.config.js` file in the root of your repository, otherwise Qwiet AI by Harness will return no results:

```
module.exports = {
    configureWebpack: (config) => {
        config.devtool = 'source-map'
    },
};
```

![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)

You can see how this file is used in the [sample Vue.js repo](https://github.com/ShiftLeftSecurity/shiftleft-vue-demo/blob/main/vue.config.js) we offer.

## Troubleshooting <a href="#troubleshooting" id="troubleshooting"></a>

If you have any issues scanning your project, please see our [general troubleshooting page](/sast-and-sca/prezero/tutorials/troubleshooting.md), as well as our JavaScript-specific suggestions that follow.

### Excluding files / directories <a href="#excluding-files--directories" id="excluding-files--directories"></a>

While Qwiet ignores certain directories, such as **test** and **node\_modules**, by default, you can [exclude additional folders](#additional-parameters) (e.g., minified files).

### Authentication issues <a href="#authentication-issues" id="authentication-issues"></a>

* If you're using a private npm registry, please make sure that you create and include a .npmrc file with your credentials before invoking `sl analyze`.
* If you're using private modules, please ensure that your app is configured properly so that yarn/npm doesn't attempt to install them from the public registry (this will cause the code analysis to fail). The following is an example of how an app is attempting to get a private module from the public yarn registry, causing an HTTP 404 error:

  ```prism-code
  error An unexpected error occurred: "https://registry.yarnpkg.com/yourModule/-/recess-5.11.0.tgz: Request failed \"404 Not Found\"".
  info If you think this is a bug, please open a bug report with the information provided in "yarn-error.log".
  info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
  ```

  ![](/files/CRrxFX9wuboXxDrdB2dv) ![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)
* To fix authentication errors:
  1. Create a user in your npm server for Qwiet; this user should either have a password or an authentication token
  2. Store this user's credentials in a .npmrc file before invoking Qwiet.

     Here is a sample of what you might include in your .npmrc file:

     ```prism-code
     - name: NextGen Static Analysis
         run: |
         yarn config set cache-folder ~/.cache/yarn
         yarn config set registry YOUR_REGISTRY_URL
         yarn config set @yourName:registry YOUR_REGISTRY_URL
         echo "//YOUR_REGISTRY_URL:_password=${{ secrets.PASSWORD }}" >> ~/.npmrc
         echo "//YOUR_REGISTRY_URL:username=shiftleft" >> ~/.npmrc
         echo "//YOUR_REGISTRY_URL:always-auth=true" >> ~/.npmrc
         echo "//YOUR_REGISTRY_URL:email=YOUR_EMAIL_ADDRESS" >> ~/.npmrc
     ```

     ![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)

### Build failures <a href="#build-failures" id="build-failures"></a>

If you see build failures, ensure that npm or yarn install works correctly before invoking `sl analyze`. Fix any errors that result; for example, if you see the following:

```
The engine "node" is incompatible with this module. Expected version "^12.14". Got "14.15.1"
```

![](/files/CRrxFX9wuboXxDrdB2dv)

![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)

The application requires Node.js v12, so add a build step similar to the following:

```
- uses: actions/setup-node@v2
  with:
    node-version: '12'
```

![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)

### Errors with the TypeScript compiler <a href="#errors-with-the-typescript-compiler" id="errors-with-the-typescript-compiler"></a>

When working with TypeScript projects (including those using Angular), you may encounter TypeScript compiler (tsc) errors. This tool is used to transpile TypeScript projects to JavaScript. Depending on how you invoke this tool, you may see syntax or style errors similar to the following:

```
node_modules/@types/react-router/node_modules/@types/react/index.d.ts(3033,13): error TS2717: Subsequent property declarations must have the same type.  Property 'form' must be of type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>', but here has type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'.
node_modules/@types/react-router/node_modules/@types/react/index.d.ts(3034,13): error TS2717: Subsequent property declarations must have the same type.  Property 'h1' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
```

![](/files/CRrxFX9wuboXxDrdB2dv)

![](/files/DfHDmRpYn5HJOmhRtTva) ![](/files/P5vj8JOtHNJWVEvAqKym)

You can ignore such errors; tsc can throw errors even for mundane coding issues, none of which would affect a security analysis tool. There may be many such messages in the verbose logs, but you can ignore these as they are merely debugging indicators.

### Incorrect VCS link for TypeScript projects <a href="#incorrect-vcs-link-for-typescript-projects" id="incorrect-vcs-link-for-typescript-projects"></a>

If your [VCS link](/sast-and-sca/prezero/ui/application-details/settings.md) ends incorrectly (that is, it uses `.js` instead of `.ts` or `.tsx`), you might see an HTTP 404 error. This typically happens if Qwiet was unable to generate sourcemaps correctly.

If this happens, please submit to Qwiet:

* The full verbose log
* Your CI configuration

### No findings found <a href="#no-findings-found" id="no-findings-found"></a>

If you run a scan that results in no findings, collect the verbose logs and contact Qwiet for additional assistance.

### Parsing errors in strict mode <a href="#parsing-errors-in-strict-mode" id="parsing-errors-in-strict-mode"></a>

You may see parsing errors due to:

* Use of strict mode
* Unsupported syntaxes, such as spread objects or dynamic imports

### yarn parsing errors with TypeScript projects <a href="#yarn-parsing-errors-with-typescript-projects" id="yarn-parsing-errors-with-typescript-projects"></a>

You should run `sl analyze` from the root directory that contains the `yarn.lock` file. If you perform the analysis from a different directory, Qwiet AI by Harness defaults to npm, which may not work correctly for yarn projects (this is a limitation we will address).
{% endtab %}
{% endtabs %}
