fix(link-renderer): use sanitizeHref whenever a text plugin link is…

… rendered

apps/web/src/serlo-editor-integration/create-renderers.tsx

@@ -29,7 +29,7 @@ import type {
   EditorDropzoneImageDocument,
   EditorInteractiveVideoDocument,
 } from '@editor/types/editor-plugins'
-import DOMPurify from 'dompurify'
+import { sanitizeHref } from '@editor/utils/sanitize-href'
 import dynamic from 'next/dynamic'
 import { ComponentProps } from 'react'
 
@@ -261,14 +261,9 @@ export function createRenderers(): InitRenderersArgs {
         </Lazy>
       ),
     linkRenderer: ({ href, children }: ComponentProps<LinkRenderer>) => {
-      // 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 (
         <>
-          <Link href={isHrefValid ? href : ''}>{children}</Link>
+          <Link href={sanitizeHref(href)}>{children}</Link>
           <ExtraInfoIfRevisionView>{href}</ExtraInfoIfRevisionView>
         </>
       )

packages/editor/src/editor-integration/create-renderers.tsx

@@ -30,7 +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 DOMPurify from 'dompurify'
+import { sanitizeHref } from '@editor/utils/sanitize-href'
 import { ComponentProps } from 'react'
 
 export function createRenderers(): InitRenderersArgs {
@@ -125,15 +125,10 @@ export function createRenderers(): InitRenderersArgs {
     ],
     mathRenderer: (element: MathElement) => <StaticMath {...element} />,
     linkRenderer: ({ href, children }: ComponentProps<LinkRenderer>) => {
-      // 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 (
         <a
           className="serlo-link cursor-pointer"
-          href={isHrefValid ? href : ''}
+          href={sanitizeHref(href)}
           target="_blank"
           rel="noopener noreferrer"
         >

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}
           >

packages/editor/src/utils/sanitize-href.ts

@@ -0,0 +1,11 @@
+import DOMPurify from '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 : ''
+}