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:
- Farm solutions vs. SharePoint Framework (SPFx)
- SharePoint Framework challenges – part 1
- SharePoint Framework challenges – part 2
- Manual vs Automatic SPFx package analysis (this post)
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.
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?
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.
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.
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.
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.
