@ckeditor/ckeditor5-dev-utils 43.1.0 depends on vulnerable libraries

[Fredx87]

📝 Provide detailed reproduction steps (if any)

The latest version of @ckeditor/ckeditor5-dev-utils on NPM is 43.1.0. It depends on vulnerable versions of some libraries, like esbuild and flat.

Examples reported by dependabot:

• https://github.com/zendesk/help-center-wysiwyg/security/dependabot/19
• https://github.com/zendesk/help-center-wysiwyg/security/dependabot/38

These issues are fixed in the repo, but the latest versions are published under the next tag on NPM, so they are not installed by default by package managers

✔️ Expected result

The latest version of @ckeditor/ckeditor5-dev-utils doesn't depend on vulnerable libraries

❌ Actual result

The latest version of @ckeditor/ckeditor5-dev-utils depends on vulnerable libraries

❓ Possible solution

Either a new major version that doesn't depends on vulnerable libraries should be published as latest, or a new patch 43.1.1 version should be published

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[pomek]

Internal conclusions:

• Switch the current @next as @latest.
• Update CKEditor 5 documentation to suggest using v54 instead of v43 when installing ckeditor5-dev-*.
  • We must check if OIM build works as expected.
• Prepare master-v54 branch in ckeditor5-dev and enable SNYK to track this branch, too.

[Witoso]

Historical context: latest was kept as is due to old installation methods being supported. Some changes we have done were incompatible; hence, next was created.

When we deprecate OIM, @ckeditor/ckeditor5-dev-utils would likely not be used by any external setup, as the packages will be pure ESM distributions, but I guess that's TBD.

[pomek]

@Witoso, there are also huge updates on the Node side. It understands imports between CJS and ESM packages, enabling a switch back to the standard versioning model.

[pomek]

Important

The project described below uses Node v24.11.0, which is the minimal required version for the @ckeditor/ckeditor5-dev-* packages.

{
  "engines": {
    "node": ">=24.11.0"
  }
}

To confirm the @next packages work with an old build, I created the following project.

• src/ckeditor.js

   // The editor creator to use.
   import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
   
   import { Alignment } from '@ckeditor/ckeditor5-alignment';
   import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
   import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
   import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
   import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
   import { Essentials } from '@ckeditor/ckeditor5-essentials';
   import { Heading } from '@ckeditor/ckeditor5-heading';
   import {
   	Image,
   	ImageCaption,
   	ImageStyle,
   	ImageToolbar,
   	ImageUpload
   } from '@ckeditor/ckeditor5-image';
   import { Indent } from '@ckeditor/ckeditor5-indent';
   import { Link } from '@ckeditor/ckeditor5-link';
   import { List } from '@ckeditor/ckeditor5-list';
   import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
   import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
   import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
   import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
   import { TextTransformation } from '@ckeditor/ckeditor5-typing';
   
   class Editor extends ClassicEditor {
   	// Plugins to include in the build.
   	static builtinPlugins = [
   		Alignment,
   		Autoformat,
   		BlockQuote,
   		Bold,
   		CloudServices,
   		Essentials,
   		Heading,
   		Image,
   		ImageCaption,
   		ImageStyle,
   		ImageToolbar,
   		ImageUpload,
   		Indent,
   		Italic,
   		Link,
   		List,
   		MediaEmbed,
   		Paragraph,
   		PasteFromOffice,
   		Table,
   		TableToolbar,
   		TextTransformation
   	];
   
   	static defaultConfig = {
   		toolbar: {
   			items: [
   				'alignment',
   				'heading',
   				'|',
   				'bold',
   				'italic',
   				'link',
   				'bulletedList',
   				'numberedList',
   				'|',
   				'outdent',
   				'indent',
   				'|',
   				'imageUpload',
   				'blockQuote',
   				'insertTable',
   				'mediaEmbed',
   				'undo',
   				'redo'
   			]
   		},
   
   		// This value must be kept in sync with the language defined in webpack.config.js.
   		language: 'pl',
   		image: {
   			toolbar: [
   				'imageTextAlternative',
   				'toggleImageCaption',
   				'imageStyle:inline',
   				'imageStyle:block',
   				'imageStyle:side'
   			]
   		},
   		table: {
   			contentToolbar: [
   				'tableColumn',
   				'tableRow',
   				'mergeTableCells'
   			]
   		}
   	};
   }
   
   export default Editor;

• package.json (might contain more than needed)

   {
     "dependencies": {
       "@ckeditor/ckeditor5-adapter-ckfinder": "47.3.0",
       "@ckeditor/ckeditor5-autoformat": "47.3.0",
       "@ckeditor/ckeditor5-basic-styles": "47.3.0",
       "@ckeditor/ckeditor5-block-quote": "47.3.0",
       "@ckeditor/ckeditor5-ckbox": "47.3.0",
       "@ckeditor/ckeditor5-ckfinder": "47.3.0",
       "@ckeditor/ckeditor5-cloud-services": "47.3.0",
       "@ckeditor/ckeditor5-easy-image": "47.3.0",
       "@ckeditor/ckeditor5-editor-classic": "47.3.0",
       "@ckeditor/ckeditor5-essentials": "47.3.0",
       "@ckeditor/ckeditor5-heading": "47.3.0",
       "@ckeditor/ckeditor5-image": "47.3.0",
       "@ckeditor/ckeditor5-indent": "47.3.0",
       "@ckeditor/ckeditor5-link": "47.3.0",
       "@ckeditor/ckeditor5-list": "47.3.0",
       "@ckeditor/ckeditor5-media-embed": "47.3.0",
       "@ckeditor/ckeditor5-paragraph": "47.3.0",
       "@ckeditor/ckeditor5-paste-from-office": "47.3.0",
       "@ckeditor/ckeditor5-table": "47.3.0",
       "@ckeditor/ckeditor5-typing": "47.3.0"
     },
     "devDependencies": {
       "@ckeditor/ckeditor5-core": "47.3.0",
       "@ckeditor/ckeditor5-dev-translations": "^54.2.1",
       "@ckeditor/ckeditor5-dev-utils": "^54.2.1",
       "@ckeditor/ckeditor5-theme-lark": "47.3.0",
       "terser-webpack-plugin": "^4.2.3",
       "css-loader": "^5.2.7",
       "postcss-loader": "^4.3.0",
       "raw-loader": "^4.0.2",
       "style-loader": "^2.0.0",
       "webpack": "^5.103.0",
       "webpack-cli": "^4.10.0"
     },
     "scripts": {
       "build": "webpack --mode production"
     }
   }

• webpack.config.js

   // webpack.config.js
   
   'use strict';
   
   const path = require( 'path' );
   const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
   const { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' );
   
   module.exports = {
   	// https://webpack.js.org/configuration/entry-context/
   	entry: './src/ckeditor.js',
   
   	// https://webpack.js.org/configuration/output/
   	output: {
   		// The name under which the editor will be exported.
   		library: 'ClassicEditor',
   
   		path: path.resolve( __dirname, 'build' ),
   		filename: 'ckeditor.js',
   		libraryTarget: 'umd',
   		libraryExport: 'default'
   	},
   
   	plugins: [
   		new CKEditorTranslationsPlugin( {
   			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
   			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
   			language: 'pl',
   			additionalLanguages: 'all'
   		} )
   	],
   
   	module: {
   		rules: [
   			{
   				test: /\.svg$/,
   
   				use: [ 'raw-loader' ]
   			},
   			{
   				test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
   
   				use: [
   					{
   						loader: 'style-loader',
   						options: {
   							injectType: 'singletonStyleTag',
   							attributes: {
   								'data-cke': true
   							}
   						}
   					},
   					'css-loader',
   					{
   						loader: 'postcss-loader',
   						options: {
   							postcssOptions: styles.getPostCssConfig( {
   								themeImporter: {
   									themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
   								},
   								minify: true
   							} )
   						}
   					}
   				]
   			}
   		]
   	},
   
   	// Useful for debugging.
   	devtool: 'source-map',
   
   	// By default webpack logs warnings if the bundle is bigger than 200kb.
   	performance: { hints: false }
   };

• sample/index.html

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="utf-8">
       <title>CKEditor 5 – classic editor build – development sample</title>
       <style>
           body {
               max-width: 800px;
               margin: 20px auto;
           }
       </style>
   </head>
   <body>
   
   <h1>CKEditor 5 – classic editor build – development sample</h1>
   
   <div id="editor">
       <h2>Sample</h2>
   
       <p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#classic-editor">classic editor build</a>.</p>
   
       <figure class="image">
           <img src="https://raw.githubusercontent.com/ckeditor/ckeditor5/refs/tags/v41.4.2/packages/ckeditor5-build-classic/tests/manual/sample.jpg" alt="Autumn fields" />
       </figure>
   
       <p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/custom-builds.html">custom build</a> works fine.</p>
   </div>
   
   <script src="../build/ckeditor.js"></script>
   <script>
   	ClassicEditor.create( document.querySelector( '#editor' ), { licenseKey: 'GPL', language: 'pl' } )
   		.then( editor => {
   			window.editor = editor;
   		} )
   		.catch( error => {
   			console.error( 'There was a problem initializing the editor.', error );
   		} );
   </script>
   
   </body>
   </html>

After executing:

• npm install
• npm run build

> build
> webpack --mode production

asset ckeditor.js 1.36 MiB [emitted] [minimized] [big] (name: main) 2 related assets
asset translations/bn.js 26.1 KiB [emitted] [minimized]
asset translations/th.js 25.1 KiB [emitted] [minimized]
asset translations/el.js 23.5 KiB [emitted] [minimized]
asset translations/ru.js 22.6 KiB [emitted] [minimized]
asset translations/bg.js 22.6 KiB [emitted] [minimized]
asset translations/uk.js 21.9 KiB [emitted] [minimized]
asset translations/be.js 21 KiB [emitted] [minimized]
asset translations/hi.js 20.3 KiB [emitted] [minimized]
asset translations/ar.js 19.1 KiB [emitted] [minimized]
asset translations/sr.js 17.9 KiB [emitted] [minimized]
asset translations/he.js 17.5 KiB [emitted] [minimized]
asset translations/ja.js 17.4 KiB [emitted] [minimized]
asset translations/vi.js 17 KiB [emitted] [minimized]
+ 59 assets
orphan modules 5.77 MiB [orphan] 1524 modules
runtime modules 698 bytes 4 modules
cacheable modules 5.78 MiB
  modules by path ./node_modules/@ckeditor/ 524 KiB 91 modules
  modules by path ./node_modules/css-loader/dist/runtime/*.js 3.84 KiB
    ./node_modules/css-loader/dist/runtime/cssWithMappingToString.js 2.27 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
  ./src/ckeditor.js + 943 modules 5.26 MiB [built] [code generated]
  ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
webpack 5.103.0 compiled successfully in 5369 ms

A new directory appeared: build/. It includes a ready-to-use build and translations. Running any HTTP server on a root directory, and then launching the sample gives me:

To confirm versions of dev utils:

$ npm why @ckeditor/ckeditor5-dev-translations
npm warn Unknown user config "email". This will stop working in the next major version of npm.
@ckeditor/ckeditor5-dev-translations@54.2.1 dev
node_modules/@ckeditor/ckeditor5-dev-translations
  dev @ckeditor/ckeditor5-dev-translations@"^54.2.1" from the root project
  @ckeditor/ckeditor5-dev-translations@"^54.2.1" from @ckeditor/ckeditor5-dev-utils@54.2.1
  node_modules/@ckeditor/ckeditor5-dev-utils
    dev @ckeditor/ckeditor5-dev-utils@"^54.2.1" from the root project
    @ckeditor/ckeditor5-dev-utils@"^54.2.1" from @ckeditor/ckeditor5-dev-translations@54.2.1



$ npm why @ckeditor/ckeditor5-dev-utils
npm warn Unknown user config "email". This will stop working in the next major version of npm.
@ckeditor/ckeditor5-dev-utils@54.2.1 dev
node_modules/@ckeditor/ckeditor5-dev-utils
  dev @ckeditor/ckeditor5-dev-utils@"^54.2.1" from the root project
  @ckeditor/ckeditor5-dev-utils@"^54.2.1" from @ckeditor/ckeditor5-dev-translations@54.2.1
  node_modules/@ckeditor/ckeditor5-dev-translations
    dev @ckeditor/ckeditor5-dev-translations@"^54.2.1" from the root project
    @ckeditor/ckeditor5-dev-translations@"^54.2.1" from @ckeditor/ckeditor5-dev-utils@54.2.1