diff --git a/packages/pluggableWidgets/html-element-web/package.json b/packages/pluggableWidgets/html-element-web/package.json index 100f20cece..d14f644d86 100644 --- a/packages/pluggableWidgets/html-element-web/package.json +++ b/packages/pluggableWidgets/html-element-web/package.json @@ -48,6 +48,7 @@ "@testing-library/react-hooks": "^3.4.2", "@testing-library/user-event": "^13.2.1", "@types/big.js": "^6.0.2", + "@types/dompurify": "^2.4.0", "@types/react": "^17.0.52", "@types/react-dom": "^17.0.18", "@types/react-test-renderer": "<18.0.0", @@ -57,5 +58,8 @@ "react": "~17.0.2", "react-dom": "~17.0.2", "react-test-renderer": "~17.0.2" + }, + "dependencies": { + "dompurify": "^2.4.1" } } diff --git a/packages/pluggableWidgets/html-element-web/src/components/HTMLTag.tsx b/packages/pluggableWidgets/html-element-web/src/components/HTMLTag.tsx index af563ff357..79f406bb4c 100644 --- a/packages/pluggableWidgets/html-element-web/src/components/HTMLTag.tsx +++ b/packages/pluggableWidgets/html-element-web/src/components/HTMLTag.tsx @@ -1,4 +1,5 @@ import { createElement, HTMLAttributes, ReactElement, ReactNode } from "react"; +import { useSanitize } from "../utils/props-utils"; interface HTMLTagProps { tagName: keyof JSX.IntrinsicElements; @@ -8,10 +9,11 @@ interface HTMLTagProps { } export function HTMLTag(props: HTMLTagProps): ReactElement { + const sanitize = useSanitize(); const Tag = props.tagName; const { unsafeHTML } = props; if (unsafeHTML !== undefined) { - return ; + return ; } return {props.children}; diff --git a/packages/pluggableWidgets/html-element-web/src/components/__tests__/HTMLTag.spec.tsx b/packages/pluggableWidgets/html-element-web/src/components/__tests__/HTMLTag.spec.tsx index dff3633fa4..f371db9801 100644 --- a/packages/pluggableWidgets/html-element-web/src/components/__tests__/HTMLTag.spec.tsx +++ b/packages/pluggableWidgets/html-element-web/src/components/__tests__/HTMLTag.spec.tsx @@ -37,6 +37,29 @@ describe("HTMLTag", () => { expect(asFragment()).toMatchSnapshot(); }); + it("with innerHTML apply html sanitizing", () => { + const checkSapshot = (html: string): void => { + expect( + render( + + {undefined} + + ).asFragment() + ).toMatchSnapshot(); + }; + + checkSapshot("

Lorem ipsum

"); + checkSapshot(""); + checkSapshot(`ok`); + checkSapshot("123