fix(blocksBasic): Add bad html test.

packages/blocks/blocksBasic/demo/examples/DangerousHtml.yaml

@@ -36,3 +36,26 @@
     html: |
       With iframe ADD_TAGS:
       <iframe width="560" height="315" src="https://www.youtube.com/embed/7N7GWdlQJlU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+- id: properties.html-bad-code
+  type: DangerousHtml
+  properties:
+    html: |
+      <h1>Link<h1>
+
+      <a href="https://lowdefy.com">Lowdefy link</a>
+
+      <font size="+10">Description</font>
+
+      <h1>Bad HTML</h1>
+
+      <div onmouseover="alert('alpha')">
+        <a href="javascript:alert('bravo')">delta</a>
+        <img src="x" onerror="alert('charlie')">
+        <iframe src="javascript:alert('delta')"></iframe>
+        <math>
+          <mi xlink:href="data:x,<script>alert('echo')</script>"></mi>
+        </math>
+      </div>
+      <script>
+        alert('script tag');
+      </script>

packages/blocks/blocksBasic/demo/examples/Html.yaml

@@ -27,3 +27,26 @@
     html: |
       An iframe:
       <iframe width="560" height="315" src="https://www.youtube.com/embed/7N7GWdlQJlU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+- id: properties.html-bad-code
+  type: Html
+  properties:
+    html: |
+      <h1>Link<h1>
+
+      <a href="https://lowdefy.com">Lowdefy link</a>
+
+      <font size="+10">Description</font>
+
+      <h1>Bad HTML</h1>
+
+      <div onmouseover="alert('alpha')">
+        <a href="javascript:alert('bravo')">delta</a>
+        <img src="x" onerror="alert('charlie')">
+        <iframe src="javascript:alert('delta')"></iframe>
+        <math>
+          <mi xlink:href="data:x,<script>alert('echo')</script>"></mi>
+        </math>
+      </div>
+      <script>
+        alert('script tag');
+      </script>

packages/blocks/blocksBasic/src/blocks/DangerousHtml/DangerousHtml.js

@@ -25,7 +25,7 @@ class HtmlBlock extends React.Component {
       innerHTML: '',
     };
     // we do not revaluate DOMPurifyOptions improve options safety by not making options dynamic.
-    this.DOMPurifyOptions = this.props.properties.DOMPurifyOptions;
+    this.DOMPurifyOptions = props.properties.DOMPurifyOptions;
   }
 
   componentDidMount() {

packages/blocks/blocksBasic/tests/__snapshots__/DangerousHtml.test.js.snap

@@ -16,6 +16,14 @@ exports[`Render properties.html - value[0] 1`] = `
 />
 `;
 
+exports[`Render properties.html-bad-code - value[0] 1`] = `
+<div
+  className="{}"
+  data-testid="properties.html-bad-code"
+  id="properties.html-bad-code"
+/>
+`;
+
 exports[`Render properties.html-iframe - value[0] 1`] = `
 <div
   className="{}"
@@ -48,6 +56,10 @@ exports[`Test Schema properties.html 1`] = `true`;
 
 exports[`Test Schema properties.html 2`] = `null`;
 
+exports[`Test Schema properties.html-bad-code 1`] = `true`;
+
+exports[`Test Schema properties.html-bad-code 2`] = `null`;
+
 exports[`Test Schema properties.html-iframe 1`] = `true`;
 
 exports[`Test Schema properties.html-iframe 2`] = `null`;

packages/blocks/blocksBasic/tests/__snapshots__/Html.test.js.snap

@@ -16,6 +16,14 @@ exports[`Render properties.html - value[0] 1`] = `
 />
 `;
 
+exports[`Render properties.html-bad-code - value[0] 1`] = `
+<div
+  className="{}"
+  data-testid="properties.html-bad-code"
+  id="properties.html-bad-code"
+/>
+`;
+
 exports[`Render properties.html-iframe - value[0] 1`] = `
 <div
   className="{}"
@@ -48,6 +56,10 @@ exports[`Test Schema properties.html 1`] = `true`;
 
 exports[`Test Schema properties.html 2`] = `null`;
 
+exports[`Test Schema properties.html-bad-code 1`] = `true`;
+
+exports[`Test Schema properties.html-bad-code 2`] = `null`;
+
 exports[`Test Schema properties.html-iframe 1`] = `true`;
 
 exports[`Test Schema properties.html-iframe 2`] = `null`;