@abgov/jsonforms-components 2.47.4 → 2.47.6

package/index.esm.js

@@ -14,6 +14,8 @@ import merge from 'lodash/merge';
 import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 import pluralize from 'pluralize';
+import dompurify from 'dompurify';
+import * as xss from 'xss';
 import { evaluateSync, compileSync } from '@mdx-js/mdx';
 import { Parser } from 'expr-eval-fork';
 import addErrors from 'ajv-errors';
@@ -13129,16 +13131,12 @@ const getCategoryStatus = category => {
 const getCategoryStatusBadge = category => {
   const status = getCategoryStatus(category);
   const badgeType = status === PageStatus.Complete ? 'success' : 'information';
-  return (
-    // <div style={{ paddingTop: '5px' }}>
-    jsx(GoabBadge, {
-      type: badgeType,
-      content: status,
-      ariaLabel: status,
-      icon: false
-    })
-    // </div>
-  );
+  return jsx(GoabBadge, {
+    type: badgeType,
+    content: status,
+    ariaLabel: status,
+    icon: false
+  });
 };
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
@@ -13158,7 +13156,10 @@ const CategoryRow = ({
     onKeyDown: e => e.key === 'Enter' && onClick(index),
     "data-testid": `page-ref-${index}`,
     children: [jsx("td", {
-      children: category.label
+      children: jsx("a", {
+        href: "#",
+        children: category.label
+      })
     }, `task-list-${index}-stepper-row-label`), jsx(CategoryStatus, {
       children: jsx(Center, {
         children: getCategoryStatusBadge(category)
@@ -13193,6 +13194,81 @@ const SummaryRow = ({
   });
 };
 
+const options = {
+  whiteList: {
+    html: ['lang'],
+    meta: ['name', 'content', 'charset'],
+    div: ['style', 'class'],
+    style: [],
+    a: ['href', 'title', 'target', 'style', 'class'],
+    em: [],
+    main: [],
+    footer: ['style'],
+    header: ['style'],
+    head: [],
+    abbr: ['title', 'style'],
+    title: [],
+    address: ['style'],
+    area: ['shape', 'coords', 'href', 'alt', 'style'],
+    article: [],
+    blockquote: [],
+    aside: [],
+    details: [],
+    h1: [],
+    h2: [],
+    h3: [],
+    h4: [],
+    h5: [],
+    h6: [],
+    hr: [],
+    i: [],
+    img: ['src', 'alt', 'title', 'width', 'height'],
+    ins: ['datetime'],
+    li: [],
+    mark: [],
+    nav: [],
+    ol: [],
+    p: [],
+    pre: [],
+    s: [],
+    section: [],
+    small: [],
+    span: ['class', 'style'],
+    sub: [],
+    summary: [],
+    sup: [],
+    select: [],
+    optgroup: [],
+    form: [],
+    strong: [],
+    label: [],
+    strike: [],
+    table: ['width', 'border', 'align', 'valign', 'class', 'style'],
+    tbody: ['align', 'valign', 'class', 'style'],
+    body: ['class', 'style'],
+    td: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
+    tfoot: ['align', 'valign', 'class', 'style'],
+    th: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
+    thead: ['align', 'valign'],
+    tr: ['rowspan', 'align', 'valign'],
+    tt: [],
+    u: [],
+    ul: [],
+    br: [],
+    b: [],
+    option: []
+  }
+}; // Custom rules
+new xss.FilterXSS(options);
+const sanitizeHtml = dompurify.sanitize;
+dompurify.addHook('afterSanitizeAttributes', function (node) {
+  // set all elements owning target to target=_blank
+  if ('target' in node) {
+    node.setAttribute('target', '_blank');
+    node.setAttribute('rel', 'noopener noreferrer');
+  }
+});
+
 const _excluded$1 = ["type"];
 const AdditionalInstructionsRow = ({
   additionalInstructions,
@@ -13203,6 +13279,7 @@ const AdditionalInstructionsRow = ({
   const type = validTypes.includes(calloutType) ? calloutType : 'information';
   const _ref = componentProps || {},
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  const sanitizedHtml = sanitizeHtml(additionalInstructions);
   return jsx("tr", {
     children: jsx("td", {
       colSpan: 2,
@@ -13211,7 +13288,11 @@ const AdditionalInstructionsRow = ({
         mt: "xl",
         mb: "l"
       }, otherProps, {
-        children: additionalInstructions
+        children: jsx("div", {
+          dangerouslySetInnerHTML: {
+            __html: sanitizedHtml
+          }
+        })
       }))
     })
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.47.4",
+  "version": "2.47.6",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",
@@ -10,6 +10,8 @@
     "@jsonforms/core": "^3.1.0",
     "@jsonforms/react": "^3.1.0",
     "react": "^18.0.0",
+    "dompurify": "^3.2.4",
+    "xss": "^1.0.15",
     "ajv": "^8.6.1",
     "ajv-errors": "^3.0.0",
     "ajv-formats": "^3.0.1",

package/src/lib/common/sanitize.d.ts

@@ -0,0 +1,19 @@
+import dompurify from 'dompurify';
+export declare const sanitizeHtml: {
+    (dirty: string | Node, cfg: dompurify.Config & {
+        RETURN_TRUSTED_TYPE: true;
+    }): import("trusted-types/lib").TrustedHTML;
+    (dirty: Node, cfg: dompurify.Config & {
+        IN_PLACE: true;
+    }): Node;
+    (dirty: string | Node, cfg: dompurify.Config & {
+        RETURN_DOM: true;
+    }): Node;
+    (dirty: string | Node, cfg: dompurify.Config & {
+        RETURN_DOM_FRAGMENT: true;
+    }): DocumentFragment;
+    (dirty: string | Node, cfg?: dompurify.Config): string;
+};
+export declare function hasXSS(html: string): boolean;
+export declare const htmlSanitized: (html: string) => string;
+export declare const XSSErrorMessage = "The template contains content that could expose users to Cross Site Scripting attacks. Remove risky elements like <script> to save the template.";