UIREQ-1080: Only certain HTML tags should be rendered when displaying…

… staff slips

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)
 

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",

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;

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();

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 }) => {