UICIRC-1070: Only certain HTML tags should be rendered when displayin…

…g staff slips
folio-org · Mar 19, 2024 · 00751ee · 00751ee
1 parent d71bec3
commit 00751ee
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@
 * Create a new permission "Settings (Circulation): Can view staff slips". Refs UICIRC-848.
 * Add `displaySummary` token for patron notice templates and for staff slips templates. Refs UICIRC-1059.
 * Fix that Save & close button is missing in the circulation forms. Refs UICIRC-1064.
+* Only certain HTML tags should be rendered when displaying staff slips. Refs UICIRC-1070.
 
 ## [9.0.4](https://github.com/folio-org/ui-circulation/tree/v9.0.4) (2024-02-22)
 [Full Changelog](https://github.com/folio-org/ui-circulation/compare/v9.0.3...v9.0.4)

diff --git a/package.json b/package.json
@@ -367,6 +367,7 @@
   "dependencies": {
     "@folio/stripes-template-editor": "^3.2.0",
     "codemirror": "^5.61.1",
+    "dompurify": "^3.0.9",
     "final-form": "^4.18.2",
     "final-form-arrays": "^3.0.1",
     "final-form-set-field-data": "^1.0.2",

diff --git a/...atronNotices/components/ViewSections/PatronNoticeEmailSection/PatronNoticeEmailSection.js b/...atronNotices/components/ViewSections/PatronNoticeEmailSection/PatronNoticeEmailSection.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import HtmlToReact, { Parser } from 'html-to-react';
 import { FormattedMessage } from 'react-intl';
+import HtmlToReact, { Parser } from 'html-to-react';
+import { sanitize } from 'dompurify';
 
 import {
   Button,
@@ -26,8 +27,8 @@ const PatronNoticeEmailSection = ({ notice, locale, emailTemplate }) => {
     }
   ];
   const tokens = getTokens(locale);
-
-  const parsedEmailTemplate = parser.parseWithInstructions(emailTemplate, () => true, rules);
+  const purifyEmailTemplate = sanitize(emailTemplate);
+  const parsedEmailTemplate = parser.parseWithInstructions(purifyEmailTemplate, () => true, rules);
   const [openPreview, setOpenPreview] = useState(false);
 
   const togglePreviewDialog = () => {

diff --git a/...omponents/ViewSections/StaffSlipTemplateContentSection/StaffSlipTemplateContentSection.js b/...omponents/ViewSections/StaffSlipTemplateContentSection/StaffSlipTemplateContentSection.js
@@ -5,6 +5,7 @@ import {
   injectIntl,
 } from 'react-intl';
 import HtmlToReact, { Parser } from 'html-to-react';
+import { sanitize } from 'dompurify';
 
 import {
   Button,
@@ -35,7 +36,8 @@ const StaffSlipTemplateContentSection = ({ intl, staffSlip }) => {
     },
   ];
   const parser = new Parser();
-  const parsedEmailTemplate = parser.parseWithInstructions(template, () => true, rules);
+  const purifyTemplate = sanitize(template);
+  const parsedEmailTemplate = parser.parseWithInstructions(purifyTemplate, () => true, rules);
   const [openPreview, setOpenPreview] = useState(false);
   const togglePreviewDialog = () => {
     setOpenPreview(!openPreview);