fix: suppress CORS flood from excalidraw.com/og-image-3.png fetch

2026-06-25 00:52:35 +02:00
parent 9e53a9b92c
commit bb710b46b0
2 changed files with 53 additions and 0 deletions
@@ -114,6 +114,45 @@ These are **not documented/working props** in `@excalidraw/excalidraw` v0.18.x
 and were ignored by the library. The collab URL is hardcoded in the npm bundle
 and connects to `wss://oss-collab.excalidraw.com` by default — this is fine.

+### 12. CORS Flood Suppression (`og-image-3.png`)
+
+**Problem:** `@excalidraw/excalidraw` v0.18 internally fetches
+`https://excalidraw.com/og-image-3.png` (social-share preload) via `fetch()` on
+mount. On non-excalidraw.com origins, the server's CORS header doesn't match →
+6× CORS errors flood the console, drowning out real logs.
+
+**Fix:** fetch interceptor in `frontend/index.html` `<head>`.
+Returns 204 No Content immediately for any `fetch()` whose URL contains
+`og-image-3.png`. Request never leaves the browser → no CORS preflight →
+no error.
+
+```html
+<script>
+window.fetch = new Proxy(window.fetch, {
+  apply(target, thisArg, args) {
+    var url = args[0];
+    if (typeof url === 'string' && url.indexOf('og-image-3.png') !== -1) {
+      return Promise.resolve(new Response(null, { status: 204 }));
+    }
+    return Reflect.apply(target, thisArg, args);
+  }
+});
+</script>
+```
+
+**Why not nginx:** The browser fetches directly from `excalidraw.com`, not
+through the fork's reverse proxy. Nginx on the fork domain never sees the
+request. A DNS-level intercept (pointing `excalidraw.com` at your own nginx)
+would work, but requires SSL certs for `excalidraw.com` and control over DNS
+resolution — not available in a hosted web-editor NPM setup.
+
+**Scope:** Single hardcoded URL inside the npm package — no other references in
+the repo's own code (`src/`, `frontend/`, configs, docs — 111 files searched, 0
+hits).
+
+**To verify:** Open browser console after deploy — zero CORS errors from
+`og-image-3.png`.
+
 ---

 ## What Still Needs Work
@@ -725,6 +725,20 @@
            gap: 10px;
        }
    </style>
+    <!-- CORS flood suppressor: intercepts @excalidraw/excalidraw internal fetch to
+         https://excalidraw.com/og-image-3.png which triggers 6× CORS errors on
+         non-excalidraw.com origins. Returns 204 immediately, never leaves browser. -->
+    <script>
+    window.fetch = new Proxy(window.fetch, {
+      apply(target, thisArg, args) {
+        var url = args[0];
+        if (typeof url === 'string' && url.indexOf('og-image-3.png') !== -1) {
+          return Promise.resolve(new Response(null, { status: 204 }));
+        }
+        return Reflect.apply(target, thisArg, args);
+      }
+    });
+    </script>
 </head>
 <body>
    <div id="root"></div>