Merge pull request #144 from contentstack/fix/dx-2192-html-injection

Author: harshithad0703

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 
-## [1.3.18](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.17) (2025-02-17)
+## [1.3.19](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.19) (2025-02-24)
+ - Fix: Added fix for html injection in keys and values of attributes
+ 
+## [1.3.18](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.18) (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)

__test__/attributes-to-string.test.ts

@@ -49,5 +49,92 @@ describe('Attributes to String', () => {
         expect(resultString).toEqual(' style="text-align:left; " rows="4" cols="2" colWidths="250, 250"')
         done()
     })
+    it('Should rignore attributes with forbidden characters in keys and values', done => {
+        const attr = {
+            "style": {
+                "text-align": "left"
+            },
+            "rows": 4,
+            "cols": 2,
+            "colWidths": [250, 250],
+            "<ls": "\"></p><h1>test</h1><p class=\"",
+            "\"></p><h1>test</h1><p class=\"": 1
+        } as Attributes;
+
+        const resultString = attributeToString(attr);
+
+        expect(resultString).toEqual(' style=\"text-align:left; \" rows=\"4\" cols=\"2\" colWidths=\"250, 250\"')
+        done();
+    });
+    it('Should handle object attribute values correctly', done => {
+        const attr = {
+            "style": {
+                "color": "red",
+                "font-size": "14px"
+            }
+        } as Attributes;
+
+        const resultString = attributeToString(attr);
+
+        expect(resultString).toEqual(' style="color:red; font-size:14px; "');
+        done();
+    });
+    it('Should convert arrays into comma-separated values', done => {
+        const attr = {
+            "data-values": [10, 20, 30]
+        } as Attributes;
+
+        const resultString = attributeToString(attr);
+
+        expect(resultString).toEqual(' data-values="10, 20, 30"');
+        done();
+    });
+    it('Should handle special characters in values properly', done => {
+        const attr = {
+            "title": 'This & That > Those < Them "Quoted"',
+            "description": "Hello <script>alert(xss)</script>"
+        } as Attributes;
+
+        const resultString = attributeToString(attr);
+
+        expect(resultString).toEqual(' title="This &amp; That &gt; Those &lt; Them &quot;Quoted&quot;" description="Hello &lt;script&gt;alert(xss)&lt;/script&gt;"');
+        done();
+    });
+
+    it('Should handle mixed types of values properly', done => {
+        const attr = {
+            "rows": 5,
+            "isEnabled": true,
+            "ids": [101, 102],
+            "style": { "margin": "10px", "padding": "5px" }
+        } as Attributes;
+
+        const resultString = attributeToString(attr);
+
+        expect(resultString).toEqual(' rows="5" isEnabled="true" ids="101, 102" style="margin:10px; padding:5px; "');
+        done();
+    });
+    it('Should sanitize both keys and values to prevent HTML injection', done => {
+        const attr = {
+            "<script>alert('key')</script>": "test",
+            "safeKey": "<script>alert(xss)</script>"
+        } as Attributes;
+
+        const resultString = attributeToString(attr);
+
+        expect(resultString).toEqual(' safeKey="&lt;script&gt;alert(xss)&lt;/script&gt;"');
+        done();
+    });
+    it('Should ignore attributes with forbidden characters in keys', done => {
+        const attr = {
+            "validKey": "safeValue",
+            'in"valid': "should be ignored",
+            "another>invalid": "should also be ignored"
+        } as Attributes;
+
+        const resultString = attributeToString(attr);
 
+        expect(resultString).toEqual(' validKey="safeValue"');
+        done();
+    });
 })

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

@@ -24,7 +24,7 @@ const styleObjHtml = "<h1 style=\"text-align:justify;\">heading1</h1><h2 style=\
 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>"
+const escapeHtml = "<p>&lt;p&gt;Welcome to Contentstack! &lt;script&gt;console.log(/&quot;Hello from Contentstack!/&quot;);&lt;/script&gt; Explore our platform to create, manage, and publish content seamlessly.&lt;/p&gt;</p>"
 
 export {
     h1Html,