Merge pull request #4371 from serlo/xss-link-href

fix(link-renderer): add guard against injecting javascript in link elements through href
serlo · Dec 20, 2024 · 28a02bc · 28a02bc
2 parents c9628ad + 9df0c8c
commit 28a02bc
Show file tree

Hide file tree

Showing 28 changed files with 235 additions and 7 deletions.
diff --git a/.yarn/cache/agent-base-npm-7.1.3-b2c16e72fb-87bb7ee54f.zip b/.yarn/cache/agent-base-npm-7.1.3-b2c16e72fb-87bb7ee54f.zip
diff --git a/.yarn/cache/cssstyle-npm-4.1.0-2bda2835e6-a8f5746430.zip b/.yarn/cache/cssstyle-npm-4.1.0-2bda2835e6-a8f5746430.zip
diff --git a/.yarn/cache/data-urls-npm-5.0.0-4b58b89bfe-5c40568c31.zip b/.yarn/cache/data-urls-npm-5.0.0-4b58b89bfe-5c40568c31.zip
diff --git a/.yarn/cache/dompurify-npm-3.2.3-4fa119eef7-cd66ae8b22.zip b/.yarn/cache/dompurify-npm-3.2.3-4fa119eef7-cd66ae8b22.zip
diff --git a/.yarn/cache/html-encoding-sniffer-npm-4.0.0-5f6627070d-3339b71dab.zip b/.yarn/cache/html-encoding-sniffer-npm-4.0.0-5f6627070d-3339b71dab.zip
diff --git a/.yarn/cache/http-proxy-agent-npm-7.0.2-643ed7cc33-670858c8f8.zip b/.yarn/cache/http-proxy-agent-npm-7.0.2-643ed7cc33-670858c8f8.zip
diff --git a/.yarn/cache/https-proxy-agent-npm-7.0.6-27a95c2690-b882377a12.zip b/.yarn/cache/https-proxy-agent-npm-7.0.6-27a95c2690-b882377a12.zip
diff --git a/.yarn/cache/isomorphic-dompurify-npm-2.19.0-4f6eb49402-42fb8a4d5e.zip b/.yarn/cache/isomorphic-dompurify-npm-2.19.0-4f6eb49402-42fb8a4d5e.zip
diff --git a/.yarn/cache/jsdom-npm-25.0.1-ccbb1f9cda-b637d28445.zip b/.yarn/cache/jsdom-npm-25.0.1-ccbb1f9cda-b637d28445.zip
diff --git a/.yarn/cache/nwsapi-npm-2.2.16-9ae9928240-467b36a74b.zip b/.yarn/cache/nwsapi-npm-2.2.16-9ae9928240-467b36a74b.zip
diff --git a/.yarn/cache/parse5-npm-7.2.1-c48f333f28-11253cf8aa.zip b/.yarn/cache/parse5-npm-7.2.1-c48f333f28-11253cf8aa.zip
diff --git a/.yarn/cache/rrweb-cssom-npm-0.7.1-fbf1786bb7-62e410ddba.zip b/.yarn/cache/rrweb-cssom-npm-0.7.1-fbf1786bb7-62e410ddba.zip
diff --git a/.yarn/cache/tldts-core-npm-6.1.69-dd413a50bb-b11f5a2461.zip b/.yarn/cache/tldts-core-npm-6.1.69-dd413a50bb-b11f5a2461.zip
diff --git a/.yarn/cache/tldts-npm-6.1.69-2c00cd92b2-ea09623cc2.zip b/.yarn/cache/tldts-npm-6.1.69-2c00cd92b2-ea09623cc2.zip
diff --git a/.yarn/cache/tough-cookie-npm-5.0.0-93c44236b9-774f6c939c.zip b/.yarn/cache/tough-cookie-npm-5.0.0-93c44236b9-774f6c939c.zip
diff --git a/.yarn/cache/tr46-npm-5.0.0-d15754040d-8d8b021f8e.zip b/.yarn/cache/tr46-npm-5.0.0-d15754040d-8d8b021f8e.zip
diff --git a/.yarn/cache/w3c-xmlserializer-npm-5.0.0-589edd7bff-593acc1fda.zip b/.yarn/cache/w3c-xmlserializer-npm-5.0.0-589edd7bff-593acc1fda.zip
diff --git a/.yarn/cache/whatwg-encoding-npm-3.1.1-7dfe21cf7d-f75a614224.zip b/.yarn/cache/whatwg-encoding-npm-3.1.1-7dfe21cf7d-f75a614224.zip
diff --git a/.yarn/cache/whatwg-mimetype-npm-4.0.0-ebb293a688-f97edd4b4e.zip b/.yarn/cache/whatwg-mimetype-npm-4.0.0-ebb293a688-f97edd4b4e.zip
diff --git a/.yarn/cache/whatwg-url-npm-14.1.0-ed62f15e7a-e429d1d2a5.zip b/.yarn/cache/whatwg-url-npm-14.1.0-ed62f15e7a-e429d1d2a5.zip
diff --git a/.yarn/cache/xml-name-validator-npm-5.0.0-0e0ec66944-86effcc702.zip b/.yarn/cache/xml-name-validator-npm-5.0.0-0e0ec66944-86effcc702.zip
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -59,6 +59,7 @@
     "graphql-request": "^7.1.2",
     "iframe-resizer": "^4.4.5",
     "io-ts": "^2.2.21",
+    "isomorphic-dompurify": "^2.19.0",
     "js-cookie": "^3.0.5",
     "json-diff": "^1.0.6",
     "katex": "^0.16.11",

diff --git a/apps/web/src/serlo-editor-integration/create-renderers.tsx b/apps/web/src/serlo-editor-integration/create-renderers.tsx
@@ -29,6 +29,7 @@ import type {
   EditorDropzoneImageDocument,
   EditorInteractiveVideoDocument,
 } from '@editor/types/editor-plugins'
+import { sanitizeHref } from '@editor/utils/sanitize-href'
 import dynamic from 'next/dynamic'
 import { ComponentProps } from 'react'
 
@@ -262,7 +263,7 @@ export function createRenderers(): InitRenderersArgs {
     linkRenderer: ({ href, children }: ComponentProps<LinkRenderer>) => {
       return (
         <>
-          <Link href={href}>{children}</Link>
+          <Link href={sanitizeHref(href)}>{children}</Link>
           <ExtraInfoIfRevisionView>{href}</ExtraInfoIfRevisionView>
         </>
       )

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -50,7 +50,7 @@
     "@open-iframe-resizer/react": "1.2.1",
     "@serlo/katex-styles": "1.0.1",
     "@vidstack/react": "next",
-    "dompurify": "^3.2.0",
+    "isomorphic-dompurify": "^2.19.0",
     "lit": "^3.2.1",
     "motion": "^11.11.17",
     "react": "^18.2.0",

diff --git a/packages/editor/src/editor-integration/create-renderers.tsx b/packages/editor/src/editor-integration/create-renderers.tsx
@@ -30,6 +30,7 @@ import { TextAreaExerciseStaticRenderer } from '@editor/plugins/text-area-exerci
 import { VideoStaticRenderer } from '@editor/plugins/video/static'
 import { EditorPluginType } from '@editor/types/editor-plugin-type'
 import { TemplatePluginType } from '@editor/types/template-plugin-type'
+import { sanitizeHref } from '@editor/utils/sanitize-href'
 import { ComponentProps } from 'react'
 
 export function createRenderers(): InitRenderersArgs {
@@ -127,7 +128,7 @@ export function createRenderers(): InitRenderersArgs {
       return (
         <a
           className="serlo-link cursor-pointer"
-          href={href}
+          href={sanitizeHref(href)}
           target="_blank"
           rel="noopener noreferrer"
         >

diff --git a/packages/editor/src/plugins/text/hooks/use-slate-render-handlers.tsx b/packages/editor/src/plugins/text/hooks/use-slate-render-handlers.tsx
@@ -1,3 +1,4 @@
+import { sanitizeHref } from '@editor/utils/sanitize-href'
 import { createElement, useCallback } from 'react'
 import { RenderElementProps, RenderLeafProps } from 'slate-react'
 
@@ -29,7 +30,7 @@ export const useSlateRenderHandlers = ({
       if (element.type === 'a') {
         return (
           <a
-            href={element.href}
+            href={sanitizeHref(element.href)}
             className="serlo-link cursor-pointer"
             {...attributes}
           >

diff --git a/packages/editor/src/utils/sanitize-href.ts b/packages/editor/src/utils/sanitize-href.ts
@@ -0,0 +1,11 @@
+import DOMPurify from 'isomorphic-dompurify'
+
+export function sanitizeHref(href: string) {
+  // Users can add links to content in the editor. So, href can be manipulated by the user and could potentially be abused to inject malicious javascript. We use DOMPurify to validate the href.
+  // Examples:
+  // - 'javascript:doSomethingBad()' -> invalid
+  // - 'https://example.com/' -> valid
+  const isHrefValid = DOMPurify.isValidAttribute('a', 'href', href)
+
+  return isHrefValid ? href : ''
+}