Merge pull request #139 from contentstack/fix/dx-1771-html-injection-fix

dx 1771 html injection fix

Author: harshithad0703

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## [1.3.18](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.17) (2025-02-17)
+ - Fix: Added fix for html injection
+ 
 ## [1.3.17](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.17) (2025-02-11)
  - Enh: updateAssetURLForGQL update for multilpe entries
  - Fix: Added support of  br tag (\n) after just enter

__test__/json-to-html.test.ts

@@ -33,7 +33,8 @@ import {
     orderListJson2,
     testJsonRte,
     testJsonAsset,
-    embeddedAssetAsLinkJsonEntry} from './mock/json-element-mock'
+    embeddedAssetAsLinkJsonEntry,
+    escapeJsonHtml } from './mock/json-element-mock'
 import {
     blockquoteHtml,
     codeHtml,
@@ -60,7 +61,8 @@ import {
     styleObjHtml, 
     referenceObjHtml,
     referenceObjHtmlBlock,
-    imagetags} from './mock/json-element-mock-result'
+    imagetags,
+    escapeHtml } from './mock/json-element-mock-result'
 describe('Node parser paragraph content', () => {
     it('Should accept proper values', done => {
         const entry = { uid: 'uid'}
@@ -122,6 +124,15 @@ describe('Node parser paragraph content', () => {
         expect(entry.rich_text_editor).toEqual([paragraphHtml])
         done()
     })
+
+    it('Should render Json To html',  done => {
+        const entry = {...escapeJsonHtml}
+
+        jsonToHTML({entry, paths: ['rich_text_editor']})
+
+        expect(entry.rich_text_editor).toEqual(escapeHtml)
+        done()
+    })
 })
 
 

__test__/mock/json-element-mock-result.ts

@@ -23,8 +23,8 @@ const classAndIdAttrsHtml = "<a class=\"class_a\" id=\"id_p\" href=\"LINK.com\">
 const styleObjHtml = "<h1 style=\"text-align:justify;\">heading1</h1><h2 style=\"text-align:left;\">heading2</h2><h3 style=\"text-align:right;\">heading3</h3><h4 style=\"text-align:justify;\">heading4</h4><h5 style=\"text-align:justify;\">heading5</h5><h6 style=\"text-align:justify;\">heading6</h6>"
 const referenceObjHtml = "<p><a class=\"embedded-entry redactor-component block-entry\" href=\"/test\" target=\"_self\">Embed entry as a link</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"/entry-3\" target=\"_blank\">Open entry as a link in new tab</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"/entry-2\" target=\"_self\">Bold entry</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"/entry-4\" target=\"_blank\"><strong>Bold entry open in new tab</strong></a></p>"
 const referenceObjHtmlBlock = "<p><a class=\"embedded-entry redactor-component block-entry\" href=\"/Test\" target=\"_self\">Embed entry as a link</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_blank\">Embed entry as a link open in new tab</a></p><ul><li><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_self\">Entry as a link</a></li><li><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_blank\">Open entry as a link in new tab</a></li><li><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_self\"><strong><u>Entry as a link bold</u></strong></a></li><li><a class=\"embedded-entry redactor-component block-entry\" href=\"khjgf\" target=\"_blank\"><strong><u>Open bold entry as a link in new tab </u></strong></a></li><li><a href=\"https://\" target=\"_self\"><strong><u>Link URL</u></strong></a></li><li><a href=\"https://\" target=\"_blank\"><strong><u>Open link in new tab</u></strong></a></li></ul>"
-
 const imagetags = "<figure style=\"text-align:right;max-width:137px;float:right;width:137px;max-height:257px;height:257px;\"><a href=\"https://batman.com\" target=\"_blank\"><img asset_uid=\"asset-UID\" class=\"embedded-asset\" src=\"https://images.contentstack.io/v3/assets/api-key/asset-UID/random-uid/batman.png\" alt=\"batman\" target=\"_blank\" style=\"text-align:right;max-width:137px;float:right;width:137px;max-height:257px;height:257px;\" /></a><figcaption>The Batman</figcaption></figure>"
+const escapeHtml = "<p>&lt;p&gt;Welcome to Contentstack! &lt;script&gt;console.log(/\"Hello from Contentstack!/\");&lt;/script&gt; Explore our platform to create, manage, and publish content seamlessly.&lt;/p&gt;</p>"
 
 export {
     h1Html,
@@ -53,5 +53,5 @@ export {
     referenceObjHtmlBlock,
     imagetags,
     paragraphHtmlWithNewLine,
-
+    escapeHtml
 }

__test__/mock/json-element-mock.ts

@@ -2394,6 +2394,33 @@ const testJsonAsset={
     "_version": 22
   }
 }
+
+const escapeJsonHtml = {
+  title: 'entry and assets',
+  url: '/entry-and-assets',
+  rich_text_editor: {
+    uid: "uid",
+    _version: 13,
+    attrs: {},
+    children: [
+        {
+            type: "p",
+            attrs: {},
+            uid: "0a1b5676aa510e5a",
+            children: [
+                {
+                    text: '<p>Welcome to Contentstack! <script>console.log(/"Hello from Contentstack!/");</script> Explore our platform to create, manage, and publish content seamlessly.</p>'
+                }
+            ]
+        }
+    ],
+    type: "doc"
+},
+  locale: 'en-us',
+  _in_progress: false,
+  uid: 'asset_uid_10',
+}
+
 export { 
   h1Json,
   h2Json,
@@ -2432,5 +2459,6 @@ export {
   orderListJson2,
   testJsonRte,
   testJsonAsset,
-  paragraphEntryWithNewline
+  paragraphEntryWithNewline,
+  escapeJsonHtml
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentstack/utils",
-  "version": "1.3.17",
+  "version": "1.3.18",
   "description": "Contentstack utilities for Javascript",
   "main": "dist/index.es.js",
   "types": "dist/types/index.d.ts",

package.json

@@ -42,7 +42,7 @@ export function enumerateContents(
 }
 
 export function textNodeToHTML(node: TextNode, renderOption: RenderOption): string {
-  let text = node.text;
+  let text = escapeHtml(node.text);
   if (node.classname || node.id) {
     text = (renderOption[MarkType.CLASSNAME_OR_ID] as RenderMark)(text, node.classname, node.id);
   }
@@ -158,3 +158,10 @@ function nodeToHTML(
     }
   }
 }
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}