IBX-10288: Fix XSS in custom tags

Author: tischsoic

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-editing.js

@@ -4,6 +4,9 @@ import { toWidget, toWidgetEditable } from '@ckeditor/ckeditor5-widget/src/utils
 
 import IbexaCustomTagCommand from './custom-tag-command';
 
+const { escapeHTML, escapeHTMLAttribute } = window.ibexa.helpers.text;
+const { dangerouslySetInnerHTML } = window.ibexa.helpers.dom;
+
 class IbexaCustomTagEditing extends Plugin {
     static get requires() {
         return [Widget];
@@ -68,18 +71,18 @@ class IbexaCustomTagEditing extends Plugin {
                 const config = downcastWriter.createUIElement('span', { 'data-ezelement': 'ezconfig' }, function (domDocument) {
                     const domElement = this.toDomElement(domDocument);
 
-                    domElement.innerHTML = Object.entries(values).reduce((total, [attribute, value]) => {
-                        // Escaping
-                        // <script>alert("Hello! I am a script!");</script> --> &lt;script&gt;alert("Hello! I am a script!");&lt;/script&gt;
-                        const stringTempNode = domDocument.createElement('div');
-                        stringTempNode.appendChild(domDocument.createTextNode(value !== null ? value : ''));
-                        const attributeValue = stringTempNode.innerHTML;
+                    const attributesHTMLCode = Object.entries(values).reduce((total, [attributeName, value]) => {
+                        const attributeValue = value ?? '';
+                        const attributeValueEscaped = escapeHTML(attributeValue);
+                        const attributeNameAttributeEscaped = escapeHTMLAttribute(attributeName);
 
-                        const ezvalue = `<span data-ezelement="ezvalue" data-ezvalue-key="${attribute}">${attributeValue}</span>`;
+                        const ezvalue = `<span data-ezelement="ezvalue" data-ezvalue-key="${attributeNameAttributeEscaped}">${attributeValueEscaped}</span>`;
 
                         return `${total}${ezvalue}`;
                     }, '');
 
+                    dangerouslySetInnerHTML(domElement, attributesHTMLCode);
+
                     return domElement;
                 });
 

src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-editing.js

@@ -5,6 +5,9 @@ import Element from '@ckeditor/ckeditor5-engine/src/view/element';
 
 import IbexaInlineCustomTagCommand from './inline-custom-tag-command';
 
+const { escapeHTML, escapeHTMLAttribute } = window.ibexa.helpers.text;
+const { dangerouslySetInnerHTML } = window.ibexa.helpers.dom;
+
 class IbexaInlineCustomTagEditing extends Plugin {
     static get requires() {
         return [Widget];
@@ -54,13 +57,17 @@ class IbexaInlineCustomTagEditing extends Plugin {
                 const config = downcastWriter.createUIElement('span', { 'data-ezelement': 'ezconfig' }, function (domDocument) {
                     const domElement = this.toDomElement(domDocument);
 
-                    domElement.innerHTML = Object.entries(values).reduce((total, [attribute, value]) => {
+                    const attributesHTMLCode = Object.entries(values).reduce((total, [attributeName, value]) => {
                         const attributeValue = value ?? '';
-                        const ezvalue = `<span data-ezelement="ezvalue" data-ezvalue-key="${attribute}">${attributeValue}</span>`;
+                        const attributeValueEscaped = escapeHTML(attributeValue);
+                        const attributeNameAttributeEscaped = escapeHTMLAttribute(attributeName);
+                        const ezvalue = `<span data-ezelement="ezvalue" data-ezvalue-key="${attributeNameAttributeEscaped}">${attributeValueEscaped}</span>`;
 
                         return `${total}${ezvalue}`;
                     }, '');
 
+                    dangerouslySetInnerHTML(domElement, attributesHTMLCode);
+
                     return domElement;
                 });