From d7cdf6f84b44dca5b71cc758a2de72aac9dba261 Mon Sep 17 00:00:00 2001
From: Rishabh Rathod <rishabh.rathod@appsmith.com>
Date: Thu, 25 Nov 2021 16:22:40 +0530
Subject: [PATCH] fix: Add escaping special characters before JSON.parse
 (#9293)

* Add escaping special characters before JSON.parse
---
 app/client/.eslintrc.json                          |  3 ++-
 app/client/src/widgets/ListWidget/widget/index.tsx | 10 ++++++----
 app/client/src/widgets/WidgetUtils.test.ts         | 10 ++++++++++
 app/client/src/widgets/WidgetUtils.ts              | 10 ++++++++++
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/app/client/.eslintrc.json b/app/client/.eslintrc.json
index 406a0da28d..7b2ab9a77a 100644
--- a/app/client/.eslintrc.json
+++ b/app/client/.eslintrc.json
@@ -36,7 +36,8 @@
     "react/jsx-fragments": "error",
     "react/jsx-no-useless-fragment": "error",
     "sort-destructure-keys/sort-destructure-keys": ["error", {"caseSensitive": false}],
-    "no-console": "warn"
+    "no-console": "warn",
+    "no-debugger": "warn"
   },
   "settings": {
     "import/resolver": {
diff --git a/app/client/src/widgets/ListWidget/widget/index.tsx b/app/client/src/widgets/ListWidget/widget/index.tsx
index 6c36b53b95..8a282b1f94 100644
--- a/app/client/src/widgets/ListWidget/widget/index.tsx
+++ b/app/client/src/widgets/ListWidget/widget/index.tsx
@@ -36,6 +36,7 @@ import { ValidationTypes } from "constants/WidgetValidation";
 import derivedProperties from "./parseDerivedProperties";
 import { DSLWidget } from "widgets/constants";
 import { entityDefinitions } from "utils/autocomplete/EntityDefinitions";
+import { escapeSpecialChars } from "../../WidgetUtils";
 
 const LIST_WIDGEY_PAGINATION_HEIGHT = 36;
 class ListWidget extends BaseWidget<ListWidgetProps<WidgetProps>, WidgetState> {
@@ -446,15 +447,16 @@ class ListWidget extends BaseWidget<ListWidgetProps<WidgetProps>, WidgetState> {
         ) {
           const { jsSnippets } = getDynamicBindings(propertyValue);
           const listItem = this.props.listData?.[itemIndex] || {};
-
+          const stringifiedListItem = JSON.stringify(listItem);
+          const escapedStringifiedListItem = escapeSpecialChars(
+            stringifiedListItem,
+          );
           const newPropertyValue = jsSnippets.reduce(
             (prev: string, next: string) => {
               if (next.indexOf("currentItem") > -1) {
                 return (
                   prev +
-                  `{{((currentItem) => { ${next}})(JSON.parse('${JSON.stringify(
-                    listItem,
-                  )}'))}}`
+                  `{{((currentItem) => { ${next}})(JSON.parse('${escapedStringifiedListItem}'))}}`
                 );
               }
               return prev + `{{${next}}}`;
diff --git a/app/client/src/widgets/WidgetUtils.test.ts b/app/client/src/widgets/WidgetUtils.test.ts
index 98b292734e..21f4598fdc 100644
--- a/app/client/src/widgets/WidgetUtils.test.ts
+++ b/app/client/src/widgets/WidgetUtils.test.ts
@@ -1,5 +1,6 @@
 import { ButtonVariantTypes } from "components/constants";
 import { getTheme, ThemeMode } from "selectors/themeSelectors";
+import { escapeSpecialChars } from "./WidgetUtils";
 import {
   getCustomTextColor,
   getCustomBackgroundColor,
@@ -121,4 +122,13 @@ describe("validate widget utils button style functions", () => {
     const result6 = getCustomHoverColor(theme, ButtonVariantTypes.TERTIARY);
     expect(result6).toStrictEqual(expected6);
   });
+
+  it("validate escaping special characters", () => {
+    const testString = `a\nb\nc
+hello! how are you?
+`;
+    const result = escapeSpecialChars(testString);
+    const expectedResult = "a\nb\nc\nhello! how are you?\n";
+    expect(result).toStrictEqual(expectedResult);
+  });
 });
diff --git a/app/client/src/widgets/WidgetUtils.ts b/app/client/src/widgets/WidgetUtils.ts
index 11119bb2c6..7d58253e93 100644
--- a/app/client/src/widgets/WidgetUtils.ts
+++ b/app/client/src/widgets/WidgetUtils.ts
@@ -140,3 +140,13 @@ export const getCustomBorderColor = (
     ? backgroundColor
     : "none";
 };
+
+export const escapeSpecialChars = (stringifiedJSONObject: string) => {
+  return stringifiedJSONObject
+    .replace(/\\n/g, "\\\\n") // new line char
+    .replace(/\\b/g, "\\\\b") //
+    .replace(/\\t/g, "\\\\t") // tab
+    .replace(/\\f/g, "\\\\f") //
+    .replace(/\\/g, "\\\\") //
+    .replace(/\\r/g, "\\\\r"); //
+};