Sanitize HTML and merge styles into single file

web-app/src/app.css

@@ -1,101 +0,0 @@
-button,
-label,
-select,
-[role="button"],
-[role="option"],
-label[for="toggle-mobile-preview"] {
-  cursor: pointer;
-}
-
-input,
-button,
-textarea,
-select,
-a[role="button"],
-label[for="toggle-mobile-preview"],
-:not(.table-of-contents) > summary {
-  font: inherit;
-  color: inherit;
-  border: var(--border-primary);
-  border-radius: var(--border-radius);
-  padding-inline: var(--space-2xs);
-  padding-block: var(--space-3xs);
-}
-
-input,
-textarea,
-select {
-  background-color: var(--bg-primary);
-}
-
-textarea {
-  resize: vertical;
-}
-
-input[type="file"] {
-  inline-size: 100%;
-}
-
-input[type="color"] {
-  padding: 0;
-}
-
-a[role="button"] {
-  display: inline-block;
-  max-inline-size: fit-content;
-  text-decoration: none;
-}
-
-:not(.table-of-contents) > summary {
-  max-inline-size: fit-content;
-}
-
-button,
-a[role="button"],
-label[for="toggle-mobile-preview"],
-:not(.table-of-contents) > summary {
-  background-color: var(--bg-secondary);
-}
-
-:is(
-    button,
-    a[role="button"],
-    label[for="toggle-mobile-preview"],
-    :not(.table-of-contents) > summary
-  ):hover {
-  background-color: var(--bg-tertiary);
-}
-
-:is(button, input, textarea, select):focus,
-#toggle-mobile-preview:checked + label {
-  outline: 0.125rem solid var(--color-accent);
-  outline-offset: 0.25rem;
-}
-
-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-s);
-}
-
-form > button[type="submit"] {
-  max-inline-size: 30ch;
-}
-
-form label {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2xs);
-  max-inline-size: 30ch;
-}
-
-form label:has(textarea) {
-  max-inline-size: 75ch;
-}
-
-form .file-field {
-  display: flex;
-  align-items: end;
-  gap: var(--space-2xs);
-  flex-wrap: wrap;
-}

web-app/src/lib/templates/blog/common/BlogFooter.svelte

@@ -5,7 +5,7 @@
 <footer>
   <div class="container">
     <small>
-      {text}
+      {@html text}
     </small>
   </div>
 </footer>

web-app/src/lib/utils.ts

@@ -3,6 +3,7 @@ import type { Renderer, Token } from "marked";
 import { markedHighlight } from "marked-highlight";
 import hljs from "highlight.js";
 import GithubSlugger from "github-slugger";
+import DOMPurify from "isomorphic-dompurify";
 
 export const sortOptions = [
   { value: "creation-time", text: "Creation time" },
@@ -147,9 +148,9 @@ const createMarkdownParser = (showToc = true) => {
 
 export const md = (markdownContent: string, showToc = true) => {
   const marked = createMarkdownParser(showToc);
-  const html = marked.parse(markdownContent);
+  const html = DOMPurify.sanitize(marked.parse(markdownContent) as string);
 
-  return html as string;
+  return html;
 };
 
 export const handleImagePaste = async (event: ClipboardEvent, API_BASE_PREFIX: string) => {

web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts

@@ -62,7 +62,7 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
             logo: websiteData.logo_text,
             mainContent: md(websiteData.main_content ?? "", false),
             articles: websiteData.articles ?? [],
-            footerAdditionalText: websiteData.additional_text ?? ""
+            footerAdditionalText: md(websiteData.additional_text ?? "")
           }
         }));
       }
@@ -76,7 +76,7 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
             logo: websiteData.logo_text,
             mainContent: md(websiteData.main_content ?? "", false),
             articles: websiteData.articles ?? [],
-            footerAdditionalText: websiteData.additional_text ?? ""
+            footerAdditionalText: md(websiteData.additional_text ?? "")
           }
         }));
       }
@@ -118,7 +118,7 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
                 : "",
               publicationDate: article.publication_date,
               mainContent: md(article.main_content ?? ""),
-              footerAdditionalText: websiteData.additional_text ?? ""
+              footerAdditionalText: md(websiteData.additional_text ?? "")
             }
           }));
         }
@@ -135,7 +135,7 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
                 : "",
               publicationDate: article.publication_date,
               mainContent: md(article.main_content ?? ""),
-              footerAdditionalText: websiteData.additional_text ?? ""
+              footerAdditionalText: md(websiteData.additional_text ?? "")
             }
           }));
         }

web-app/src/routes/+layout.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import "../app.css";
   import "../../template-styles/common-styles.css";
   import { page } from "$app/stores";
   import type { LayoutServerData } from "./$types";