DEV Community

Cover image for NodeSecure CLI v2.0.0
Thomas.G
Thomas.G

Posted on

NodeSecure CLI v2.0.0

Hello πŸ‘‹,

I am writing this article with excitement and after several months of work. With the core team we are thrilled to announce that we are publishing a new version of the UI.πŸš€.

As you are reading these lines I am probably under the sun β˜€οΈ of Tel Aviv for the NodeTLV conference where I will give a talk about NodeSecure and some other tools.

NodeSecure

What an incredible journey 😍. Four years ago I was working on my tool alone πŸ˜₯... But now more than a dozen developers are contributing to the project and I can only thank all of you for your precious support πŸ™.

If you are new, then let me introduce you to the project

🐀 Getting started with NodeSecure

NodeSecure is an organization gathering a lot of individual projects that will allow you to improve the security and quality of your projects πŸ’ͺ. With our tools you can visually discover the dependencies you use on a daily basis and learn more about them πŸ“š.

Our most notable project is:

GitHub logo NodeSecure / cli

JavaScript security CLI that allow you to deeply analyze the dependency tree of a given package or local Node.js project.

🐒 Node-Secure CLI πŸš€

a Node.js CLI to deeply analyze the dependency tree of a given package / directory

npm version license github ci workflow codecov Responsible Disclosure Policy downloads

πŸ“’ About

Node.js security Command Line Interface. The goal of the project is to a design a CLI/API that will fetch and deeply analyze the dependency tree of a given npm package (Or a local project with a package.json) and output a .json file that will contains all metadata and flags about each packages. All this data will allow to quickly identify different issues across projects and packages (related to security and quality).

The CLI allow to load the JSON into a Webpage with the open command. The page will draw a Network of all dependencies with vis.js (example in the screenshot above). We also wrote a little Google drive document a while ago that summarizes some of these points:

πŸ“œ Features

  • Run an AST analysis…

How can you use it? It's easy, you just have to install globally the CLI with npm:

$ npm i @nodesecure/cli -g

# Analyze a remote package on the NPM Registry.
# Note: also work with a private registry like gitlab or verdaccio
$ nsecure auto fastify

# Analyze a local manifest (or local project).
# -> omit the package name to run it at the cwd.
$ cd /myproject
$ nsecure auto
Enter fullscreen mode Exit fullscreen mode

We have many other projects and many opportunities for you to contribute. Feel free to join us on Discord to discuss.

πŸ‘€ What's changed in v2.0.0 ?

A lot to be honest πŸ˜†. Our initial idea was simply to improve and complete the interface (We went a bit overboard I guess πŸ˜…).

One of the things that became problematic was the lack of space in the interface 😨. So we had to completely redesign the UX. I have to thank Medhi Bouchard, who spent dozens of hours designing UI on figma (Without him all this would have been much more difficult to achieve πŸ’ͺ).

Multiple views

This new interface offers several distinct views:

  • Home (global informations about the project you asked to analyze).
  • Network (where we are drawing the dependency tree).
  • Settings (which allows you to customize your experience with the tool)

Note: It is also possible to switch between each view with a keyboard shortcut (which corresponds to the capitalized character).

Home view

The home view is a replacement for the old Global stats button. We have been working to bring more attention to the information.

NodeSecure UI

To summarize the information we find in this view;

  • Global stats on the project (direct vs indirect, size, downloads)
  • Licenses and Extensions
  • Authors
  • Global warnings (not visible in the screenshot since there is none).
  • Links to Github and NPM.

NodeSecure UI

We plan to expand this view with even more information and really cool gadgets. We also want to bring more attention and information around the creators and maintainers.

πŸ”§ Settings view

This is the new kid in the town. There is not much to customize yet but that will come with time.

NodeSecure UI

One of the key ideas of NodeSecure is that each developer and maintainer can customize their experience with the tool.

Some of our warnings have a lot of false positives that is real, so you will be able to ignore them if you don't find them relevant.

Eventually the options will allow to make more clear-cut decisions like tagging a maintainer's library (which will be useful during incidents like the one with Faker.js or node-ipc).

🌎 Network view

We have slightly improved the network view and updated the colors for something more pleasant.

In version 1.4.0 of our Vis-network implementation, we have also implemented different theme for parent and child nodes (What you can see in the screenshot below).

NodeSecure UI

Note: We have not abandoned the "Dark" theme. Eventually it will be possible to switch from a light to a dark theme in the settings.

πŸš€ New left pannel

We wanted to keep the spirit of the old interface where we could retrieve information about a package very quickly. However we want to avoid as much as possible the need to scroll to get the information.

No more popup πŸ’ƒ. All information is now directly accessible in this new panel.

NodeSecure UI

This new design is divided into the following sub-panels:

  • Overview (Package informations, github stats, etc).
  • Files and size (with bundlephobia).
  • Scripts and Dependencies.
  • Threats and issues in JavaScript source.
  • Vulnerabilities.
  • Licenses conformance (SPDX).

There is also much more information than before. For example, I've been wanting to implement vulnerabilities in the interface for two years and it's now done:

NodeSecure vulnerabilities

Note: I remind you that we support multiple strategy for vulnerabilities like Sonatype or Snyk.

Scripts

This new version allows you to consult the scripts of a package. Really cool combined with the πŸ“¦ hasScript flag. Most supply chain attack uses a malicious script ... so it became important for us to be able to consult them in the UI.

NodeSecure scripts

Threats in source code

This version implements the latest release of JS-X-Ray which includes new features;

  • Detecting weak crypto algorithm (md5, sha1 ...).
  • Warnings now have a level of severity (like vulnerabilities).

NodeSecure UI

There is still a lot of work to be done on the interface, especially to better visualize the faulty code. You will notice that the links to access NPM and Unpkg are now always present in the header.

Licenses conformance

The information is still the same, but the design is a little more enjoyable. We have also added a small tooltip if you want to know more about SPDX.

NodeSecure SPDX

The title and file name are clickable. The first one will open the license page on the SPDX website and the second one the file itself on unpkg.

Others

We have slightly improved the short descriptions of the flags and they are now clickable (this will open the wiki directly to the relevant flag).

NodeSecure UI


Also in the scripts & dependencies section you will find a show/hide button on the third-party dependencies.

NodeSecure UI

Still the same behavior as in the old version, it will hide in the network all the children of the package.

New documentation/wiki

We have developed a brand new documentation-ui module that allows us to implement a wiki on any of our projects.

In this new version you can open the wiki by clicking on the button with the book icon on the right side of the screen. We now also have documentation on the warnings of our static analyzer JS-X-RAY accessible in the SAST Warnings pannel of the wiki.

NodeSecure wiki

πŸ‘― Credits

All this work is possible thanks to the different contributors and contributions they made those last few months.

Their simple presence, good mood and spirit were a source of inspiration and motivation for me. Thanks you very much ❀️

Conclusion

As always we move forward and evolve. We continue to work hard to improve security in the JavaScript ecosystem and we look forward to being joined by other developers with the same commitment.

Thanks for reading me and see you soon for another great story!

Discussion (0)