From b7250dbcf5fdebc8ffcf09c8000831076e2ef02b Mon Sep 17 00:00:00 2001
From: Dmitriy-Litvinenko <Dmitriy_Litvinenko@epam.com>
Date: Tue, 19 Mar 2024 19:33:13 +0200
Subject: [PATCH] UIREQ-1080: Only certain HTML tags should be rendered when
 displaying staff slips

---
 CHANGELOG.md                                             | 4 ++++
 package.json                                             | 1 +
 src/components/ComponentToPrint/ComponentToPrint.js      | 5 +++--
 src/components/ComponentToPrint/ComponentToPrint.test.js | 3 +++
 src/routes/RequestsRoute.js                              | 4 +++-
 5 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 839dbb35..3fa6fa5c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change history for ui-requests
 
+## [9.0.2] in progress
+
+* Only certain HTML tags should be rendered when displaying staff slips. Refs UIREQ-1080.
+
 ## [9.0.1](https://github.com/folio-org/ui-requests/tree/v9.0.1) (2023-12-04)
 [Full Changelog](https://github.com/folio-org/ui-requests/compare/v9.0.0...v9.0.1)
 
diff --git a/package.json b/package.json
index 143f38eb..b121af06 100644
--- a/package.json
+++ b/package.json
@@ -175,6 +175,7 @@
     "regenerator-runtime": "^0.13.9"
   },
   "dependencies": {
+    "dompurify": "^3.0.9",
     "final-form": "^4.20.7",
     "html-to-react": "^1.3.3",
     "lodash": "^4.17.4",
diff --git a/src/components/ComponentToPrint/ComponentToPrint.js b/src/components/ComponentToPrint/ComponentToPrint.js
index 22134cab..41883605 100644
--- a/src/components/ComponentToPrint/ComponentToPrint.js
+++ b/src/components/ComponentToPrint/ComponentToPrint.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import HtmlToReact, { Parser } from 'html-to-react';
 import Barcode from 'react-barcode';
+import HtmlToReact, { Parser } from 'html-to-react';
+import { sanitize } from 'dompurify';
 
 const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
 const rules = [
@@ -19,7 +20,7 @@ const rules = [
 const parser = new Parser();
 
 const ComponentToPrint = ({ dataSource, templateFn }) => {
-  const componentStr = templateFn(dataSource);
+  const componentStr = sanitize(templateFn(dataSource));
   const Component = parser.parseWithInstructions(componentStr, () => true, rules) || null;
 
   return Component;
diff --git a/src/components/ComponentToPrint/ComponentToPrint.test.js b/src/components/ComponentToPrint/ComponentToPrint.test.js
index 47eed41d..23bdd1e8 100644
--- a/src/components/ComponentToPrint/ComponentToPrint.test.js
+++ b/src/components/ComponentToPrint/ComponentToPrint.test.js
@@ -14,6 +14,9 @@ const testIds = {
 jest.mock('react-barcode', () => {
   return jest.fn().mockImplementation(() => <div data-testid={testIds.barcode} />);
 });
+jest.mock('dompurify', () => ({
+  sanitize: jest.fn((data) => (data)),
+}));
 
 describe('ComponentToPrint', () => {
   const templateFnMock = jest.fn();
diff --git a/src/routes/RequestsRoute.js b/src/routes/RequestsRoute.js
index a66d786d..8e39c325 100644
--- a/src/routes/RequestsRoute.js
+++ b/src/routes/RequestsRoute.js
@@ -14,6 +14,8 @@ import {
   FormattedMessage,
   injectIntl,
 } from 'react-intl';
+import { sanitize } from 'dompurify';
+
 import {
   AppIcon,
   stripesConnect,
@@ -1000,7 +1002,7 @@ class RequestsRoute extends React.Component {
   getPrintTemplate() {
     const staffSlips = get(this.props.resources, 'staffSlips.records', []);
     const pickSlip = staffSlips.find(slip => slip.name.toLowerCase() === pickSlipType);
-    return get(pickSlip, 'template', '');
+    return sanitize(get(pickSlip, 'template', ''));
   }
 
   handleFilterChange = ({ name, values }) => {