Hice una configuración reciente del bucket de carga de Cloudflare R2 y las miniaturas de chat se rompieron. Así que investigué un poco, corregí rápidamente mi configuración y encontré este tema: Cloudflare R2 Image URL Display Issue: Detailed Explanation and Fix. De todos modos, revisé otras configuraciones de buckets de carga S3 y noté que el error no era realmente un problema específico de Cloudflare.
Descripción
Cuando se configura un almacenamiento de objetos externo S3 o compatible para cargas, las imágenes de miniatura de chat omiten la CDN y se cargan directamente desde la URL del bucket.
Para buckets externos compatibles con S3 seguros, como Cloudflare R2, las miniaturas de chat se rompen y no se muestran.
El problema subyacente es que el serializador de chat no logra aplicar la configuración s3_cdn_url a las miniaturas. En lugar de enrutar la imagen a través de la CDN configurada, filtra la URL interna cruda del bucket S3 directamente en las cargas útiles del navegador.
Pasos para reproducir
Esto es reproducible en Meta y otros sitios que utilizan buckets de carga S3:
- Publica una imagen en un chat o canal.
- Inspecciona la URL de la imagen de miniatura en la consola.
- Haz clic en la imagen para obtener la original más grande e inspecciona la URL.
- Compárala con la miniatura.
Aquí hay un ejemplo de un chat de Meta:
URL de la miniatura: desde el bucket
https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/optimized/4X/4/7/9/479815360e0e6e0cd9f4ba565891776e84aea532_2_375x500.jpeg
URL original: vía CDN
https://global.discourse-cdn.com/meta/original/4X/4/7/9/479815360e0e6e0cd9f4ba565891776e84aea532.jpeg
En la consola, el HTML de la miniatura <img... contiene data-large-src = URL de CDN de CloudFront y src = URL del bucket de AWS.
Impacto:
- Para almacenamiento compatible con S3 como Cloudflare R2, que son seguros por defecto y bloquean el acceso no autenticado a los puntos de conexión crudos del bucket, las imágenes de miniatura de chat (optimizadas) se rompen.
- Fugas de anchoa de banda para AWS y otros buckets de almacenamiento de objetos compatibles con S3 que permiten el acceso a puntos de conexión crudos del bucket, ya que el chat omite la CDN por completo; esto resulta en pagar tarifas de salida de S3 directas por todo el tráfico de miniaturas de chat.
- Fuga de infraestructura: las URL de almacenamiento backend crudas (incluidos nombres de buckets internos y, a veces, IDs de cuenta) se exponen en las cargas útiles JSON del cliente.
PR:
Tengo un PR para solucionar el problema aquí:
Parece que Sam agregó getURLWithCDN a la vista previa del compositor de chat; sin embargo, no creo que llegue al flujo de chat.
Me pregunto si la corrección del compositor podría haber fallado para algunas configuraciones de S3 también, porque getURLWithCDN se cae ante discrepancias de protocolo (// vs https://). De todos modos, el PR anterior simplemente extiende el trabajo de Sam agregando los envoltorios al flujo y haciéndolo agnóstico al protocolo.
Solución temporal:
Antes de darme cuenta de que esto era más que un problema de Cloudflare, creé un componente de tema ligero. Intercepta los dominios S3 crudos en el DOM de Chat y los reemplaza por el dominio CDN correcto antes de que el navegador intente descargarlos. Esto enruta el tráfico correctamente y tapa la fuga de anchoa de banda. Lo adapté para que funcione con cualquier almacenamiento de objetos compatible con S3. Solo dos configuraciones: URL cruda del bucket S3 y URL CDN de S3.
(no tengo idea de por qué las oneboxes de GitHub están rotas aquí) Corregido ahora