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