Skip to main content

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 preZero. It assumes that you have already set up and authenticated with Qwiet.

note

Qwiet offers sample applications that you can use to run and test preZero. 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).

Requirements​

See Prerequisites for more information.

Analyzing your JavaScript application​

To analyze your JavaScript application, run:

# Ensure node_modules does not exist
sl analyze --app <name> --js [<path>]
ParameterDescription
--app <name>The name of the application to be analyzed (maximum length: 100 characters)
--jsThe flag identifying the application's language
<path>The path to the application directory

See the CLI reference for additional sl analyze options.

SCA​

To identify open-source vulnerabilities, Qwiet preZero 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 preZero can identify where your dependencies are located.

Additional parameters​

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

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

ParameterDescription
--package-json <path>The custom path to package.json (by default, preZero 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-tsExclude TypeScript sources from the analysis (by default, preZero includes Typescript sources)
--no-babelExclude Babel sources in the analysis (by default, preZero includes Babel sources)
--no-vue-jsExclude Vue.js sources in the analysis (by default, preZero includes Vue.js sources)
--no-nuxt-jsExclude Nuxt.js sources in the analysis (by default, preZero includes Nuxt.js sources)
--no-templatesExclude EJS and Pug template sources in the analysis (by default, preZero includes EJS and Pug template sources)
--include-minifiedInclude minified Javascript sources (e.g., filenames ending with -min.js or .min.js) in the analysis (by default, preZero excludes all such sources)
--include-testsInclude 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-htmlExclude 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-depsExclude private modules/dependencies in node_modules (defaults to false)
--all-dependenciesInstall 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​

To include the branch name in your preZero 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`

If you're working in a GitHub environment (e.g., GitHub 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​

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:

    npm install
    rm -rf node_modules

  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):

    rm -rf frontend/dist frontend/node_modules dist build

Scanning Vue.js applications​

When analyzing a Vue.js application, you must include a vue.config.js file in the root of your repository, otherwise preZero will return no results:

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

You can see how this file is used in the sample Vue.js repo we offer.

Troubleshooting​

If you have any issues scanning your project, please see our general troubleshooting page, as well as our JavaScript-specific suggestions that follow.

Excluding files / directories​

While Qwiet ignores certain directories, such as test and node_modules, by default, you can exclude additional folders (e.g., minified files).

Authentication issues​

  • 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:

    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.

  • 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:

      - 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

Build failures​

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"

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

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

Errors with the TypeScript compiler​

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>'.

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.

If your VCS link 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​

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​

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​

You should run sl analyze from the root directory that contains the yarn.lock file. If you perform the analysis from a different directory, preZero defaults to npm, which may not work correctly for yarn projects (this is a limitation we will address).