BLOG

Manual vs. automatic SPFx package analysis

4 min read
Farm solutions vs. SPFx_PostBanner

We are now into the fourth blog article in this SPFx blog series, so by now, you understand the advantages and challenges SPFx offers for modern development.

Other blog posts in this series:

If you want to better understand what has been built, what you are about to put into production, and what impact it could have in your Office 365 and SharePoint environment, you must analyze your SPFx packages.

Many people who understand this, manually analyze SPFx packages. The others use SPCAF software to automate code analysis, dependency discovery, and more.

Manual SPFx package analysis

It’s great to know people are aware of how critical it is to check their packages before deployment. However, manually analyzing SPFx can often result in efforts spent, leading to an unattainable outcome.

Here are some of the reasons why manual SPFx package analysis can fall short.

  • Time consuming
  • Complicated due to minified code
  • Accuracy level depends on individual experience
  • Hard to track all the latest vulnerabilities

Let me take you through a typical manual analysis scenario:

I receive, as an admin, a package I would like to put into production. I open a file with 7-zip, and I can see some XML files. I browse each file and see if there is something relevant.

Automatic SPFx package Analysis

A file that interests me has information about a web part. However, when I open it, it doesn’t have any code. The code is most likely stored elsewhere, the question is, where?

Automatic SPFx package analysis image 2

I open the contents of the XML file, and I see a lot of gibberish. It looks like a JSON escaped string, so I take all of the code, copy it to a code editor, get rid of the “ampersandquote”, and select JSON to read it.

I can see that it uses jQuery 2.1.1. library.  So, I want to know if there is a known issue with it as I will be pulling code from that library. I want to detect if it can be exploited.

Automatic SPFx package analysis

How can I check it

You could go to the CVE Details website and type jQuery in the search bar. There are many links to choose from, but it’s quite cumbersome to go through the pages of different versions to see if there is anything that specifically relates to your script.

You could also go to the snyk database, which gives you a more digestible overview of different issues for different versions. Still, you must go through all of them, evaluate the severity level, and take the action required.

It’s important to remember that this is just one check. You will need to do this approach for every library – for every piece of code you embed.

Furthermore, you also need to evaluate the location of the site hosting the code. Is it a CDN, does it have an SLA, or does the site have periods of downtime? Who has permission to change the contents of it? That would also require additional research.

You need to know that the scripts you are pulling in before the page appears are loading as quickly as possible. I strongly recommend watching my recent webinar: Why you should analyze your SharePoint Framework code, on-demand for a full detailed step-by-step walkthrough of this whole process.

Automatic SPFx package analysis

Using Rencore’s SPCAF software, as either a developer or an admin, you can take the SPFx package and run it through the client application, or use it integrated with Visual Studio or VS Code while developing.

SPCAF will automatically analyze and understand the quality and performance of all your SPFx code. You will receive a full-quality assurance report of your WSPs, apps, and scripts. The reports will contain details of code quality and suggest best practices to correct it when needed.

Automatic SPFx package analysis in text image-spfx-analysis

Furthermore, SPCAF allows you to visualize the dependencies of the code artifacts within applications between SharePoint, Office 365, external components, and services so you can plan code refactoring or transformation to the add-in model.

Automatic SPFx package analysis in text image 5

What’s more, you can also automatically generate an always up-to-date technical documentation of your deployed packages, and resources including all metadata to help you troubleshoot issues on your farm or your Office 365 tenant.

Finally, you can compare the analysis results of multiple development iterations to discover changes in the code quality, dependencies, inventory, and metrics, helping you react quickly.

Head over to the SPCAF product page to view a short 1-minute walk through and learn more about how SPCAF can automate your SPFx code analysis.

Learn more

Waldek Mastykarz

Waldek is a Microsoft Office Development MVP and Head of Product at Rencore. He reinforces our product development adding loads of business experience from working as a SharePoint consultant for more than 10 years. Waldek is passionate about what he does and shares his enthusiasm through his blog and as a regular speaker at conferences and community events all over Europe. Recently, Waldek joined the SharePoint Patterns and Practices (PnP) Core Team to help developers make better use of the SharePoint and Office 365 platforms.