sanitized text should have target attribute in links (#1463)

* sanitized text should have target attribute in links

* catering comments

* correcting test case

* catering comments

---------

Co-authored-by: Shivam Agarwal <shivama@adobe.com>

Author: im-shiv

it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/text/basic/.content.xml

@@ -115,6 +115,18 @@
                         jcr:primaryType="nt:unstructured"
                         click="[testTextImportData()]"/>
             </button>
+            <text_637944566
+                    jcr:created="{Date}2024-05-16T11:23:14.686+05:30"
+                    jcr:createdBy="admin"
+                    jcr:lastModified="{Date}2024-05-16T11:23:32.032+05:30"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="Text"
+                    sling:resourceType="forms-components-examples/components/form/text"
+                    fieldType="plain-text"
+                    name="text_637944566"
+                    textIsRich="true"
+                    value="'&lt;p>&lt;b>&lt;i>&lt;u>Hello1,&lt;/u>&lt;/i>&lt;/b> &lt;sub>Hello2&lt;/sub>, &lt;sup>Hello3&lt;/sup>&lt;/p>&#xa;&lt;p>&lt;a target=&quot;_blank&quot; href=&quot;http://www.google.com&quot; title=&quot;sample link&quot;>Hello4&lt;/a>, &lt;a id=&quot;anchor&quot;>&lt;/a>Hello5, ©&lt;/p>&#xa;&lt;p style=&quot;text-align: left;&quot;>sample text&lt;/p>&#xa;&lt;p style=&quot;text-align: left;&quot;>&amp;nbsp;&lt;/p>&#xa;&lt;table height=&quot;89&quot; width=&quot;67&quot; border=&quot;2&quot; cellspacing=&quot;0&quot; cellpadding=&quot;1&quot;>&#xa;&lt;caption>sample table&lt;/caption>&#xa;&lt;tbody>&lt;tr>&lt;th scope=&quot;col&quot;>Header1&lt;/th>&#xa;&lt;th scope=&quot;col&quot;>Header2&lt;/th>&#xa;&lt;th scope=&quot;col&quot;>Header3&lt;/th>&#xa;&lt;/tr>&lt;tr>&lt;td>Cell1&lt;/td>&#xa;&lt;td>Cell2&lt;/td>&#xa;&lt;td>Cell3&lt;/td>&#xa;&lt;/tr>&lt;/tbody>&lt;/table>&#xa;&lt;h2>&lt;span class=&quot;bold&quot;>Section Title&lt;/span>&lt;/h2>&#xa;&lt;p style=&quot;text-align: right;&quot;>right-aligned text&lt;/p>&#xa;&lt;ul>&#xa;&lt;li>item one&lt;/li>&#xa;&lt;/ul>&#xa;&lt;ol>&#xa;&lt;li>ordered item one&lt;/li>&#xa;&lt;/ol>&#xa;&lt;p>Paragraph start&lt;/p>&#xa;&lt;p style=&quot;margin-left: 40px;&quot;>Span Test&lt;/p>&#xa;&lt;p style=&quot;margin-left: 40px;&quot;>&amp;nbsp;&lt;/p>&#xa;'"/>
         </guideContainer>
     </jcr:content>
 </jcr:root>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/text/v1/text/clientlibs/site/js/textview.js

@@ -70,7 +70,36 @@
             updateValue(value) {
                 // html sets undefined value as undefined string in input value, hence this check is added
                 let actualValue = typeof value === "undefined" ? "" :  value;
-                const sanitizedValue = window.DOMPurify ? window.DOMPurify.sanitize(actualValue) : actualValue;
+
+                // Custom configuration for DOMPurify for RTE content
+                const cleanHTML = (dirtyHTML) => {
+                    // Specify the allowed tags and attributes
+                    const allowedTags = [
+                        'b', 'strong', 'caption', 'i', 'em', 'u',
+                        'sub', 'sup', 'small', 'blockquote',
+                        'ul', 'ol', 'li', 'a', 'img',
+                        'table', 'tbody', 'tr', 'td', 'th',
+                        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+                        'br', 'p', 'span'
+                    ];
+                    const allowedAttributes = [
+                        'href', 'target', 'rel', '_rte_href',
+                        'src', 'alt' , 'style', '_rte_a_id_repl',
+                        'class', 'id', 'title', 'colspan', 'rowspan',
+                        'cellPadding', 'cellSpacing', 'border', 'width', 'height', 'scope'
+                    ];
+
+                    // Sanitize the HTML
+                    const sanitizedHTML = window.DOMPurify ? window.DOMPurify.sanitize(dirtyHTML, {
+                        ALLOWED_TAGS: allowedTags,
+                        ALLOWED_ATTR: allowedAttributes,
+                    }) : dirtyHTML;
+
+                    return sanitizedHTML;
+                };
+
+                const sanitizedValue = cleanHTML(actualValue);
+
                 // since there is no widget for textview, the innerHTML is being changed
                 if (this.element.children[0]) {
                     this.element.children[0].innerHTML = sanitizedValue;

ui.tests/test-module/specs/text/text.runtime.cy.js

@@ -107,12 +107,26 @@
 
      it(" prefill of static text using explicit dataRef, name bindings is not supported", () => {
          const [id, fieldView] = Object.entries(formContainer._fields)[3];
-         const [buttonId, buttonFieldView] = Object.entries(formContainer._fields)[5];
+         const [buttonId, buttonFieldView] = Object.entries(formContainer._fields)[6];
          const model = formContainer._model.getElement(id);
          cy.get(`#${buttonId} button`).should("be.visible").click().then(() => {
              expect(model.value, " Text model should import data").contains("prefilled");
              cy.get(`#${id}`).contains("prefilled");
          });
      });
 
+     it("text hyperlink should have target attribute in runtime", () => {
+         const [id] = Object.entries(formContainer._fields)[4];
+         cy.get(`#${id}`).find('a').should('have.attr', 'href', 'http://www.google.com') // Ensure the link has the correct href
+             .should('have.attr', 'target', '_blank') // Ensure the link opens in a new tab
+             .should('have.attr', 'title', 'sample link');
+         cy.get(`#${id}`).find('p').eq(2).should('have.attr', 'style');
+         cy.get(`#${id}`).find('table').should('have.attr', 'cellpadding', '1')
+             .should('have.attr', 'cellspacing', '0')
+             .should('have.attr', 'border', '2')
+             .should('have.attr', 'width', '67')
+             .should('have.attr', 'height', '89');
+         cy.get(`#${id}`).find('caption');
+     });
+
  })