@elementor/editor-canvas 4.3.0-1019 → 4.3.0-1021

package/dist/index.js

@@ -2578,28 +2578,13 @@ function createDomRenderer() {
     render: environment.render
   };
 }
+function getAllowedHtmlWrapperTags() {
+  return window.elementorCommon?.config?.allowedHTMLWrapperTags ?? [];
+}
 function escapeHtmlTag(value) {
-  const allowedTags = [
-    "a",
-    "article",
-    "aside",
-    "button",
-    "div",
-    "footer",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "header",
-    "main",
-    "nav",
-    "p",
-    "section",
-    "span"
-  ];
-  return allowedTags.includes(value) ? value : "div";
+  const allowedTags = getAllowedHtmlWrapperTags();
+  const normalizedTag = value?.toLowerCase?.() ?? "";
+  return allowedTags.includes(normalizedTag) ? value : "div";
 }
 function escapeURL(value) {
   const allowedProtocols = ["http:", "https:", "mailto:", "tel:"];

package/dist/index.mjs

@@ -2530,28 +2530,13 @@ function createDomRenderer() {
     render: environment.render
   };
 }
+function getAllowedHtmlWrapperTags() {
+  return window.elementorCommon?.config?.allowedHTMLWrapperTags ?? [];
+}
 function escapeHtmlTag(value) {
-  const allowedTags = [
-    "a",
-    "article",
-    "aside",
-    "button",
-    "div",
-    "footer",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "header",
-    "main",
-    "nav",
-    "p",
-    "section",
-    "span"
-  ];
-  return allowedTags.includes(value) ? value : "div";
+  const allowedTags = getAllowedHtmlWrapperTags();
+  const normalizedTag = value?.toLowerCase?.() ?? "";
+  return allowedTags.includes(normalizedTag) ? value : "div";
 }
 function escapeURL(value) {
   const allowedProtocols = ["http:", "https:", "mailto:", "tel:"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.3.0-1019",
+  "version": "4.3.0-1021",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,26 +37,26 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-1019",
-    "@elementor/editor-controls": "4.3.0-1019",
-    "@elementor/editor-documents": "4.3.0-1019",
-    "@elementor/editor-elements": "4.3.0-1019",
-    "@elementor/editor-interactions": "4.3.0-1019",
-    "@elementor/editor-mcp": "4.3.0-1019",
-    "@elementor/editor-notifications": "4.3.0-1019",
-    "@elementor/editor-props": "4.3.0-1019",
-    "@elementor/editor-responsive": "4.3.0-1019",
-    "@elementor/editor-styles": "4.3.0-1019",
-    "@elementor/editor-styles-repository": "4.3.0-1019",
-    "@elementor/editor-ui": "4.3.0-1019",
-    "@elementor/editor-v1-adapters": "4.3.0-1019",
-    "@elementor/events": "4.3.0-1019",
-    "@elementor/http-client": "4.3.0-1019",
-    "@elementor/schema": "4.3.0-1019",
-    "@elementor/twing": "4.3.0-1019",
+    "@elementor/editor": "4.3.0-1021",
+    "@elementor/editor-controls": "4.3.0-1021",
+    "@elementor/editor-documents": "4.3.0-1021",
+    "@elementor/editor-elements": "4.3.0-1021",
+    "@elementor/editor-interactions": "4.3.0-1021",
+    "@elementor/editor-mcp": "4.3.0-1021",
+    "@elementor/editor-notifications": "4.3.0-1021",
+    "@elementor/editor-props": "4.3.0-1021",
+    "@elementor/editor-responsive": "4.3.0-1021",
+    "@elementor/editor-styles": "4.3.0-1021",
+    "@elementor/editor-styles-repository": "4.3.0-1021",
+    "@elementor/editor-ui": "4.3.0-1021",
+    "@elementor/editor-v1-adapters": "4.3.0-1021",
+    "@elementor/events": "4.3.0-1021",
+    "@elementor/http-client": "4.3.0-1021",
+    "@elementor/schema": "4.3.0-1021",
+    "@elementor/twing": "4.3.0-1021",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1019",
-    "@elementor/wp-media": "4.3.0-1019",
+    "@elementor/utils": "4.3.0-1021",
+    "@elementor/wp-media": "4.3.0-1021",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0",
     "dompurify": "^3.2.6"

package/src/renderers/__tests__/create-dom-renderer.test.ts

@@ -1,7 +1,21 @@
 /* eslint-disable testing-library/render-result-naming-convention */
 import { createDomRenderer } from '../create-dom-renderer';
 
+const TEST_ALLOWED_HTML_WRAPPER_TAGS = [ 'a', 'div', 'form', 'span' ];
+
 describe( 'createDomRenderer', () => {
+	beforeEach( () => {
+		window.elementorCommon = {
+			config: {
+				allowedHTMLWrapperTags: TEST_ALLOWED_HTML_WRAPPER_TAGS,
+			},
+		};
+	} );
+
+	afterEach( () => {
+		delete window.elementorCommon;
+	} );
+
 	it.each( [
 		{
 			title: 'basic string',
@@ -15,12 +29,24 @@ describe( 'createDomRenderer', () => {
 			context: { tag: 'a' },
 			expected: '<a></a>',
 		},
+		{
+			title: 'allowed form html tag',
+			template: `<{{ tag | e( 'html_tag' ) }}></{{ tag | e( 'html_tag' ) }}>`,
+			context: { tag: 'form' },
+			expected: '<form></form>',
+		},
 		{
 			title: 'disallowed html tags',
 			template: `<{{ tag | e( 'html_tag' ) }}></{{ tag | e( 'html_tag' ) }}>`,
 			context: { tag: 'script' },
 			expected: '<div></div>',
 		},
+		{
+			title: 'allowed html tag with uppercase casing',
+			template: `<{{ tag | e( 'html_tag' ) }}></{{ tag | e( 'html_tag' ) }}>`,
+			context: { tag: 'DIV' },
+			expected: '<DIV></DIV>',
+		},
 		{
 			title: 'allowed url (http)',
 			template: `{{ url | e( 'full_url' ) }}`,
@@ -63,4 +89,38 @@ describe( 'createDomRenderer', () => {
 		// Assert.
 		expect( result ).toBe( expected );
 	} );
+
+	it( 'should validate a tag added via localized config', async () => {
+		// Arrange.
+		window.elementorCommon = {
+			config: {
+				allowedHTMLWrapperTags: [ ...TEST_ALLOWED_HTML_WRAPPER_TAGS, 'custom-tag' ],
+			},
+		};
+		const domRenderer = createDomRenderer();
+		const template = `<{{ tag | e( 'html_tag' ) }}></{{ tag | e( 'html_tag' ) }}>`;
+
+		domRenderer.register( 'test-template', template );
+
+		// Act.
+		const result = await domRenderer.render( 'test-template', { tag: 'custom-tag' } );
+
+		// Assert.
+		expect( result ).toBe( '<custom-tag></custom-tag>' );
+	} );
+
+	it( 'should fail closed to div when the localized config is missing, even for an otherwise-safe tag', async () => {
+		// Arrange.
+		delete window.elementorCommon;
+		const domRenderer = createDomRenderer();
+		const template = `<{{ tag | e( 'html_tag' ) }}></{{ tag | e( 'html_tag' ) }}>`;
+
+		domRenderer.register( 'test-template', template );
+
+		// Act.
+		const result = await domRenderer.render( 'test-template', { tag: 'a' } );
+
+		// Assert.
+		expect( result ).toBe( '<div></div>' );
+	} );
 } );

package/src/renderers/create-dom-renderer.ts

@@ -18,29 +18,20 @@ export function createDomRenderer(): DomRenderer {
 	};
 }
 
+/**
+ * PHP (`Utils::get_allowed_html_wrapper_tags()`) is the single source of truth for this
+ * list; it's localized via `elementorCommon.config`. If it's ever missing, fail closed
+ * (no tags allowed) rather than fall back to a second hardcoded copy that could drift.
+ */
+function getAllowedHtmlWrapperTags(): readonly string[] {
+	return window.elementorCommon?.config?.allowedHTMLWrapperTags ?? [];
+}
+
 function escapeHtmlTag( value: string ) {
-	const allowedTags = [
-		'a',
-		'article',
-		'aside',
-		'button',
-		'div',
-		'footer',
-		'h1',
-		'h2',
-		'h3',
-		'h4',
-		'h5',
-		'h6',
-		'header',
-		'main',
-		'nav',
-		'p',
-		'section',
-		'span',
-	];
-
-	return allowedTags.includes( value ) ? value : 'div';
+	const allowedTags = getAllowedHtmlWrapperTags();
+	const normalizedTag = value?.toLowerCase?.() ?? '';
+
+	return allowedTags.includes( normalizedTag ) ? value : 'div';
 }
 
 function escapeURL( value: string ) {