feat(web-host): add link to source of plugin, sanitizing plugin name

Author: topheman

packages/web-host/src/components/ReplHistory.tsx

@@ -19,14 +19,22 @@ export function ReplHistory({
       {history.map((entry, index) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: no unique key
         <Fragment key={index}>
-          {"stdin" in entry && entry.stdin && (
+          {"stdin" in entry && entry.stdin && !entry.allowHtml && (
             <pre
               className="bg-gray-50 whitespace-pre-wrap word-break-word"
               data-stdtype="stdin"
             >
               {entry.stdin}
             </pre>
           )}
+          {"stdin" in entry && entry.stdin && entry.allowHtml && (
+            <pre
+              className="bg-gray-50 whitespace-pre-wrap word-break-word"
+              data-stdtype="stdin"
+              // biome-ignore lint/security/noDangerouslySetInnerHtml: need to pass `allowHtml:true` to the addReplHistoryEntry function - only used for adding links to source of plugins when loaded
+              dangerouslySetInnerHTML={{ __html: entry.stdin }}
+            />
+          )}
           {"stdout" in entry && entry.stdout && (
             <pre
               className="bg-green-100 whitespace-pre-wrap before:content-[attr(data-status)] relative before:absolute before:right-0 before:top-0 word-break-word"

packages/web-host/src/types/index.ts

@@ -19,4 +19,5 @@ export type ReplHistoryEntry =
     }
   | {
       stdin: string;
+      allowHtml?: boolean;
     };

packages/web-host/src/utils/github.ts

@@ -0,0 +1,22 @@
+const pluginSourceUrlMapping = {
+  echo: "https://github.com/topheman/webassembly-component-model-experiments/tree/master/crates/plugin-echo",
+  weather:
+    "https://github.com/topheman/webassembly-component-model-experiments/tree/master/crates/plugin-weather",
+  greet:
+    "https://github.com/topheman/webassembly-component-model-experiments/tree/master/crates/plugin-greet",
+  ls: "https://github.com/topheman/webassembly-component-model-experiments/tree/master/crates/plugin-ls",
+  cat: "https://github.com/topheman/webassembly-component-model-experiments/tree/master/crates/plugin-cat",
+  echoc:
+    "https://github.com/topheman/webassembly-component-model-experiments/blob/master/c_modules/plugin-echo/component.c",
+} as const;
+
+export function getPluginSourceUrl(
+  pluginName: keyof typeof pluginSourceUrlMapping | (string & {}),
+) {
+  if (pluginName in pluginSourceUrlMapping) {
+    return pluginSourceUrlMapping[
+      pluginName as keyof typeof pluginSourceUrlMapping
+    ];
+  }
+  return null;
+}

packages/web-host/src/wasm/engine.ts

@@ -1,5 +1,6 @@
 import { _setPluginsNames as hostStateSetPluginsNames } from "repl:api/host-state";
 import type { HostApi, PluginApi, ReplHistoryEntry } from "../types";
+import { getPluginSourceUrl } from "../utils/github";
 
 type AddReplHistoryEntryProp = {
   addReplHistoryEntry: (entry: ReplHistoryEntry) => void;
@@ -43,8 +44,18 @@ async function loadPlugins({
     import("./generated/plugin-echo-c/transpiled/plugin-echo-c.js"),
   ]).then((plugins) =>
     plugins.map((plugin) => {
+      // Since we `allowHtml`, which will `dangerouslySetInnerHTML`, we need to sanitize the plugin name
+      // (a plugin author could attack by injecting a script tag)
+      const sanitizedPluginName = plugin.plugin
+        .name()
+        .replace(/[^a-zA-Z0-9_-]/g, "");
+      const sourceUrl = getPluginSourceUrl(sanitizedPluginName);
+      const stdin = sourceUrl
+        ? `[Host] Loaded plugin: <a href="${sourceUrl}" title="View source of the plugin on GitHub">${sanitizedPluginName}</a>`
+        : `[Host] Loaded plugin: ${sanitizedPluginName}`;
       addReplHistoryEntry({
-        stdin: `[Host] Loaded plugin: ${plugin.plugin.name()}`,
+        stdin,
+        allowHtml: !!sourceUrl,
       });
       return plugin.plugin;
     }),