Embed Basic

import React from 'react'import type { EmbedBasicBlock as EmbedBasicBlockData } from '@/payload-types'import { getSafeEmbedUrl } from '@/blocks/shared/safeUrls'import { cn } from '@/utilities/ui'type Props = EmbedBasicBlockData & {  id?: string  className?: string}const aspectClassByRatio: Record<NonNullable<EmbedBasicBlockData['aspectRatio']>, string> = {  '16:9': 'aspect-video',  '4:3': 'aspect-[4/3]',  '1:1': 'aspect-square',  '21:9': 'aspect-[21/9]',}export const EmbedBasicBlock: React.FC<Props> = ({  allowFullscreen,  aspectRatio,  caption,  className,  id,  title,  url,}) => {  const aspectClass = aspectClassByRatio[aspectRatio ?? '16:9'] ?? aspectClassByRatio['16:9']  const safeUrl = getSafeEmbedUrl(url)  return (    <section className={cn('container', className)} id={id ? `block-${id}` : undefined}>      <figure className="overflow-hidden rounded-frame border border-border/70 bg-card/35">        <div className={cn('relative w-full bg-muted', aspectClass)}>          {safeUrl ? (            <iframe              allow="encrypted-media; picture-in-picture"              allowFullScreen={allowFullscreen ?? true}              className="absolute inset-0 h-full w-full border-0"              loading="lazy"              referrerPolicy="strict-origin-when-cross-origin"              sandbox="allow-forms allow-popups allow-presentation allow-scripts"              src={safeUrl}              title={title}            />          ) : null}        </div>        {caption ? (          <figcaption className="px-6 py-4 text-sm text-muted-foreground">{caption}</figcaption>        ) : null}      </figure>    </section>  )}

const approvedEmbedHosts = new Set([  'airtable.com',  'docs.google.com',  'form.typeform.com',  'lookerstudio.google.com',  'maps.google.com',  'player.vimeo.com',  'vimeo.com',  'www.airtable.com',  'www.google.com',  'www.youtube-nocookie.com',  'www.youtube.com',  'youtube-nocookie.com',  'youtube.com',])const approvedEmbedHostSuffixes = [  '.airtable.com',  '.google.com',  '.typeform.com',  '.vimeo.com',  '.youtube-nocookie.com',  '.youtube.com',]const embedUrlError = 'Use an approved HTTPS embed URL.'const formActionError = 'Use a same-origin path, such as /api/newsletter.'const sameOriginBase = 'https://payload-components.local'const isApprovedEmbedHost = (hostname: string) => {  const normalizedHost = hostname.toLowerCase()  return (    approvedEmbedHosts.has(normalizedHost) ||    approvedEmbedHostSuffixes.some((suffix) => normalizedHost.endsWith(suffix))  )}export const getSafeEmbedUrl = (value: unknown) => {  if (typeof value !== 'string') return undefined  const trimmed = value.trim()  if (!trimmed) return undefined  try {    const parsed = new URL(trimmed)    if (parsed.protocol !== 'https:' || parsed.username || parsed.password) {      return undefined    }    if (!isApprovedEmbedHost(parsed.hostname)) {      return undefined    }    return parsed.toString()  } catch {    return undefined  }}export const validateEmbedUrl = (value: unknown) => getSafeEmbedUrl(value) ? true : embedUrlErrorexport const getSafeFormAction = (value: unknown) => {  if (typeof value !== 'string') return undefined  const trimmed = value.trim()  if (!trimmed || !trimmed.startsWith('/') || trimmed.startsWith('//') || trimmed.includes('\\')) {    return undefined  }  try {    const parsed = new URL(trimmed, sameOriginBase)    if (parsed.origin !== sameOriginBase) {      return undefined    }    return `${parsed.pathname}${parsed.search}${parsed.hash}`  } catch {    return undefined  }}export const validateSameOriginFormAction = (value: unknown) => {  if (value === null || value === undefined || (typeof value === 'string' && value.trim() === '')) {    return true  }  return getSafeFormAction(value) ? true : formActionError}