feat(elements): pos-html-tool and sanitizeHtmlTool

Author: jg10-mastodon-social

docs/elements/components/pos-html-tool/readme.md

@@ -0,0 +1,14 @@
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                          | Type     | Default     |
+| ---------- | ---------- | ------------------------------------ | -------- | ----------- |
+| `fragment` | `fragment` | HTML fragment to sanitize and render | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

elements/package.json

@@ -28,6 +28,7 @@
     "@stencil/store": "^2.2.0",
     "@uvdsl/solid-oidc-client-browser": "^0.1.1",
     "idb": "^8.0.3",
+    "isomorphic-dompurify": "^2.26.0",
     "pollen-css": "^5.0.2",
     "rxjs": "^7.8.2",
     "stencil-router-v2": "^0.6.0"

elements/src/components.d.ts

@@ -60,6 +60,12 @@ export namespace Components {
     }
     interface PosGettingStarted {
     }
+    interface PosHtmlTool {
+        /**
+          * HTML fragment to sanitize and render
+         */
+        "fragment": string;
+    }
     /**
      * Tries fetch an image with the solid authentication, and can visualize http errors like 403 or 404 if this fails.
      * Falls back to classic <img src="..."> on network errors like CORS.
@@ -526,6 +532,12 @@ declare global {
         prototype: HTMLPosGettingStartedElement;
         new (): HTMLPosGettingStartedElement;
     };
+    interface HTMLPosHtmlToolElement extends Components.PosHtmlTool, HTMLStencilElement {
+    }
+    var HTMLPosHtmlToolElement: {
+        prototype: HTMLPosHtmlToolElement;
+        new (): HTMLPosHtmlToolElement;
+    };
     interface HTMLPosImageElementEventMap {
         "pod-os:init": any;
         "pod-os:resource-loaded": string;
@@ -960,6 +972,7 @@ declare global {
         "pos-error-toast": HTMLPosErrorToastElement;
         "pos-example-resources": HTMLPosExampleResourcesElement;
         "pos-getting-started": HTMLPosGettingStartedElement;
+        "pos-html-tool": HTMLPosHtmlToolElement;
         "pos-image": HTMLPosImageElement;
         "pos-internal-router": HTMLPosInternalRouterElement;
         "pos-label": HTMLPosLabelElement;
@@ -1071,6 +1084,12 @@ declare namespace LocalJSX {
     interface PosGettingStarted {
         "onPod-os:login"?: (event: PosGettingStartedCustomEvent<void>) => void;
     }
+    interface PosHtmlTool {
+        /**
+          * HTML fragment to sanitize and render
+         */
+        "fragment"?: string;
+    }
     /**
      * Tries fetch an image with the solid authentication, and can visualize http errors like 403 or 404 if this fails.
      * Falls back to classic <img src="..."> on network errors like CORS.
@@ -1254,6 +1273,7 @@ declare namespace LocalJSX {
         "pos-error-toast": PosErrorToast;
         "pos-example-resources": PosExampleResources;
         "pos-getting-started": PosGettingStarted;
+        "pos-html-tool": PosHtmlTool;
         "pos-image": PosImage;
         "pos-internal-router": PosInternalRouter;
         "pos-label": PosLabel;
@@ -1307,6 +1327,7 @@ declare module "@stencil/core" {
             "pos-error-toast": LocalJSX.PosErrorToast & JSXBase.HTMLAttributes<HTMLPosErrorToastElement>;
             "pos-example-resources": LocalJSX.PosExampleResources & JSXBase.HTMLAttributes<HTMLPosExampleResourcesElement>;
             "pos-getting-started": LocalJSX.PosGettingStarted & JSXBase.HTMLAttributes<HTMLPosGettingStartedElement>;
+            "pos-html-tool": LocalJSX.PosHtmlTool & JSXBase.HTMLAttributes<HTMLPosHtmlToolElement>;
             /**
              * Tries fetch an image with the solid authentication, and can visualize http errors like 403 or 404 if this fails.
              * Falls back to classic <img src="..."> on network errors like CORS.

elements/src/components/pos-html-tool/pos-html-tool.spec.tsx

@@ -0,0 +1,14 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { PosHtmlTool } from './pos-html-tool';
+
+describe('pos-html-tool', () => {
+  it('inserts sanitized HTML into the page', async () => {
+    const page = await newSpecPage({
+      components: [PosHtmlTool],
+      html: `<pos-html-tool/>`,
+    });
+    page.rootInstance.fragment = '<pos-label/>';
+    await page.waitForChanges();
+    expect(page.root?.innerHTML).toEqualHtml('<pos-label/>');
+  });
+});

elements/src/components/pos-html-tool/pos-html-tool.tsx

@@ -0,0 +1,17 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { sanitizeHtmlTool } from './sanitizeHtmlTool';
+
+@Component({
+  tag: 'pos-html-tool',
+  shadow: true,
+})
+export class PosHtmlTool {
+  /**
+   * HTML fragment to sanitize and render
+   */
+  @Prop() fragment: string;
+
+  render() {
+    return <Host innerHTML={sanitizeHtmlTool(this.fragment)}></Host>;
+  }
+}

elements/src/components/pos-html-tool/sanitizeHtmlTool.spec.tsx

@@ -0,0 +1,13 @@
+import { sanitizeHtmlTool } from './sanitizeHtmlTool';
+
+describe('sanitizeHtmlTool', () => {
+  it('keeps whitelisted elements', () => {
+    const sanitized = sanitizeHtmlTool('<pos-label/>');
+    expect(sanitized).toEqual('<pos-label/>');
+  });
+
+  it('removes unknown HTML elements from fragment', () => {
+    const sanitized = sanitizeHtmlTool('<unknown-element>');
+    expect(sanitized).toEqual('');
+  });
+});

elements/src/components/pos-html-tool/sanitizeHtmlTool.tsx

@@ -0,0 +1,5 @@
+import DOMPurify from 'isomorphic-dompurify';
+
+export function sanitizeHtmlTool(htmlToolFragment: string) {
+  return DOMPurify.sanitize(htmlToolFragment, { ADD_TAGS: ['pos-label'] });
+}

elements/src/components/pos-label/pos-label.integration.spec.tsx

@@ -4,6 +4,7 @@ import { PosApp } from '../pos-app/pos-app';
 import { PosResource } from '../pos-resource/pos-resource';
 import { PosLabel } from './pos-label';
 import { when } from 'jest-when';
+import { sanitizeHtmlTool } from '../pos-html-tool/sanitizeHtmlTool';
 
 describe('pos-label', () => {
   it('renders label for successfully loaded resource', async () => {
@@ -101,4 +102,9 @@ describe('pos-label', () => {
       </pos-label>
     `);
   });
+
+  it('is whitelisted by sanitizeHtmlTool', () => {
+    const sanitized = sanitizeHtmlTool('<pos-label/>');
+    expect(sanitized).toEqual('<pos-label/>');
+  });
 });