Merge pull request #816 from MuckRock/802-double-render

src/lib/components/addons/AddOnListItem.svelte

@@ -1,17 +1,24 @@
 <script lang="ts">
   import type { AddOnListItem } from "@/addons/types";
 
+  import DOMPurify from "isomorphic-dompurify";
   import { _ } from "svelte-i18n";
 
   import AddOnPin from "@/addons/AddOnPin.svelte";
   import PremiumBadge from "@/premium-credits/PremiumBadge.svelte";
 
+  import { ALLOWED_TAGS, ALLOWED_ATTR } from "@/config/config.js";
+
   export let addon: AddOnListItem;
 
   $: url = `/add-ons/${addon?.repository}/`;
-  $: description = addon?.parameters?.description;
+  $: description = clean(addon?.parameters?.description ?? "");
   $: author = { name: addon?.repository?.split("/")[0] };
   $: isPremium = addon?.parameters?.categories?.includes("premium") ?? false;
+
+  function clean(html: string): string {
+    return DOMPurify.sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR });
+  }
 </script>
 
 <a class="addon-link" href={url}>

src/lib/components/addons/AddOnMeta.svelte

@@ -1,31 +1,44 @@
 <script lang="ts">
   import type { AddOnListItem } from "@/addons/types";
 
+  import DOMPurify from "isomorphic-dompurify";
   import { _ } from "svelte-i18n";
   import { MarkGithub16 } from "svelte-octicons";
 
   import Button from "$lib/components/common/Button.svelte";
   import Flex from "@/lib/components/common/Flex.svelte";
   import Metadata from "../common/Metadata.svelte";
 
+  import { ALLOWED_TAGS, ALLOWED_ATTR } from "@/config/config.js";
+
   export let addon: AddOnListItem;
 
   $: repo = new URL(addon.repository, "https://github.com/").href;
   $: github_org = addon.repository.split("/")[0];
+  $: description = addon.parameters.description
+    ? clean(addon.parameters.description)
+    : "";
+  $: instructions = addon.parameters.instructions
+    ? clean(addon.parameters.instructions)
+    : "";
+
+  function clean(html: string): string {
+    return DOMPurify.sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR });
+  }
 </script>
 
 <div class="container">
   <h2 class="name">{addon.name}</h2>
   <div class="description">
-    {@html addon.parameters.description}
+    {@html description}
   </div>
-  {#if addon.parameters.instructions}
+  {#if instructions}
     <div class="instructions">
       <details>
         <summary>
           {$_("addonDispatchDialog.instructions")}
         </summary>
-        {@html addon.parameters.instructions}
+        {@html instructions}
       </details>
     </div>
   {/if}

src/lib/components/addons/tests/__snapshots__/AddOnListItem.test.ts.snap

@@ -195,9 +195,7 @@ exports[`AddOnListItem 2`] = `
       <div
         class="description svelte-1sp09hk"
       >
-        <p>
-          This Add-On uses Azure’s Document Intelligence API to OCR documents. The document(s) must be public to be processed. This Add-On uses 1 AI Credit per page.
-        </p>
+        This Add-On uses Azure’s Document Intelligence API to OCR documents. The document(s) must be public to be processed. This Add-On uses 1 AI Credit per page.
       </div>
     </div>
   </a>

src/lib/components/common/TipOfDay.svelte

@@ -1,6 +1,9 @@
 <script lang="ts" context="module">
+  import DOMPurify from "isomorphic-dompurify";
   import { writable } from "svelte/store";
-  import { StorageManager } from "@/lib/utils/storage";
+
+  import { ALLOWED_ATTR, ALLOWED_TAGS } from "@/config/config.js";
+  import { StorageManager } from "$lib/utils/storage";
 
   let show = writable(false);
 
@@ -12,11 +15,15 @@
       : true;
   }
 
-  function hideTip(message) {
+  function hideTip(message: string) {
     show.set(false);
     storage.set("message", message);
     storage.set("show", false);
   }
+
+  function clean(html: string): string {
+    return DOMPurify.sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR });
+  }
 </script>
 
 <script lang="ts">
@@ -33,7 +40,7 @@
 {#if $show}
   <div class="container">
     <div class="message">
-      {@html message}
+      {@html clean(message ?? "")}
     </div>
     <button class="close" title="Hide Tip" on:click={() => hideTip(message)}>
       <X12 />

src/lib/components/documents/Header.svelte

@@ -25,7 +25,7 @@
     ? clean(document.description)
     : "";
 
-  function clean(html: string) {
+  function clean(html: string): string {
     return DOMPurify.sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR });
   }
 

src/lib/components/layouts/AddOnLayout.svelte

@@ -24,6 +24,7 @@
   import Search from "../forms/Search.svelte";
   import Selection from "$lib/components/inputs/Selection.svelte";
   import Tab from "../common/Tab.svelte";
+
   import { schedules } from "../addons/ScheduledEvent.svelte";
 
   export let addon: AddOnListItem;

src/lib/components/projects/ProjectListItem.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
   import type { Project } from "$lib/api/types";
 
+  import DOMPurify from "isomorphic-dompurify";
   import { _ } from "svelte-i18n";
   import { Globe16, Lock16 } from "svelte-octicons";
 
   import ProjectPin from "./ProjectPin.svelte";
 
+  import { ALLOWED_ATTR, ALLOWED_TAGS } from "@/config/config.js";
   import { canonicalUrl } from "$lib/api/projects";
 
   export let project: Project;
 
   $: href = canonicalUrl(project).href;
+
+  function clean(html: string): string {
+    return DOMPurify.sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR });
+  }
 </script>
 
 <a {href} id={project.id.toString()}>
@@ -33,7 +39,7 @@
       {/if}
     </div>
     {#if project.description}
-      <div class="description">{@html project.description}</div>
+      <div class="description">{@html clean(project.description ?? "")}</div>
     {/if}
   </div>
 </a>

src/routes/(app)/add-ons/[owner]/[repo]/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
 
+  import AddOnLayout from "$lib/components/layouts/AddOnLayout.svelte";
   import { isPremiumOrg, getCreditBalance } from "$lib/api/accounts";
-  import AddOnLayout from "@/lib/components/layouts/AddOnLayout.svelte";
-  import { getCurrentUser } from "@/lib/utils/permissions.js";
+  import { getCurrentUser } from "$lib/utils/permissions";
 
   export let data;