@elementor/editor-canvas 4.5.0-1157 → 4.5.0-1159

package/dist/index.js

@@ -2854,6 +2854,7 @@ function createDomRenderer() {
   const environment = (0, import_twing.createEnvironment)(loader);
   environment.registerEscapingStrategy(escapeHtmlTag, "html_tag");
   environment.registerEscapingStrategy(escapeURL, "full_url");
+  environment.registerEscapingStrategy(escapeJsIdentifier, "js_identifier");
   return {
     register: loader.setTemplate,
     render: environment.render
@@ -2867,6 +2868,12 @@ function escapeHtmlTag(value) {
   const normalizedTag = value?.toLowerCase?.() ?? "";
   return allowedTags.includes(normalizedTag) ? value : "div";
 }
+var JS_IDENTIFIER_PATTERN = /^[A-Za-z0-9_]+$/;
+function escapeJsIdentifier(value) {
+  const id = String(value ?? "");
+  const match = id.match(JS_IDENTIFIER_PATTERN);
+  return match?.[0] === id ? id : "";
+}
 function escapeURL(value) {
   const allowedProtocols = ["http:", "https:", "mailto:", "tel:"];
   try {

package/dist/index.mjs

@@ -2810,6 +2810,7 @@ function createDomRenderer() {
   const environment = createEnvironment(loader);
   environment.registerEscapingStrategy(escapeHtmlTag, "html_tag");
   environment.registerEscapingStrategy(escapeURL, "full_url");
+  environment.registerEscapingStrategy(escapeJsIdentifier, "js_identifier");
   return {
     register: loader.setTemplate,
     render: environment.render
@@ -2823,6 +2824,12 @@ function escapeHtmlTag(value) {
   const normalizedTag = value?.toLowerCase?.() ?? "";
   return allowedTags.includes(normalizedTag) ? value : "div";
 }
+var JS_IDENTIFIER_PATTERN = /^[A-Za-z0-9_]+$/;
+function escapeJsIdentifier(value) {
+  const id = String(value ?? "");
+  const match = id.match(JS_IDENTIFIER_PATTERN);
+  return match?.[0] === id ? id : "";
+}
 function escapeURL(value) {
   const allowedProtocols = ["http:", "https:", "mailto:", "tel:"];
   try {

package/package.json

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

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

@@ -77,6 +77,30 @@ describe( 'createDomRenderer', () => {
 			context: { url: 'javascript:alert(123)' },
 			expected: '',
 		},
+		{
+			title: 'alphanumeric element id in an alpine expression',
+			template: `x-data="{% if (id | e( 'js_identifier' )) != '' %}eTabs{{ id | e( 'js_identifier' ) }}{% else %}{}{% endif %}"`,
+			context: { id: 'tabscontainer' },
+			expected: 'x-data="eTabstabscontainer"',
+		},
+		{
+			title: 'element id with underscore in an alpine expression',
+			template: `x-data="{% if (id | e( 'js_identifier' )) != '' %}eForm{{ id | e( 'js_identifier' ) }}{% else %}{}{% endif %}"`,
+			context: { id: 'test_atomic_form_instance' },
+			expected: 'x-data="eFormtest_atomic_form_instance"',
+		},
+		{
+			title: 'element id that is a javascript expression',
+			template: `x-data="{% if (id | e( 'js_identifier' )) != '' %}eTabs{{ id | e( 'js_identifier' ) }}{% else %}{}{% endif %}"`,
+			context: { id: '=window.alert(document.domain)' },
+			expected: 'x-data="{}"',
+		},
+		{
+			title: 'element id with a hyphen',
+			template: `x-data="{% if (id | e( 'js_identifier' )) != '' %}eBackgroundVideo{{ id | e( 'js_identifier' ) }}{% else %}{}{% endif %}"`,
+			context: { id: 'foo-alert(1)' },
+			expected: 'x-data="{}"',
+		},
 	] )( 'should render template with $title', async ( { template, context, expected } ) => {
 		// Arrange.
 		const domRenderer = createDomRenderer();

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

@@ -11,6 +11,7 @@ export function createDomRenderer(): DomRenderer {
 
 	environment.registerEscapingStrategy( escapeHtmlTag, 'html_tag' );
 	environment.registerEscapingStrategy( escapeURL, 'full_url' );
+	environment.registerEscapingStrategy( escapeJsIdentifier, 'js_identifier' );
 
 	return {
 		register: loader.setTemplate,
@@ -34,6 +35,15 @@ function escapeHtmlTag( value: string ) {
 	return allowedTags.includes( normalizedTag ) ? value : 'div';
 }
 
+const JS_IDENTIFIER_PATTERN = /^[A-Za-z0-9_]+$/;
+
+function escapeJsIdentifier( value: unknown ): string {
+	const id = String( value ?? '' );
+	const match = id.match( JS_IDENTIFIER_PATTERN );
+
+	return match?.[ 0 ] === id ? id : '';
+}
+
 function escapeURL( value: string ) {
 	const allowedProtocols = [ 'http:', 'https:', 'mailto:', 'tel:' ];