Update SvelteKit and fix issue with path and sanitize-html

The solution for the problem with `sanitize-html` was to use the `dompurify` library instead which works on both client and server side. Related issues: vitejs/vite#9200 apostrophecms/sanitize-html#560
Greenheart · Aug 2, 2022 · 15de472 · 15de472
1 parent 97d82d6
commit 15de472
Show file tree

Hide file tree

Showing 11 changed files with 643 additions and 1,327 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -4,44 +4,47 @@
     "description": "https://idg.tools | Inner Development Toolbox",
     "private": true,
     "scripts": {
-        "dev": "svelte-kit dev",
-        "dev:host": "svelte-kit dev --host",
+        "dev": "vite dev",
+        "dev:host": "vite dev --host",
         "build:content": "node scripts/esbuild.js && node scripts/compiled/build-content.js",
-        "build": "svelte-kit build",
+        "build": "vite build",
         "build:all": "npm run build:content && svelte-kit build",
-        "preview": "svelte-kit preview",
+        "preview": "vite preview",
         "check": "svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
         "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
         "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
     },
     "dependencies": {
-        "sanitize-html": "^2.7.0",
+        "dompurify": "^2.3.10",
+        "sanitize-html": "^2.7.1",
         "svelte-markdown": "^0.2.2"
     },
     "devDependencies": {
-        "@sveltejs/adapter-vercel": "1.0.0-next.58",
-        "@sveltejs/kit": "^1.0.0-next.350",
-        "@tailwindcss/typography": "^0.5.2",
+        "@sveltejs/adapter-vercel": "1.0.0-next.66",
+        "@sveltejs/kit": "^1.0.0-next.401",
+        "@tailwindcss/typography": "^0.5.4",
+        "@types/dompurify": "^2.3.3",
         "@types/sanitize-html": "^2.6.2",
-        "autoprefixer": "^10.4.7",
-        "cssnano": "^5.1.11",
+        "autoprefixer": "^10.4.8",
+        "cssnano": "^5.1.12",
         "dotenv": "^16.0.1",
         "native-fetch": "^4.0.2",
         "postcss": "^8.4.14",
-        "postcss-load-config": "^3.1.4",
+        "postcss-load-config": "^4.0.1",
         "prettier": "^2.7.1",
         "prettier-plugin-svelte": "^2.7.0",
-        "prettier-plugin-tailwindcss": "^0.1.11",
+        "prettier-plugin-tailwindcss": "^0.1.13",
         "remark-slate": "^1.8.6",
         "slugify": "^1.6.5",
-        "svelte": "^3.48.0",
-        "svelte-check": "^2.7.2",
+        "svelte": "^3.49.0",
+        "svelte-check": "^2.8.0",
         "svelte-preprocess": "^4.10.7",
-        "tailwindcss": "^3.1.3",
+        "tailwindcss": "^3.1.7",
         "tslib": "^2.4.0",
-        "typescript": "^4.7.3",
-        "undici": "^5.5.1"
+        "typescript": "^4.7.4",
+        "undici": "^5.8.0",
+        "vite": "^3.0.4"
     },
     "type": "module",
     "prettier": {

diff --git a/app/postcss.config.cjs → app/postcss.config.js b/app/postcss.config.cjs → app/postcss.config.js
@@ -1,21 +1,19 @@
-const tailwindcss = require("tailwindcss")
-const autoprefixer = require("autoprefixer")
-const cssnano = require("cssnano")
+import tailwindcss from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+import cssnano from 'cssnano'
 
 const mode = process.env.NODE_ENV
-const dev = mode === "development"
+const dev = mode === 'development'
 
-const config = {
+export default {
     plugins: [
         //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
         tailwindcss(),
         //But others, like autoprefixer, need to run after,
         autoprefixer(),
         !dev &&
             cssnano({
-                preset: "default",
+                preset: 'default',
             }),
     ],
 }
-
-module.exports = config
diff --git a/app/src/components/Markdown.svelte b/app/src/components/Markdown.svelte
@@ -6,10 +6,11 @@
         List,
         ListItem,
     } from 'svelte-markdown/src/renderers'
+    import DOMPurify from 'dompurify'
 
     import Link from './Link.svelte'
     import EmptyComponent from './EmptyComponent.svelte'
-    import { cx, sanitizeHTML } from '$lib/utils'
+    import { cx } from '$lib/utils'
 
     const variants = {
         default:
@@ -56,6 +57,6 @@
     <SvelteMarkdown
         {source}
         {renderers}
-        options={{ sanitizer: sanitizeHTML }}
+        options={{ sanitizer: DOMPurify.sanitize }}
     />
 </div>
diff --git a/app/src/lib/utils.ts b/app/src/lib/utils.ts
@@ -1,6 +1,3 @@
-import sanitize from 'sanitize-html'
-import type { IOptions } from 'sanitize-html'
-
 export const randomInt = (min: number, max: number) =>
     Math.floor(Math.random() * (max - min + 1)) + min
 
@@ -17,33 +14,3 @@ export function isExternalURL(href: string): boolean {
     a.href = href
     return window.location.host !== a.host
 }
-
-export const sanitizeHTML = (dangerousHTML: string) => {
-    // NOTE: This config needs to be updated based on what type of markdown content we expect from the CMS
-    const SANITIZE_HTML_CONFIG: IOptions = {
-        allowedTags: [
-            'blockquote',
-            'li',
-            'ol',
-            'p',
-            'ul',
-            'a',
-            'br',
-            'em',
-            'span',
-            'strong',
-        ],
-        disallowedTagsMode: 'discard',
-        allowedAttributes: {
-            a: ['href', 'name', 'target'],
-        },
-        selfClosing: [],
-        allowedSchemes: ['http', 'https'],
-        allowedSchemesByTag: {},
-        allowedSchemesAppliedToAttributes: ['href', 'src'],
-        allowProtocolRelative: false,
-        enforceHtmlBoundary: false,
-    }
-
-    return sanitize(dangerousHTML, SANITIZE_HTML_CONFIG)
-}
diff --git a/app/src/routes/explore/[link].ts b/app/src/routes/explore/[link].ts
@@ -4,7 +4,7 @@ import { content } from '$lib/content-backend'
 import { getToolByLink } from '$shared/content-utils'
 
 /** @type {import('@sveltejs/kit').RequestHandler} */
-export async function get({
+export async function GET({
     params: { link },
 }: {
     params: Record<string, string>

diff --git a/app/src/routes/explore/index.ts b/app/src/routes/explore/index.ts
@@ -1,7 +1,7 @@
 import { content } from '$lib/content-backend'
 
 /** @type {import('@sveltejs/kit').RequestHandler} */
-export async function get() {
+export async function GET() {
     if (content) {
         return { body: { content } }
     }

diff --git a/app/src/routes/index.ts b/app/src/routes/index.ts
@@ -1,7 +1,7 @@
 import { content } from '$lib/content-backend'
 
 /** @type {import('@sveltejs/kit').RequestHandler} */
-export async function get() {
+export async function GET() {
     if (content) {
         return { body: { content } }
     }

diff --git a/app/svelte.config.js b/app/svelte.config.js
@@ -7,14 +7,9 @@ const config = {
     preprocess: [preprocess({ postcss: true })],
     kit: {
         adapter: adapter(),
-        vite: {
-            resolve: {
-                alias: {
-                    $components: resolve('src/components'),
-                    $lib: resolve('src/lib'),
-                    $shared: resolve('../shared'),
-                },
-            },
+        alias: {
+            $components: resolve('src/components'),
+            $shared: resolve('../shared'),
         },
     },
 }

diff --git a/app/tsconfig.json b/app/tsconfig.json
@@ -30,6 +30,7 @@
             "$lib/*": ["src/lib/*"],
             "$shared": ["../shared"],
             "$shared/*": ["../shared/*"],
+            "$components": ["src/components"],
             "$components/*": ["src/components/*"]
         }
     },

diff --git a/app/vite.config.js b/app/vite.config.js
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+    plugins: [sveltekit()],
+})