@meistrari/tela-build 1.16.2 → 1.16.3

package/components/tela/avatar/avatar.vue

@@ -1,4 +1,6 @@
 <script setup lang=ts>
+import { sanitizeAvatarImageUrl } from '../../../utils/avatar'
+
 export type AvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
 const props = defineProps<{
@@ -44,6 +46,8 @@ const style = computed(() => ({
     width: `${sizes[resolvedSize.value].width}px`,
     height: `${sizes[resolvedSize.value].height}px`,
 }))
+const safeImage = computed(() => sanitizeAvatarImageUrl(props.image))
+
 watch(() => props.image, () => {
     errorLoadingImage.value = false
 })
@@ -58,10 +62,10 @@ watch(() => props.image, () => {
         flex items-center justify-center
         :style="style"
     >
-        <ClientOnly v-if="image && !errorLoadingImage">
+        <ClientOnly v-if="safeImage && !errorLoadingImage">
             <img
                 :alt="alt"
-                :src="image"
+                :src="safeImage"
                 :width="sizes[resolvedSize].width"
                 :height="sizes[resolvedSize].height"
                 loading="lazy"

package/components/tela/chat/command/mention/index.vue

@@ -111,7 +111,7 @@ onUnmounted(() => {
                 cursor-pointer
                 @click="$emit('select', member)"
             >
-                <TelaAvatar :src="member.avatarUrl" size="sm" />
+                <TelaAvatar :image="member.avatarUrl" size="sm" />
                 <div flex="~ col" gap-3px text-14px>
                     <div body-12-semibold>
                         {{ member.name }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.16.2",
+  "version": "1.16.3",
   "type": "module",
   "files": [
     "app.config.ts",

package/utils/avatar.ts

@@ -0,0 +1,137 @@
+const KNOWN_AVATAR_HOSTS = [
+    'googleusercontent.com',
+    'graph.microsoft.com',
+    'avatars.githubusercontent.com',
+    'gravatar.com',
+]
+const ALLOWED_BASE64_IMAGE_MIME_TYPES = [
+    'image/png',
+    'image/jpeg',
+    'image/jpg',
+    'image/webp',
+    'image/gif',
+    'image/avif',
+]
+const MAX_AVATAR_BYTES = 5 * 1024 * 1024
+
+type PublicRuntimeConfig = {
+    baseUrl?: string
+    authApiUrl?: string
+    avatarBucketUrl?: string
+    avatarAllowedOrigins?: string
+}
+
+function parseHost(value: string): string | undefined {
+    const trimmed = value.trim()
+    if (!trimmed)
+        return
+
+    try {
+        return new URL(trimmed).hostname.toLowerCase()
+    }
+    catch {
+        try {
+            return new URL(`https://${trimmed}`).hostname.toLowerCase()
+        }
+        catch {}
+
+        if (!/^[a-z0-9.-]+$/i.test(trimmed))
+            return
+
+        return trimmed.toLowerCase()
+    }
+}
+
+function getPublicRuntimeConfig(): PublicRuntimeConfig {
+    if (typeof window === 'undefined')
+        return {}
+
+    const nuxtWindow = window as typeof window & {
+        __NUXT__?: {
+            config?: {
+                public?: PublicRuntimeConfig
+            }
+        }
+    }
+
+    return nuxtWindow.__NUXT__?.config?.public ?? {}
+}
+
+function getConfiguredAvatarHosts(config: PublicRuntimeConfig): string[] {
+    const origins = [
+        config.baseUrl,
+        config.authApiUrl,
+        config.avatarBucketUrl,
+        ...(config.avatarAllowedOrigins?.split(',') ?? []),
+    ]
+
+    return origins
+        .filter((origin): origin is string => Boolean(origin))
+        .map(origin => parseHost(origin))
+        .filter((host): host is string => Boolean(host))
+}
+
+function isHostAllowed(host: string, allowedHosts: string[]): boolean {
+    const normalizedHost = host.toLowerCase()
+
+    return allowedHosts.some((allowedHost) => {
+        return normalizedHost === allowedHost || normalizedHost.endsWith(`.${allowedHost}`)
+    })
+}
+
+function isAllowedBase64DataImage(image: string): boolean {
+    const match = /^data:(image\/[a-z0-9.+-]+);base64,([a-z0-9+/]+=*)$/i.exec(image)
+    if (!match?.[1] || !match[2])
+        return false
+
+    const mimeType = match[1].toLowerCase()
+    if (!ALLOWED_BASE64_IMAGE_MIME_TYPES.includes(mimeType))
+        return false
+
+    const payload = match[2]
+    const padding = payload.endsWith('==') ? 2 : payload.endsWith('=') ? 1 : 0
+    const estimatedBytes = Math.floor((payload.length * 3) / 4) - padding
+
+    return estimatedBytes > 0 && estimatedBytes <= MAX_AVATAR_BYTES
+}
+
+export function sanitizeAvatarImageUrl(image?: string): string | undefined {
+    if (!image)
+        return
+
+    const trimmedImage = image.trim()
+    if (!trimmedImage)
+        return
+
+    if (isAllowedBase64DataImage(trimmedImage))
+        return trimmedImage
+
+    if (trimmedImage.startsWith('/'))
+        return trimmedImage
+
+    let parsedUrl: URL
+    try {
+        parsedUrl = new URL(trimmedImage)
+    }
+    catch {
+        return
+    }
+
+    if (!['http:', 'https:'].includes(parsedUrl.protocol))
+        return
+
+    const runtimeConfig = getPublicRuntimeConfig()
+    const allowedHosts = new Set([
+        ...KNOWN_AVATAR_HOSTS,
+        ...getConfiguredAvatarHosts(runtimeConfig),
+    ])
+
+    if (typeof window !== 'undefined' && window.location.hostname) {
+        allowedHosts.add(window.location.hostname.toLowerCase())
+    }
+
+    if (!isHostAllowed(parsedUrl.hostname, [...allowedHosts]))
+        return
+
+    return trimmedImage
+}