React Native - How to create a correct Dependency Check / Vulnerability Report and handle it? - react-native

How to correctly create a dependency check (vulnerability report) for a react native app?
If I run "npm install" then automatically an information for "npm audit" is shown. For the following examples I've used a new created project with React Native CLI using RN 0.63.2
"npm audit" shows only 3 low vulnerabilities (node-fetch):
npm audit excerpt of output
Retire.js don't give any vulnerability (may be misconfigured, still trying to figure it out).
However, using DependencyCheck by jeremylong (https://github.com/jeremylong/DependencyCheck) it gives 132 vulnerabilities from 72 vulnerable dependencies. Excerpt:
Scan Information (show all):
dependency-check version: 6.0.1
Report Generated On: Sun, 20 Sep 2020 22:25:28 +0200
Dependencies Scanned: 15319 (11276 unique)
Vulnerable Dependencies: 72
Vulnerabilities Found: 132
Vulnerabilities Suppressed: 0
...
It looks like DependencyCheck sums up multiple analyzer reports and because of that probably finds more then the previous tools but I'm still wondering about the amount (132 vulnerabilities vs. only 3). Does "npm audit" may better be able to check if those vulnerabilities are even valid for RN? Or would I have to check all those 132 vulnerabilities manually if they apply to my React Native application and fix them (if possible)?
And with that there I've already have another question: some vulnerable dependencies come from react-native-cli. I can't find it anywhere but this should not be included in a production app since it is the commandline interpreter tools used during development, isn't it? Is there any documentation (I couldn't find any) that gives hints about which dependencies are only for dev and would not be in production?
Any help would be appreciated.

So anwering my own question here:
The tool DependencyCheck by jeremylong collected all vulnerabilities where the library names matched a string contained in the vulnerability. E.g. "#hapi/address:2.1.4" were listed by the tool but it was not in the dependency graph printed by NPM. But there was "hapijs". This occured many time and the only relevant findings were those already identified by npm with "npm audit".
So all others were simple "false-positives" but they had to be checked unfortunately one after another.

The following steps can be followed to generate a report describing all the vulnerabilities found in the project:
Download the OWASP Dependency-Check CLI tool from their official website (https://owasp.org/www-project-dependency-check/)
Extract the downloaded zip file.
Open the command prompt/terminal and navigate to the directory where the .bat and .sh files are located.
For windows, run the following command after replacing the correct directories of your project:
dependency-check.bat --project "<project_name>" --scan <folder containing 3rd party libraries> --out <folder to generate reports> --suppression <xml file containing suppressions>
For linux, run the following command after replacing the correct directories of your project:
dependency-check.sh --project "<project_name>" --scan <folder containing 3rd party libraries> --out <folder to generate reports> --suppression <xml file containing suppressions>
Sample command:
dependency-check.bat --project demo-project --scan E:/GitlabRepo/react/test-project --out E:/GitlabRepo/react/test-project/vulnerability-report
A report will be generated indicating all the relevant details of each vulnerability found in the project.

Related

Can't start Framework Qwik project

I have an issue while creating and starting project. I followed the instructions given here https://qwik.builder.io/docs/getting-started/ and used npm, selected Basic App (QwikCity), but when I start the project I'm given the next error:
Error
Terminal output:
[vite] Internal server error: Failed to load url /src/root_component_vgnegdacmce.js (resolved id: C:/Users/JESUS LOPEZ/Documents/Universidad/Pasantías/qwik-app/src/root_component_vgnegdacmce.js). Does the filnt_vgnegdacmce.js). Does the file exist?
File: /C:/Users/JESUS%20LOPEZ/Documents/Universidad/Pasant%C3%ADas/qwik-app/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39304:21
at loadAndTransform (file:///C:/Users/JESUS%20LOPEZ/Documents/Universidad/Pasant%C3%ADas/qwik-app/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39304:21)
I'm using Windows 10 and node 18.12.0, I tried with yarn and happened the same. I'm just testing this framework because I was required to create a component library, so I wanted to test the waters with a basic app project and then move on with the component library but even if I select this option, I have a similar error.
This is my repo: https://github.com/luisamlopez/qwik-app but it's literally just a brand new qwik project (npm create qwik#latest) so I haven't touch anything.
Your code works fine without any problems. Maybe some node modules or other dependencies would have not been installed properly because of firewall or network issues.
Clean the node_modules manually delete the folder or by the following command
rm -r node_modules/
npm prune
Note: prune command is optional.
Install the package dependencies by
npm i
Make sure the installation happens successfully without any issues or try to install with a different network or turn off the firewall for a while. Or worst case try with different machines.

Lerna concurrency errors in Docker container

I have a typescript monorepo managed with Lerna.
The tests are done with Jest.
There are tens of packages that have the test script defined, while the jest config is stored in a central location and used by all.
An example test script looks like this:
jest --config ../../../tests/jest.config.json --setupFiles ../../../tests/jest-setup.js --rootDir .
Each package has a different number of "../" depending on its location in the source folder tree.
It works 100% of the time on multiple platforms like Windows, Linux and Mac.
For some reason when we run it inside a docker container, if the concurrency isn't set to 1 we see jest process from one package getting actually the paramters of another one which cause it to fail:
#cmd/example-package: > #cmd/example-package#0.0.0 test:integration
#cmd/example-package: > jest --config ../../tests/jest.config.json --setupFiles ../../tests/jest-setup.js --setupFilesAfterEnv ../../tests/setEnvVars.js --rootDir . --testPathPattern=./integration-tests --runInBand
#cmd/example-package: jest parameters: /src/cmd/example-package , --config,../../../tests/jest.config.json,--setupFiles,../../../tests/jest-setup.js,--setupFilesAfterEnv,../../../tests/setEnvVars.js,--rootDir,.,--testPathPattern=./integration-tests,--runInBand
The last line is printed from code added at the begining of the jest script which prints the current folder and the parameters passed. You can see that the parameters lerna reports passing to jest aren't the one which were actually used.
We saw such errors in the build process as well.
Any idea on how to solve it will be highly appriciated.
Tried multiple nodejs base images (alpine, node, Bullseye), multiple node versions and multiple lerna versions.
Even tried to switch from Lerna to Turborepo but still getting these concurrency errors
In our case, the problem was related to the installation of a different version of the npm on top of the alpine node docker image in one of the container's base images.
Leaving the question here, in case it helps someone.

How do I keep azure devops from treating infos and warnings as errors?

I am working on an azure devops pipeline created without YAML. In the pipeline node.js and npm is used to build some web interfaces. mkdocs is used to build web documentation.
My problem is that azure devops treats some infos and warnings as errors:
While the build does not fail it is marked as only partially successful. I prefer to have a clean build.
How do I keep azure devops from treating infos and warnings as errors? Or is it some setting I have to configure on the side of mkdocs and npm?
1.For the Info which is treated as error, you can uncheck the Fail on Standand Error option and then add 2>&1 | Write-Host to your mkdocs command, see PS About Redirection
. You should run the command via Powershell task.
2.And for the error about fsevents, it seems to be one issue starting from npm V.3.10.8. Use Node.js Tool Installer task to install the latest NPM version and run the pipeline again. If the issue persists, you can try joefiorini's workaround:
Add this script to your package.json file.
"optionalDependencies": {
"fsevents": "*"
},
It seems that the company firewall prevented npm from making ssl connections because of missing certificates or something. I added
npm set strict-ssl false
to the build pipeline which -ironically- makes the connection less secure, but it makes all errors go away which I prefer to suppressing the errors/warnings/info.
I don't know if Don't Fail on Standard Error would even do anything since the build did not fail, it was partially successful. I prefer to have it checked in case a real error occurs.
After looking at it some more I am not exactly sure the highlighting and specification of errors is correct in the pipeline results. Why would an info output be marked as error anyway?

How can the code coverage data from Flutter tests be displayed?

I'm working on a Flutter app using Android Studio as my IDE. I'm attempting to write tests and check the code coverage but I can't work out how to view the data in the IDE or any other application.
By running flutter test --coverage, a coverage report seems to be generated into a file /coverage/lcov.info. That file looks something like this:
SF:lib\data\Customer.g.dart
DA:9,2
DA:10,2
DA:11,2
DA:12,2
DA:13,2
DA:20,0
DA:21,0
DA:22,0
DA:23,0
DA:24,0
...
Looking at the file it seems to have a list of my project files with line by line coverage data. Is there a way to view this information in Android Studio?
You can also install lcov and convert the lcov.info file to HTML pages and then see the result in the browser with sorting option.
1. Installation
1.1. Installing in Ubuntu
sudo apt-get update -qq -y
sudo apt-get install lcov -y
1.2. Installing in Mac
brew install lcov
2. Run tests, generate coverage files and convert to HTML
flutter test --coverage
genhtml coverage/lcov.info -o coverage/html
3. Open coverage report in browser
open coverage/html/index.html
Note This way you can add it to circleci artifacts and coveralls as well.
This is what you want to run to see tests coverage in your browser on macOS
flutter test --coverage
genhtml coverage/lcov.info -o coverage/html
open coverage/html/index.html
You can view the code coverage generated by flutter with the Atom editor.
You just need to install the Dart and lcov-info packages.
Then you load your project folder and press Ctrl+Alt+c, coverage will be displayed with a summary of the whole projects coverage and also with specific line highlighting.
There doesn't appear to be any plugin for Android studio which does this as of yet.
Update 9/18/2021:
See new answer for how it's done within the editor
Update 5/9/2020:
Turns out you can just run flutter test --coverage, then in the same terminal session run bash <(curl -s https://codecov.io/bash) -t token token should be the repository token you get from CodeCov. That command should automatically find and upload the coverage data and will be visible on your CodeCov dashboard. So you don't need Bitrise.
Original:
I've been using Bitrise for continuous integration on my flutter project and there is an easy way to send your reports to CodeCov then visualize it there. This requires you to gain some knowledge on how to set up and use Bitrise but a lot of its automatic so don't worry, also if you're a small team you should be fine with the free tier. Here are the key points for getting CodeCov to work.
Make sure you add the --coverage variable to the Flutter Test workflow.
Add the token from CodeCov as a secret key, you will need to sign up for CodeCov and link your repository to receive a token.
Add the CodeCov workflow and select the CODECOV_TOKEN key.
After that, you should be able to fire off a build and if successful you should see your dashboard update at CodeCov.
The Flutter Enhancement Suite does exactly that. It is an Android Studio/IntelliJ plugin which generates coverage reports.
It shows the coverage per file and also highlights covered lines (red/green bars next to the line numbers):
install the plugin from the plugin options (Preferences > Plugins > Marketplace tab > Search for Flutter Enhancement Suite).
Create a new Run Configuration for testing with coverage
(Run > Edit Configurations > click the plus button to add a new configuration > Choose Flutter Test in the dropdown)
Name your configuration (e.g. "All tests"), set the scope and the file or directory containing your tests.
Run your tests with coverage from the top menu.
I just developed a simple dart package (test_cov_console), so you can run it directly from Android Studio terminal. The tool would read the lcov.info that was generated by flutter test --coverage. Find this link for source code.
You can install the lib globally, so it would not change your current project:
flutter pub global activate test_cov_console
And run it:
flutter pub global run test_cov_console
Here is the sample of output:
flutter pub run test_cov_console
---------------------------------------------|---------|---------|---------|-------------------|
File |% Branch | % Funcs | % Lines | Uncovered Line #s |
---------------------------------------------|---------|---------|---------|-------------------|
lib/src/ | | | | |
print_cov.dart | 100.00 | 100.00 | 88.37 |...,149,205,206,207|
print_cov_constants.dart | 0.00 | 0.00 | 0.00 | no unit testing|
lib/ | | | | |
test_cov_console.dart | 0.00 | 0.00 | 0.00 | no unit testing|
---------------------------------------------|---------|---------|---------|-------------------|
All files with unit testing | 100.00 | 100.00 | 88.37 | |
---------------------------------------------|---------|---------|---------|-------------------|
The output can be saved to CSV file:
flutter pub run test_cov_console -c --output=coverage/test_coverage.csv
Sample CSV output file:
File,% Branch,% Funcs,% Lines,Uncovered Line #s
lib/,,,,
test_cov_console.dart,0.00,0.00,0.00,no unit testing
lib/src/,,,,
parser.dart,100.00,100.00,97.22,"97"
parser_constants.dart,100.00,100.00,100.00,""
print_cov.dart,100.00,100.00,82.91,"29,49,51,52,171,174,177,180,183,184,185,186,187,188,279,324,325,387,388,389,390,391,392,393,394,395,398"
print_cov_constants.dart,0.00,0.00,0.00,no unit testing
All files with unit testing,100.00,100.00,86.07,""
With the release of Flutter 2.5, you can now view test coverage within IntelliJ and Android Studio.
See this post
In addition, the latest IJ/AS plugin for Flutter allows you to see the
coverage information for both unit test and integration test runs. You
can access this from the toolbar button next to the “Debug” button:
Android Studio and IntelliJ:
Coverage reporting is now available on Android Studio
You can use SonarQube with an additional plugin for Flutter as per this link SonarQube plugin for Flutter / Dart.
I have tried it with the free version of SonarQube on docker, and if you have configured it correctly, you just need to run the following commands on Android Studio terminal:
# Download dependencies
flutter pub get
# Run tests with User feedback (in case some test are failing)
flutter test
# Run tests without user feedback regeneration tests.output and coverage/lcov.info
flutter test --machine --coverage > tests.output
# Run the analysis and publish to the SonarQube server
sonar-scanner
Here is the sample of the report, and you can drill deep into line codes.
So, the actual answer is no, you cannot view a coverage report within Android Studio (or in IntelliJ IDEA) at this time.
Unlike JavaScript/TypeScript and Java and probably Python, the IntelliJ IDE (and by extension, Android Studio) do not have integrated IDE support for showing test coverage of Flutter code in the editor. This is a shame because the ability to see your untested code branches and lines highlighted in the source code of your editor is a beautiful thing. Not sure why a plugin for this does not exist yet, since it is well-supported for other languages, and a standard lcov.info file is generated.
There is a bundled code coverage tool window in IntelliJ that is supposed to allow you to browse the lcov.info file in a tree/table drill-down format, but it doesn't seem to work with the coverage report generated by flutter (flutter test --coverage). I thought it might be the relative paths in the lcov.info and my multi-module app structure, but I tried to manually edit the file paths in lcov.info, but I had no luck getting the stats to show.
FOR WINDOWS
Required:
Chocolatey
Perl
LCOV
1. INSTALL CHOCOLATEY
Open PowerShell (with Admin)
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
2. INSTALL PERL
choco install strawberryperl
Add path to the environmental variable
3. INSTALL LCOV
choco install lcov
LCOV OPERATION
go to the android studio terminal & run this flutter test --coverage
now next, open your project root dir in the power shell in my case (eg :C:\Users\CIPL\Documents\Project\Flutter\myProject)
& run this cmd perl C:\ProgramData\chocolatey\lib\lcov\tools\bin\genhtml coverage/lcov.info -o coverage/html
that's it open the html folder and click the HTML file to view the visual in the browser.
NOTE: when I tried to do 3'rd point, I faced this error "ERROR: cannot create directory 'coverage/html'"
so manually created the html folder and tried 3rd point again.
Found this Windows solution in this https://blog.tech-andgar.me/flutter-test-coverage

XCode 6.3 Code Signing Issues after update

I've updated recently to XCode 6.3 and started having some strange code signing issues. Occasionally XCode will start complain about the code signing issues. And either will have issue like :
invalid or unsupported format for signature ... Command /usr/bin/codesign failed with exit code 1
or
... Command /usr/bin/codesign failed with exit code 11
Can not find pattern yet, but looks like issue with XCode code sign, as sometimes after cleanup and restart of XCode it will work.
I did not change any settings regarding code signing. Project structure is quite complicated, it has referenced projects and pods.
Any help appreciated.
** Update **
It did not help for me to remove derived data or restarting XCode.
But it did work if i removed the project and downloaded fresh from git. This removed XCode files which are not committed to git.
Again after clean it has stopped working. And in the console logs i've got something like this:
codesign[4111]: Internal error unloading bundle CFBundle 0x7fb44a40adc0 <(null)> (framework, not loaded)
** Another Update **
Found on twitter someone who has the same issue.
Looks like the issue is caused by --deep option in code signing.
https://github.com/atom/atom-shell/issues/1396
Solution is to not code sign app and frameworks inside with --deep. But rather code sign each framework separately.
http://furbo.org/2013/10/17/code-signing-and-mavericks/
Just had this happen to me as well after the latest X-Code update. But X-Code had been advising me to update my project settings for a while now, I just hadn't got round to it. The link you provide explains it well.
It actually shows up as an issue in the navigator, and X-Code will offer to fix it automatically for you when you select the issue. You just need to remove the --deep option from your Build Settings yourself.
This worked with my 2 3rd party frameworks, Sparkle and Syphon.
Problem was caused by --deep code signing option and entitlements.
To solve it i had to manually code sign the frameworks.
This required adding new run script build phase, and running script similar to this one:
IDENTITY="HEX_IDENTITY"
export CODESIGN_ALLOCATE="/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/codesign_allocate"
FRAMEWORKS_LOCATION="${BUILT_PRODUCTS_DIR}"/"${FRAMEWORKS_FOLDER_PATH}"
EXECUTABLES_LOCATION="${BUILT_PRODUCTS_DIR}"/"${EXECUTABLE_FOLDER_PATH}"
codesign --verbose --force --deep --verify --sign "$IDENTITY" "$EXECUTABLES_LOCATION/MY_HELPER_APP.app"
codesign --verbose --force --deep --verify --sign "$IDENTITY" "$FRAMEWORKS_LOCATION/MY_FRAMEWORK/Versions/A"
HEX_IDENTITY can be obtained by using shell command:
security find-identity
This will display list of signing identities with their hex numbers.
After exporting application as the app I verified the code signing with command:
codesign --verify --verbose --deep MyApp.app
spctl --verbose --assess --type execute MyApp.app
References:
http://furbo.org/2013/10/17/code-signing-and-mavericks/
https://developer.apple.com/library/mac/technotes/tn2206/_index.html