TASK: Use CSS.escape to handle json node address in query selector

neos · Sep 26, 2024 · 8c4f388 · 8c4f388
1 parent 4c35f7c
commit 8c4f388
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/packages/neos-ui-guest-frame/src/dom.js b/packages/neos-ui-guest-frame/src/dom.js
@@ -54,14 +54,14 @@ export const findAllPropertiesInGuestFrame = () =>
 //
 // Find all DOM nodes that represent a particular node property in the guest frame
 //
-export const findAllOccurrencesOfNodePropertyInGuestFrame = (contextPath, propertyName) => findAllInGuestFrame(`[data-__neos-editable-node-contextpath="${contextPath}"][data-__neos-property="${propertyName}"]`);
+export const findAllOccurrencesOfNodePropertyInGuestFrame = (contextPath, propertyName) => findAllInGuestFrame(`[data-__neos-editable-node-contextpath="${CSS.escape(contextPath)}"][data-__neos-property="${CSS.escape(propertyName)}"]`);
 
 //
 // Find all DOM nodes that represent CR node properties in the guest frame
 //
 export const findRelativePropertiesInGuestFrame = contentDomNode =>
     [].slice.call(contentDomNode.querySelectorAll(
-        `[data-__neos-property][data-__neos-editable-node-contextpath="${contentDomNode.getAttribute('data-__neos-node-contextpath')}"]`
+        `[data-__neos-property][data-__neos-editable-node-contextpath="${CSS.escape(contentDomNode.getAttribute('data-__neos-node-contextpath'))}"]`
     )).concat(...(
         contentDomNode.hasAttribute('data-__neos-property') ?
             [contentDomNode] : []
@@ -71,19 +71,19 @@ export const findRelativePropertiesInGuestFrame = contentDomNode =>
 // Find a specific DOM node that represents a CR node in the guest frame
 //
 export const findNodeInGuestFrame = (contextPath, fusionPath) => fusionPath ? findInGuestFrame(
-    `[data-__neos-node-contextpath="${contextPath}"][data-__neos-fusion-path="${fusionPath}"]`
+    `[data-__neos-node-contextpath="${CSS.escape(contextPath)}"][data-__neos-fusion-path="${CSS.escape(fusionPath)}"]`
 ) : findInGuestFrame(
-    `[data-__neos-node-contextpath="${contextPath}"]`
+    `[data-__neos-node-contextpath="${CSS.escape(contextPath)}"]`
 );
 
 //
 // Find all DOM nodes that represent a CR node identified by context path and
 // fusion path in the guest frame
 //
 export const findAllOccurrencesOfNodeInGuestFrame = (contextPath, fusionPath) => fusionPath ? findAllInGuestFrame(
-    `[data-__neos-node-contextpath="${contextPath}"][data-__neos-fusion-path="${fusionPath}"]`
+    `[data-__neos-node-contextpath="${CSS.escape(contextPath)}"][data-__neos-fusion-path="${CSS.escape(fusionPath)}"]`
 ) : findAllInGuestFrame(
-    `[data-__neos-node-contextpath="${contextPath}"]`
+    `[data-__neos-node-contextpath="${CSS.escape(contextPath)}"]`
 );
 
 //

diff --git a/packages/neos-ui/src/manifest.js b/packages/neos-ui/src/manifest.js
@@ -422,7 +422,7 @@ manifest('main', {}, (globalRegistry, {routes}) => {
         const tempNodeInGuest = getGuestFrameDocument().createElement(wrapTagName);
         tempNodeInGuest.innerHTML = renderedContent;
         const contentElement = tempNodeInGuest
-            .querySelector(`[data-__neos-node-contextpath="${contextPath}"]`);
+            .querySelector(`[data-__neos-node-contextpath="${CSS.escape(contextPath)}"]`);
 
         if (!contentElement) {
             console.error(`!!! Content Element (rendered out-of-band) with context path "${contextPath}" not found in returned HTML from server (which you see below) - Reloading the full page!`);
@@ -527,7 +527,7 @@ manifest('main', {}, (globalRegistry, {routes}) => {
         const tempNodeInGuest = getGuestFrameDocument().createElement('div');
         tempNodeInGuest.innerHTML = renderedContent;
         const contentElement = tempNodeInGuest
-            .querySelector(`[data-__neos-node-contextpath="${contextPath}"]`);
+            .querySelector(`[data-__neos-node-contextpath="${CSS.escape(contextPath)}"]`);
 
         if (!contentElement) {
             console.error(`!!! Content Element (reloaded out-of-band) with context path "${contextPath}" not found in returned HTML from server (which you see below) - Reloading the full page!`);