fix: cross site script vulnerability (fix #1669) (#1741)

* test: add test for renderer

* fix: cross site script vulnerability

* chore: apply code reviews

Author: jajugoguma

README.md

@@ -15,6 +15,7 @@
 - [Browser Support](#-browser-support)
 - [Pull Request Steps](#-pull-request-steps)
 - [Contributing](#-contributing)
+- [Dependencies](#-dependencies)
 - [TOAST UI Family](#-toast-ui-family)
 - [Used By](#-used-by)
 - [License](#-license)
@@ -184,6 +185,10 @@ For more information on PR's steps, please see links in the Contributing section
 - [Commit convention](https://github.com/nhn/tui.grid/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md)
 - [Issue guideline](https://github.com/nhn/tui.grid/tree/master/.github/ISSUE_TEMPLATE)
 
+## 🔩 Dependencies
+
+* [DOMPurify](https://github.com/cure53/DOMPurify)
+
 ## 🍞 TOAST UI Family
 
 - [TOAST UI Calendar](https://github.com/nhn/tui.calendar)

packages/toast-ui.grid/cypress/integration/renderer.spec.ts

@@ -72,3 +72,16 @@ it('should apply the options to default renderer', () => {
     .should('have.attr', 'myCustom', 'my-custom')
     .should('have.attr', 'title', 'my Lee');
 });
+
+it('should render data to plain text in default renderer', () => {
+  const data = [{ tag: '<img src="" onerror="alert(123)" />' }];
+  const columns = [
+    {
+      name: 'tag',
+    },
+  ];
+
+  cy.createGrid({ data, columns });
+
+  cy.getByCls('cell-content').invoke('html').should('to.eq', '<img src="">');
+});

packages/toast-ui.grid/package-lock.json

@@ -50,6 +50,7 @@
     "@storybook/addon-notes": "^5.3.19",
     "@storybook/html": "^5.3.19",
     "@toast-ui/select-box": "^1.0.0",
+    "@types/dompurify": "^2.3.3",
     "@types/node": "^12.0.0",
     "@types/webpack-env": "^1.13.8",
     "@typescript-eslint/eslint-plugin": "^2.9.0",
@@ -81,6 +82,7 @@
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
+    "dompurify": "^2.3.9",
     "tui-date-picker": "^4.1.0",
     "tui-pagination": "^3.4.0",
     "xlsx": "^0.17.1"

packages/toast-ui.grid/package.json

@@ -1,6 +1,7 @@
 import { CellRenderer, CellRendererProps } from '@t/renderer';
 import { cls } from '../helper/dom';
 import { isFunction } from '../helper/common';
+import { sanitize } from 'dompurify';
 
 type IfEquals<X, Y, A = X, B = never> = (<T>() => T extends X ? 0 : 1) extends <T>() => T extends Y
   ? 0
@@ -69,6 +70,6 @@ export class DefaultRenderer implements CellRenderer {
   }
 
   public render(props: CellRendererProps) {
-    this.el.innerHTML = `${props.formattedValue}`;
+    this.el.innerHTML = sanitize(`${props.formattedValue}`);
   }
 }

packages/toast-ui.grid/src/renderer/default.ts

@@ -15,6 +15,7 @@ import { getText } from '../query/clipboard';
 import { convertTextToData } from '../helper/common';
 import GridEvent from '../event/gridEvent';
 import { getEventBus, EventBus } from '../event/eventBus';
+import { sanitize } from 'dompurify';
 
 interface StoreProps {
   navigating: boolean;
@@ -111,7 +112,8 @@ class ClipboardComp extends Component<Props> {
     }
 
     const { el } = this;
-    const html = clipboardData.getData('text/html');
+    const html = sanitize(clipboardData.getData('text/html'));
+
     let data;
     if (html && html.indexOf('table') !== -1) {
       // step 1: Append copied data on contenteditable element to parsing correctly table data.