[TASK] Always wrap defVals of drop zones with htmlspecialchars (#706)

and decode htmlspecialchars in Javascript so the website admin doesn't have to worry to wrap core:customDropZone in templates.
FriendsOfTYPO3 · Aug 8, 2023 · 52524c9 · 52524c9
1 parent 6500656
commit 52524c9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/Classes/Service/ContentEditableWrapperService.php b/Classes/Service/ContentEditableWrapperService.php
@@ -349,7 +349,7 @@ public function wrapContentWithCustomDropzone(
             ),
             'data-allowed-tables' => $tables,
             'data-pid' => $pageUid,
-            'data-defvals' => json_encode($defaultValues),
+            'data-defvals' => htmlspecialchars(json_encode($defaultValues)),
         ]);
 
         $dropZone = $tagBuilder->render();

diff --git a/Documentation/ConfigureAndExtend/EmptyColumns/Index.rst b/Documentation/ConfigureAndExtend/EmptyColumns/Index.rst
@@ -46,7 +46,3 @@ The needed argument in this case are:
 * the page uid
 * the colPos of the column of the container in which the element will be placed as default value (defVals)
 * in the case of EXT:container, the uid of the parent (field: tx_container_parent) as default value (defVals)
-
-.. tip::
-
-   The Frontend Editing extension uses json_encode for defVals viewhelper argument. Depending on your template setup it could be necessary to wrap the core:customDropZone viewhelper with a f:format.htmlentities viewhelper.
diff --git a/Resources/Public/JavaScript/FrontendEditing.js b/Resources/Public/JavaScript/FrontendEditing.js
@@ -374,6 +374,25 @@ define([
             return stringArray.join('&');
         },
 
+        decodeHtmlspecialChars: function (text) {
+            var map = {
+                '&amp;': '&',
+                '&#038;': "&",
+                '&lt;': '<',
+                '&gt;': '>',
+                '&quot;': '"',
+                '&#039;': "'",
+                '&#8217;': "’",
+                '&#8216;': "‘",
+                '&#8211;': "–",
+                '&#8212;': "—",
+                '&#8230;': "…",
+                '&#8221;': '”'
+            };
+
+            return text.replace(/\&[\w\d\#]{2,5}\;/g, function(m) { return map[m]; });
+        },
+
         dragCeStart: function (ev) {
             log.info('start drag Ce', ev.currentTarget);
 
@@ -514,7 +533,7 @@ define([
                 // If the CE is dropped as first in a column, then 'target' is the page/parent uid
                 moveAfter = (moveAfter > 0) ? -moveAfter : parseInt($currentTarget.data('pid'), 10);
 
-                const dataDefvals = ev.currentTarget.getAttribute('data-defvals');
+                const dataDefvals = F.decodeHtmlspecialChars(ev.currentTarget.getAttribute('data-defvals'));
                 const parsedData = JSON.parse(dataDefvals);
                 var colPos = parsedData.colPos ?? 0;