Sanitise URLs in document field fields.url on input (#9686)

Co-authored-by: Daniel Cousens <dcousens@users.noreply.github.com>

Author: dcousens

.changeset/fix-document-uris.mx

@@ -1,5 +1,5 @@
 ---
-"@keystone-6/fields-document": patch
+"@keystone-6/fields-document": major
 ---
 
-Use `new URL` rather than `encodeURI` when validating, and sanitize user input
+Changes `fields.url` and document links to sanitise and `encodeURI` on blur

docs/components/docs/Heading.tsx

@@ -3,7 +3,7 @@
 'use client'
 
 import slugify from '@sindresorhus/slugify'
-import { type ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 import { HeadingIdLink } from './CopyToClipboard'
 

packages/core/src/admin-ui/components/Logo.tsx

@@ -1,5 +1,6 @@
-import { type SVGAttributes } from 'react'
+import type { SVGAttributes } from 'react'
 import Link from 'next/link'
+
 import { css, tokenSchema } from '@keystar/ui/style'
 import { Heading } from '@keystar/ui/typography'
 

packages/core/src/fields/types/calendarDay/index.ts

@@ -1,22 +1,23 @@
-import type { SimpleFieldTypeInfo } from '../../../types'
+import type {
+  GArg,
+  GInputObjectType,
+  GList,
+  GNonNull,
+  InferValueFromInputType,
+} from '@graphql-ts/schema'
+
+import { g } from '../../..'
 import {
   type BaseListTypeInfo,
   type CommonFieldConfig,
   type FieldTypeFunc,
+  type SimpleFieldTypeInfo,
   fieldType,
   orderDirectionEnum,
 } from '../../../types'
-import { type CalendarDayFieldMeta } from './views'
-import { g } from '../../..'
 import { filters } from '../../filters'
-import { makeValidateHook, defaultIsRequired } from '../../non-null-graphql'
-import type {
-  GInputObjectType,
-  GArg,
-  GList,
-  GNonNull,
-  InferValueFromInputType,
-} from '@graphql-ts/schema'
+import { defaultIsRequired, makeValidateHook } from '../../non-null-graphql'
+import type { CalendarDayFieldMeta } from './views'
 
 export type CalendarDayFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
   ListTypeInfo,

packages/core/src/fields/types/relationship/index.ts

@@ -1,10 +1,10 @@
 import { g } from '../../..'
 import { type ListMetaSource, getAdminMetaForRelationshipField } from '../../../lib/admin-meta'
-import type { JSONValue } from '../../../types'
 import {
   type BaseListTypeInfo,
   type CommonFieldConfig,
   type FieldTypeFunc,
+  type JSONValue,
   fieldType,
 } from '../../../types'
 import type { controller } from './views'

packages/fields-document/src/DocumentEditor/component-blocks/api.tsx

@@ -110,6 +110,7 @@ export const fields = {
     label: string
     defaultValue?: string
   }): FormField<string, undefined> {
+    // TODO: use zod?
     const validate = (value: unknown) => {
       return typeof value === 'string' && (value === '' || isValidURL(value))
     }

packages/fields-document/src/DocumentEditor/component-blocks/fields-ui.tsx

@@ -11,6 +11,7 @@ import { TextField } from '@keystar/ui/text-field'
 import { VStack } from '@keystar/ui/layout'
 import { TagGroup } from '@keystar/ui/tag'
 import { Text } from '@keystar/ui/typography'
+import { sanitizeUrl } from '@braintree/sanitize-url'
 
 export { TextField, TextArea } from '@keystar/ui/text-field'
 export { Text } from '@keystar/ui/typography'
@@ -44,12 +45,25 @@ export function makeUrlFieldInput(opts: {
 }): FormField<string, unknown>['Input'] {
   return function UrlFieldInput({ autoFocus, forceValidation, onChange, value }) {
     const [isDirty, setDirty] = useState(false)
+
+    function onBlur() {
+      const sanitisedHref = encodeURI(sanitizeUrl(value))
+      if (value !== sanitisedHref && sanitisedHref !== 'about:blank') {
+        onChange(sanitisedHref)
+      }
+      setDirty(true)
+    }
+
     return (
       <TextField
         autoFocus={autoFocus}
         label={opts.label}
-        errorMessage={(forceValidation || isDirty) && !opts.validate(value) ? 'Invalid URL' : null}
-        onBlur={() => setDirty(true)}
+        errorMessage={
+          (forceValidation || isDirty) && !opts.validate(value)
+            ? 'This type of URL is not accepted'
+            : null
+        }
+        onBlur={onBlur}
         onChange={x => onChange?.(x)}
         value={value}
       />

packages/fields-document/src/DocumentEditor/heading.tsx

@@ -1,4 +1,4 @@
-import { type RenderElementProps } from 'slate-react'
+import type { RenderElementProps } from 'slate-react'
 
 export function HeadingElement({
   attributes,

packages/fields-document/src/DocumentEditor/lists.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { type Element, type Node } from 'slate'
+import type { Element, Node } from 'slate'
 
 import { useToolbarState } from './toolbar-state'
 import { toggleList } from './lists-shared'

packages/fields-document/src/DocumentEditor/pasting/utils.ts

@@ -1,5 +1,5 @@
-import { type Text } from 'slate'
-import { type Mark } from '../utils'
+import type { Text } from 'slate'
+import type { Mark } from '../utils'
 
 // a v important note
 // marks in the markdown ast/html are represented quite differently to how they are in slate