UICHKIN-421: Only certain HTML tags should be rendered when displayin…

…g staff slips

CHANGELOG.md

@@ -8,6 +8,7 @@
 * UI tests replacement with RTL/Jest for Scan component. Refs UICHKIN-289.
 * Add support for displaySummary token for Staff Slips. Refs UICHKIN-415.
 * Remove DST boundary adjustment for item return time. Refs UICHKIN-420.
+* Only certain HTML tags should be rendered when displaying staff slips. Refs UICHKIN-421.
 
 ## [9.0.1] (https://github.com/folio-org/ui-checkin/tree/v9.0.1) (2023-10-23)
 [Full Changelog](https://github.com/folio-org/ui-checkin/compare/v9.0.0...v9.0.1)

package.json

@@ -94,6 +94,7 @@
   },
   "dependencies": {
     "dateformat": "^2.0.0",
+    "dompurify": "^3.0.9",
     "final-form": "^4.19.1",
     "html-to-react": "^1.3.3",
     "inactivity-timer": "^1.0.0",

src/components/ComponentToPrint/ComponentToPrint.js

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import HtmlToReact, { Parser } from 'html-to-react';
 import Barcode from 'react-barcode';
+import * as DOMPurify from 'dompurify';
+
 import { buildTemplate } from '../../util';
 
 export const shouldProcessNode = node => node.name === 'barcode';
@@ -39,7 +41,7 @@ class ComponentToPrint extends React.Component {
     const {
       dataSource,
     } = this.props;
-    const componentStr = this.template(dataSource);
+    const componentStr = DOMPurify.sanitize(this.template(dataSource));
     const Component = this.parser.parseWithInstructions(componentStr, () => true, this.rules) || null;
 
     return (

src/components/ComponentToPrint/ComponentToPrint.test.js

@@ -1,5 +1,6 @@
 /* eslint-disable max-classes-per-file */
 import Barcode from 'react-barcode';
+import * as DOMPurify from 'dompurify';
 
 import {
   render,
@@ -30,6 +31,9 @@ jest.mock('../../util', () => ({
   buildTemplate: jest.fn(Template => (data) => (Template ? <Template {...data} /> : null)),
 }));
 jest.mock('react-barcode', () => jest.fn(() => null));
+jest.mock('dompurify', () => ({
+  sanitize: jest.fn((data) => (data)),
+}));
 
 describe('ComponentToPrint', () => {
   const buttonText = 'Test button string';