chore: proxy image preview in frontend (#11957)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
	- Images and icons in bookmark cards are now loaded through an image proxy for improved reliability and consistency.
	- Embed blocks for GitHub, Loom, and YouTube now display banner and creator images via an image proxy service for enhanced image loading.

- **Refactor**
	- Simplified backend URL handling and proxy logic for images, resulting in more efficient processing and reduced complexity.
	- Consolidated image proxy middleware and services into a shared adapter module for streamlined imports and improved maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/backend/server/src/__tests__/__snapshots__/worker.e2e.ts.md

@@ -67,10 +67,10 @@ Generated by [AVA](https://avajs.dev).
     {
       description: 'Test Description',
       favicons: [
-        'http://localhost:3010/api/worker/image-proxy?url=https%3A%2F%2Fexample.com%2Ffavicon.ico',
+        'http://example.com/favicon.ico',
       ],
       images: [
-        'http://localhost:3010/api/worker/image-proxy?url=https%3A%2F%2Fexample.com%2Fimage.png',
+        'http://example.com/image.png',
       ],
       title: 'Test Title',
       url: 'http://example.com/page',
@@ -82,7 +82,7 @@ Generated by [AVA](https://avajs.dev).
     {
       charset: 'gbk',
       favicons: [
-        'http://localhost:3010/api/worker/image-proxy?url=https%3A%2F%2Fexample.com%2Ffavicon.ico',
+        'http://example.com/favicon.ico',
       ],
       images: [],
       title: '你好，世界。',
@@ -95,7 +95,7 @@ Generated by [AVA](https://avajs.dev).
     {
       charset: 'shift_jis',
       favicons: [
-        'http://localhost:3010/api/worker/image-proxy?url=https%3A%2F%2Fexample.com%2Ffavicon.ico',
+        'http://example.com/favicon.ico',
       ],
       images: [],
       title: 'こんにちは、世界。',
@@ -108,7 +108,7 @@ Generated by [AVA](https://avajs.dev).
     {
       charset: 'big5',
       favicons: [
-        'http://localhost:3010/api/worker/image-proxy?url=https%3A%2F%2Fexample.com%2Ffavicon.ico',
+        'http://example.com/favicon.ico',
       ],
       images: [],
       title: '你好，世界。',
@@ -121,7 +121,7 @@ Generated by [AVA](https://avajs.dev).
     {
       charset: 'euc-kr',
       favicons: [
-        'http://localhost:3010/api/worker/image-proxy?url=https%3A%2F%2Fexample.com%2Ffavicon.ico',
+        'http://example.com/favicon.ico',
       ],
       images: [],
       title: '안녕하세요, 세계.',

packages/backend/server/src/plugins/worker/controller.ts

@@ -209,7 +209,6 @@ export class WorkerController {
         videos: [],
         favicons: [],
       };
-      const baseUrl = new URL(request.url, this.url.baseUrl).toString();
 
       if (response.body) {
         const resp = await decodeWithCharset(response, res);
@@ -276,7 +275,7 @@ export class WorkerController {
 
         await rewriter.transform(resp).text();
 
-        res.images = await reduceUrls(baseUrl, res.images);
+        res.images = await reduceUrls(res.images);
 
         this.logger.debug('Processed response with HTMLRewriter', {
           origin,
@@ -293,7 +292,7 @@ export class WorkerController {
           appendUrl(faviconUrl.toString(), res.favicons);
         }
 
-        res.favicons = await reduceUrls(baseUrl, res.favicons);
+        res.favicons = await reduceUrls(res.favicons);
       }
 
       const json = JSON.stringify(res);

packages/backend/server/src/plugins/worker/utils/index.ts

@@ -1,5 +1,4 @@
 export * from './headers';
-export * from './proxy';
 export * from './url';
 
 export function parseJson<T>(data: string): T | null {

packages/backend/server/src/plugins/worker/utils/proxy.ts

@@ -1,54 +0,0 @@
-const IMAGE_PROXY = '/api/worker/image-proxy';
-
-const httpsDomain = new Set();
-
-async function checkHttpsSupport(url: URL): Promise<boolean> {
-  const httpsUrl = new URL(url.toString());
-  httpsUrl.protocol = 'https:';
-  try {
-    const response = await fetch(httpsUrl, {
-      method: 'HEAD',
-      redirect: 'manual',
-    });
-
-    if (response.ok || (response.status >= 400 && response.status < 600)) {
-      return true;
-    }
-  } catch {}
-  return false;
-}
-
-async function fixProtocol(url: string): Promise<URL> {
-  const targetUrl = new URL(url);
-  if (targetUrl.protocol !== 'http:') {
-    return targetUrl;
-  } else if (httpsDomain.has(targetUrl.hostname)) {
-    targetUrl.protocol = 'https:';
-    return targetUrl;
-  } else if (await checkHttpsSupport(targetUrl)) {
-    httpsDomain.add(targetUrl.hostname);
-    targetUrl.protocol = 'https:';
-    return targetUrl;
-  }
-  return targetUrl;
-}
-
-export function imageProxyBuilder(
-  url: string
-): (url: string) => Promise<string | undefined> {
-  try {
-    const proxy = new URL(url);
-    proxy.pathname = IMAGE_PROXY;
-
-    return async url => {
-      try {
-        const targetUrl = await fixProtocol(url);
-        proxy.searchParams.set('url', targetUrl.toString());
-        return proxy.toString();
-      } catch {}
-      return;
-    };
-  } catch {
-    return async url => url.toString();
-  }
-}

packages/backend/server/src/plugins/worker/utils/url.ts

@@ -1,7 +1,5 @@
 import { getDomain, getSubdomain } from 'tldts';
 
-import { imageProxyBuilder } from './proxy';
-
 const localhost = new Set(['localhost', '127.0.0.1']);
 
 const URL_FIXERS: Record<string, (url: URL) => URL> = {
@@ -58,11 +56,6 @@ export function appendUrl(url: string | null, array?: string[]) {
   }
 }
 
-export async function reduceUrls(baseUrl: string, urls?: string[]) {
-  if (urls && urls.length > 0) {
-    const imageProxy = imageProxyBuilder(baseUrl);
-    const newUrls = await Promise.all(urls.map(imageProxy));
-    return newUrls.filter((x): x is string => !!x);
-  }
-  return [];
+export async function reduceUrls(urls: string[] = []) {
+  return Array.from(new Set(urls.filter(Boolean) as string[]));
 }

packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts

@@ -1,11 +1,11 @@
 import { createReactComponentFromLit } from '@affine/component';
-import {
-  defaultImageProxyMiddleware,
-  ImageProxyService,
-} from '@blocksuite/affine/blocks/image';
 import { Container, type ServiceProvider } from '@blocksuite/affine/global/di';
 import { WithDisposable } from '@blocksuite/affine/global/lit';
-import { codeBlockWrapMiddleware } from '@blocksuite/affine/shared/adapters';
+import {
+  codeBlockWrapMiddleware,
+  defaultImageProxyMiddleware,
+  ImageProxyService,
+} from '@blocksuite/affine/shared/adapters';
 import {
   LinkPreviewerService,
   ThemeProvider,

packages/frontend/core/src/blocksuite/ai/utils/editor-actions.ts

@@ -1,5 +1,5 @@
-import { defaultImageProxyMiddleware } from '@blocksuite/affine/blocks/image';
 import { deleteTextCommand } from '@blocksuite/affine/inlines/preset';
+import { defaultImageProxyMiddleware } from '@blocksuite/affine/shared/adapters';
 import { isInsideEdgelessEditor } from '@blocksuite/affine/shared/utils';
 import {
   type BlockComponent,

packages/frontend/core/src/blocksuite/block-suite-editor/blocksuite-editor.tsx

@@ -10,14 +10,14 @@ import {
 } from '@affine/core/modules/editor-setting';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import track from '@affine/track';
-import {
-  customImageProxyMiddleware,
-  ImageProxyService,
-} from '@blocksuite/affine/blocks/image';
 import { appendParagraphCommand } from '@blocksuite/affine/blocks/paragraph';
 import type { DocTitle } from '@blocksuite/affine/fragments/doc-title';
 import { DisposableGroup } from '@blocksuite/affine/global/disposable';
 import type { DocMode, RootBlockModel } from '@blocksuite/affine/model';
+import {
+  customImageProxyMiddleware,
+  ImageProxyService,
+} from '@blocksuite/affine/shared/adapters';
 import { focusBlockEnd } from '@blocksuite/affine/shared/commands';
 import { LinkPreviewerService } from '@blocksuite/affine/shared/services';
 import { getLastNoteBlock } from '@blocksuite/affine/shared/utils';

packages/frontend/core/src/blocksuite/utils/markdown-utils.ts

@@ -1,7 +1,7 @@
 import { WorkspaceImpl } from '@affine/core/modules/workspace/impls/workspace';
-import { defaultImageProxyMiddleware } from '@blocksuite/affine/blocks/image';
 import type { ServiceProvider } from '@blocksuite/affine/global/di';
 import {
+  defaultImageProxyMiddleware,
   embedSyncedDocMiddleware,
   MarkdownAdapter,
   MixTextAdapter,

packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx

@@ -21,12 +21,12 @@ import { WorkbenchService } from '@affine/core/modules/workbench';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
 import { WorkspaceService } from '@affine/core/modules/workspace';
 import { i18nTime } from '@affine/i18n';
+import { DisposableGroup } from '@blocksuite/affine/global/disposable';
+import { RefNodeSlotsProvider } from '@blocksuite/affine/inlines/reference';
 import {
   customImageProxyMiddleware,
   ImageProxyService,
-} from '@blocksuite/affine/blocks/image';
-import { DisposableGroup } from '@blocksuite/affine/global/disposable';
-import { RefNodeSlotsProvider } from '@blocksuite/affine/inlines/reference';
+} from '@blocksuite/affine/shared/adapters';
 import { LinkPreviewerService } from '@blocksuite/affine/shared/services';
 import {
   FrameworkScope,