ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

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

Open Fredx87 opened this issue 1 month ago • 3 comments

📝 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.

Fredx87 avatar Dec 09 '25 12:12 Fredx87

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.

pomek avatar Dec 10 '25 08:12 pomek

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.

Witoso avatar Dec 10 '25 08:12 Witoso

@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 avatar Dec 10 '25 09:12 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.
    mport { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
    
    mport { Alignment } from '@ckeditor/ckeditor5-alignment';
    mport { Autoformat } from '@ckeditor/ckeditor5-autoformat';
    mport { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
    mport { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
    mport { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
    mport { Essentials } from '@ckeditor/ckeditor5-essentials';
    mport { Heading } from '@ckeditor/ckeditor5-heading';
    mport {
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload
     from '@ckeditor/ckeditor5-image';
    mport { Indent } from '@ckeditor/ckeditor5-indent';
    mport { Link } from '@ckeditor/ckeditor5-link';
    mport { List } from '@ckeditor/ckeditor5-list';
    mport { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
    mport { Paragraph } from '@ckeditor/ckeditor5-paragraph';
    mport { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
    mport { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
    mport { TextTransformation } from '@ckeditor/ckeditor5-typing';
    
    lass 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'
    		]
    	}
    };
    
    
    xport 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';
    
    onst path = require( 'path' );
    onst { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
    onst { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' );
    
    odule.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:

Image

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/[email protected] 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/[email protected]
  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/[email protected]



$ npm why @ckeditor/ckeditor5-dev-utils
npm warn Unknown user config "email". This will stop working in the next major version of npm.
@ckeditor/[email protected] 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/[email protected]
  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/[email protected]

pomek avatar Dec 15 '25 07:12 pomek

While the issue has been closed automatically, I am processing the release of ckeditor5-dev-* right now.

pomek avatar Dec 15 '25 10:12 pomek

npm info @ckeditor/ckeditor5-dev-utils

@ckeditor/[email protected] | GPL-2.0-or-later | deps: 26 | versions: 303
Utils for CKEditor 5 development tools packages.
https://github.com/ckeditor/ckeditor5-dev/tree/master/packages/ckeditor5-dev-utils

dist
.tarball: https://registry.npmjs.org/@ckeditor/ckeditor5-dev-utils/-/ckeditor5-dev-utils-54.2.2.tgz
.shasum: 3fa8ba39a80840ec8bb71b20dfc9856f81634c7d
.integrity: sha512-NsYVDTAjwpJrCln5Np52GvCfzq30H43cEheeE07FjpblalkMNo6hJPjbmtJFAXhYBc2ZQi/ahpt4H9sMBoMe1Q==
.unpackedSize: 66.9 kB

dependencies:
@ckeditor/ckeditor5-dev-translations: ^54.2.2 cli-spinners: ^3.0.0                          is-interactive: ^2.0.0                        postcss-loader: ^8.0.0                        shelljs: ^0.10.0
@types/postcss-import: ^14.0.3                css-loader: ^7.0.0                            mini-css-extract-plugin: ^2.4.2               postcss-mixins: ^11.0.0                       simple-git: ^3.27.0
@types/through2: ^2.0.41                      cssnano: ^7.0.0                               mocha: ^11.1.0                                postcss-nesting: ^13.0.0                      style-loader: ^4.0.0
babel-loader: ^10.0.0                         esbuild-loader: ^4.0.0                        pacote: ^21.0.0                               postcss: ^8.4.12                              terser-webpack-plugin: ^5.0.0
cli-cursor: ^5.0.0                            glob: ^13.0.0                                 postcss-import: ^16.0.0                       raw-loader: ^4.0.1
(...and 2 more.)

maintainers:
- ckeditor <[email protected]>

dist-tags:
latest: 54.2.2        next: 54.2.1          alpha: 44.0.0-alpha.5
^^^^^^^^^^^^^^

published 2 minutes ago by ckeditor <[email protected]>

pomek avatar Dec 15 '25 10:12 pomek