Merge pull request #1150 from folio-org/UIREQ-1080

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

CHANGELOG.md

@@ -19,6 +19,7 @@
 * Increase code coverage for src/index.js by Jest/RTL tests. Refs UIREQ-1047.
 * Add displaySummary field for Requests csv export. Refs UIREQ-1068.
 * Add support for displaySummary token for Staff Slips. Refs UIREQ-1067.
+* 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

@@ -177,6 +177,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,
@@ -1046,7 +1048,7 @@ class RequestsRoute extends React.Component {
     const slipTypeInLowerCase = slipType.toLowerCase();
     const slipTemplate = staffSlips.find(slip => slip.name.toLowerCase() === slipTypeInLowerCase);
 
-    return get(slipTemplate, 'template', '');
+    return sanitize(get(slipTemplate, 'template', ''));
   }
 
   handleFilterChange = ({ name, values }) => {