The aem-project-archetype relies on vulnerable third-party libs

[bpauli]

The aem-project-archetype relies on vulnerable third-party libs. This affects the archetype maven project and the projects generated by the archetype.

Reference

List of package definition in the aem-project-archetype repository

% find aem-project-archetype -name package.json
aem-project-archetype/src/main/archetype/ui.tests/test-module/package.json
aem-project-archetype/src/main/archetype/ui.frontend.angular/package.json
aem-project-archetype/src/main/archetype/ui.frontend.general/package.json
aem-project-archetype/src/main/archetype/ui.frontend.react/package.json

Example in aem-project-archetype

% npm audit
# npm audit report
[...]
19 vulnerabilities (18 moderate, 1 high)
[...]

Example in project generated from the archetype

% npm i --package-lock-only                                                                                                                                                                                               
[...]
29 vulnerabilities (19 moderate, 10 high)
[...]

Recommendation

For every package.json, apply one of the following suggestions:

Remove usage and vulnerable dependencies Upgrade to avulnerability free version of the embedded libraries.

[kevinolivar]

@bpauli firstly, thanks for that, it was about time someone upgrades the archetype frontend :-)

Anyway, before that archetype release 33, I also upgraded the package.json and ran npm audit fix on my project (https://github.com/kevinolivar/aem-test). However, I started facing an issue with circular dependencies.

This issue is related to, https://github.com/webpack/webpack/issues/15060 https://github.com/webpack-contrib/mini-css-extract-plugin/issues/733

At the end, glob-import-loader was patched (v1.2.0) and fixed that issue.

The thing is that when I checked out the latest archetype release 33, I actually don't get that problem with an old version of this glob-import-loader (1.1.4).

I compared the package.json but only found those differences (+ additional packages such as babel-loader I used instead of ts-loader),

    "@typescript-eslint/eslint-plugin": "^5.8.0",
    "@typescript-eslint/parser": "^5.8.0",
    "acorn": "^8.6.0",
    "aemsync": "^4.0.1",
    "autoprefixer": "^10.4.0",
    "chokidar-cli": "^3.0.0",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^10.2.0",
    "css-minimizer-webpack-plugin": "^3.3.1",
    "eslint": "^8.5.0",
    "glob-import-loader": "^1.2.0",
    "postcss-loader": "^6.2.1",
    "sass": "^1.17.2",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.0",
    "typescript": "^4.5.4",
    "webpack-dev-server": "^4.7.1",

The webpack configs seem pretty close too. I don't really get what makes the build break on https://github.com/kevinolivar/aem-test (frontend module is 'general') and not archetype release 33. I guess I could try upgrading and check.

Anyway, I was wondering if you could help.

Thank you in advance.

[kevinolivar]

@bpauli

Actually, I got some helps here and it turns out that the generated package-lock.json uses the latest version of glob-import-loader. So, after sorting this out and using glob-import-loader 1.1.4, production build still breaks. It currently works because a JS file (_helloworld.js) is included in main.ts via ../components/**/*.js. Remove, this line from main.ts and use version 1.1.4 of glob-import-loader.

Also, why is the package-lock.json not part of the repo?

[kevinolivar]

I guess this can be closed? :D