React Native css-what high severity vulnerability - reactjs

Question

Context
In my react-native application, I am getting a high severity vulnerability regarding a package called css-what. In which it apparently is resulting in 4 other vulnerabilities because they directly or indirectly depend on css-what. Here's the following output I get on the console from after executing npm audit
css-what <5.0.1
Severity: high
Denial of Service - https://npmjs.com/advisories/1754
fix available via `npm audit fix --force`
Will install react-native-svg#9.12.0, which is a breaking change
node_modules/css-what
css-select <=3.1.2
Depends on vulnerable versions of css-what
node_modules/css-select
react-native-svg >=9.13.0
Depends on vulnerable versions of css-select
node_modules/react-native-svg
#ui-kitten/components >=5.0.0-alpha.1
Depends on vulnerable versions of react-native-svg
node_modules/#ui-kitten/components
#ui-kitten/eva-icons >=5.0.0-alpha.1
Depends on vulnerable versions of react-native-svg
node_modules/#ui-kitten/eva-icons
So as you can see from the output, the css-what causes a vulnerability for the package react-native-svg and because the design system I installed ui-kitten depends on react-native-svg it subsequently has a vulnerability.
I looked up on the css-what package and the vulnerability in which can be seen here. I know that the vulnerability has a high severity because it can result in denial of service.
What I tried
I made a duplicate of my project because I know running npm audit fix --force would result in breaking changes in which it did when I ran that command on the duplicate project. The app was able to build but it threw an error when running on the simulator.
(Note that I am developing from a bare react-native project).
The instructions that the documentation gave was to update css-what to 5.0.1 but I have no idea on how to go about doing that. Hence I hope someone is able to help me on this.

Answer 1

I have tried above approach for my angular project, but its considering css-what as a diff dependency instead of dependency inside package #angular-devkit/build-angular.
12.1.0-next.6
| `-- css-minimizer-webpack-plugin#3.0.1
| `-- cssnano#5.0.6
| `-- cssnano-preset-default#5.1.3
| `-- postcss-svgo#5.0.2
| `-- svgo#2.3.0
| `-- css-select#3.1.2
| `-- css-what#4.0.0
`-- css-what#5.0.1 ```
tried, see in above. its taking separate css-what thats should not be the case.
still the issue exists.

Answer 2

I had the same problem, so I do the following:
I checked online the latest version of css, which has no vulnerabilities, and installed it as --save.
npm install css-what#5.0.1
then install npm-force-resolutions:
npx npm-force-resolutions
add to my package.json:
"resolution": {"css-what": "^ 5.0.1"}
and then install dependencies as usual:
npm install
if you receive the following error:
npm ERR! Invalid Version: ^5.0.1
then just erase the ^ in the package.json and retry npm-force-resolution and install.

Answer 3

I was having the same problem updating css-what npm update css-what worked for me

Answer 4

css-what in its version prior to 5.1.0 has DOS attack vulnerability. You can find that in your package-lock.json that this is a transitive dependency coming from css-select.
You need to first install the non-vulnerable version of your dependency , so in this case
npm install --save css-what#5.0.1
Once that is done you need to add resolution strategy in your package.json. So , just add below key at the end of your package.json
"resolutions": { "css-what": "^5.0.1" }
After this just run npm install and run npm audit to see if your fix is working. You can cross check your package-lock.json to verify the new entry.