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.
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 📚.
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 NPM package or Node.js local app
📜 Features
Run a static scan on every JavaScript files and sort out warnings (unsafe-regex, unsafe-import etc) and the complete list of required expr and statements (files, node.js module, etc.).
Return complete composition for each packages (extensions, files, tarball size, etc).
Packages metadata from the npm registry API (number of releases, last publish date, maintainers etc).
Search for licenses files in the tarball and return the SPDX expression conformance of each detected licenses.
Link vulnerabilities from the multiple sources like GitHub Advisory, Sonatype or Snyk using Vulnera.
Add flags (emojis) to each packages versions to identify well known patterns and potential security threats easily.
First-class support of open source security initiatives like OpenSSF Scorecard.
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
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.
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.
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.
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).
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.
This new design is divided into the following sub-panels:
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:
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.
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).
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.
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).
Also in the scripts & dependencies section you will find a show/hide button on the third-party dependencies.
Still the same behavior as in the old version, it will hide in the network all the children of the package.
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.
👯 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!
