Merge pull request #75 from contentstack/RT-360

fix: escape html entities in attr values

Author: shreya-kamble

package-lock.json

@@ -49,7 +49,6 @@
   },
   "dependencies": {
     "array-flat-polyfill": "^1.0.1",
-    "dompurify": "^3.2.3",
     "lodash": "^4.17.21",
     "lodash.clonedeep": "^4.5.0",
     "lodash.flatten": "^4.4.0",

package.json

@@ -1,8 +1,8 @@
 import kebbab from 'lodash.kebabcase'
 import isEmpty from 'lodash.isempty'
-import DOMPurify from 'dompurify'
 import {IJsonToHtmlElementTags, IJsonToHtmlOptions, IJsonToHtmlTextTags} from './types'
 import isPlainObject from 'lodash.isplainobject'
+import {replaceHtmlEntities } from './utils'
 
 const ELEMENT_TYPES: IJsonToHtmlElementTags = {
   'blockquote': (attrs: string, child: string) => {
@@ -507,7 +507,7 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
       }
       delete attrsJson['redactor-attributes']
       Object.entries(attrsJson).forEach((key) => {
-        return key[1] ? (key[1] !== '' ? (attrs += `${key[0]}="${key[1]}" `) : '') : ''
+        return key[1] ? (key[1] !== '' ? (attrs += `${key[0]}="${replaceHtmlEntities(key[1])}" `) : '') : ''
       })
       attrs = (attrs.trim() ? ' ' : '') + attrs.trim()
     }
@@ -564,7 +564,7 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string
     if(['td','th'].includes(jsonValue['type'])){
       if(jsonValue?.['attrs']?.['void']) return ''
     }
-
+ 
     attrs = (attrs.trim() ? ' ' : '') + attrs.trim()
 
     return ELEMENT_TYPES[orgType || jsonValue['type']](attrs, children,jsonValue, figureStyles)

src/toRedactor.tsx

@@ -0,0 +1,7 @@
+export function replaceHtmlEntities(str: string): string {
+    return String(str)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}

src/utils/index.ts

@@ -2005,7 +2005,8 @@ export default {
             `<iframe src=\"https://www.youtube.com/watch?v=Gw7EqoOYC9A%22%3E%3C/iframe%3E%3Cscript%3Ealert(document.cookie)%3C/script%3E%3Ciframe%20\" width=\"560\" height=\"320\" data-type=\"social-embeds\" ></iframe><iframe allowfullscreen=\"true\" src=\"https://www.youtube.com/watch?v=Gw7EqoOYC9A%22%3E%3C/iframe%3E%3Cscript%3Ealert(document.cookie)%3C/script%3E%3Ciframe%20\"></iframe>`,
             `<iframe width="560" height="320" data-type="social-embeds" ></iframe><iframe allowfullscreen=\"true\"></iframe>`,
             '<iframe src=\"www.youtube.com/watch?v=Gw7EqoOYC9A\" width=\"560\" height=\"320\" data-type=\"social-embeds\" ></iframe><iframe allowfullscreen=\"true\" src=\"www.youtube.com/embed/VD6xJq8NguY\"></iframe>',
-            `<iframe src=\"https://www.youtube.com/embed/Gw7EqoOYC9A?si=bWdnezma6qFAePQU\" width=\"560\" height=\"320\" data-type=\"social-embeds\" ></iframe><iframe allowfullscreen=\"true\" src=\"https://www.youtube.com/embed/Gw7EqoOYC9A?si=bWdnezma6qFAePQU\"></iframe>`
+            `<iframe src=\"https://www.youtube.com/embed/Gw7EqoOYC9A?si=bWdnezma6qFAePQU\" width=\"560\" height=\"320\" data-type=\"social-embeds\" ></iframe><iframe allowfullscreen=\"true\" src=\"https://www.youtube.com/embed/Gw7EqoOYC9A?si=bWdnezma6qFAePQU\"></iframe>`,
+            `<iframe src="null" width="560" height="320" title=" This is for &lt;/p&gt;testing &lt;/p&gt; purpose 'only' " data-type="social-embeds" ></iframe>`
         ],
         "json": 
         [
@@ -2168,7 +2169,19 @@ export default {
                 }
                 ],
                 "_version": 1
-            }
+            },
+            {
+                uid: "45a850acbeb949db86afe415625ad1ce",
+                type: "social-embeds",
+                attrs: {
+                  src: "null",
+                  width: 560,
+                  height: 320,
+                  title: " This is for </p>testing </p> purpose 'only' "
+                },
+                children: [{ text: "" }],
+            },
+
         ]    
 
     }

test/expectedJson.ts

@@ -273,6 +273,12 @@ describe("Testing json to html conversion", () => {
         const html = toRedactor(json);
         expect(html).toBe(expectedValue["RT-360"].html[3]);
       })
+
+      it("should escape html entities in attribute values",()=>{
+        const json = expectedValue["RT-360"].json[4]
+        const html = toRedactor(json);
+        expect(html).toBe(expectedValue["RT-360"].html[4]);
+      })
     })
 
     test('should convert numeric width to string', () => {