mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-09 14:03:33 +09:00
kyrisuandOleg Isonen
847ab5e0cd
## Description When pasting HTML containing external image URLs (e.g. from Tailwind UI components), the server fetches those images with an `Accept` header that includes `image/avif`. Services like Unsplash that support `auto=format` perform content negotiation based on this header and serve AVIF data. Cloudflare Image Resizing cannot process AVIF as input, resulting in **ERROR 9520: Original image has unsupported format**. This PR adds a `RESIZABLE_IMAGE_MIME_TYPES` whitelist in the SDK containing only formats that Cloudflare Image Resizing supports as input (JPEG, PNG, GIF, WebP, SVG), and uses it in the `Accept` header when fetching external images during paste. Direct file uploads are unaffected — users can still upload AVIF files, which are stored as-is. Reference: https://developers.cloudflare.com/images/transform-images/#supported-input-formats ## Steps for reproduction 1. Open the builder and create or open a project 2. Copy this HTML to your clipboard: ```html <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-y=.8&w=2830&h=1500&q=80&blend=111827&sat=-100&exp=15&blend-mode=screen" alt="" class="absolute inset-0 -z-10 size-full object-cover object-right opacity-10 md:object-center" /> ``` 3. Paste it into the canvas 4. **Before fix:** Image fails to load with `ERROR 9520: Original image has unsupported format` 5. **After fix:** Image loads correctly — the server requests JPEG/PNG/GIF/WebP/SVG from Unsplash instead of AVIF ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [x] made a self-review - [x] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 0000) - Note: full verification requires the hosted environment with Cloudflare Image Resizing (`RESIZE_ORIGIN`) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env` file Co-authored-by: Oleg Isonen <oleg008@gmail.com>