img.logo.dev carries Access-Control-Allow-Origin: *. Set crossorigin="anonymous" and canvas calls like toDataURL() keep working without a proxy. For OG images and PDFs rendered on the server, fetch the bytes directly and skip CORS entirely.
Draw a logo on a canvas
A<canvas> taints when you draw a cross-origin image onto it, and a tainted canvas throws a SecurityError the moment you call toDataURL() or getImageData(). Set crossorigin="anonymous" so the browser makes a CORS request and keeps the canvas clean:
crossOrigin before src:
Allow img.logo.dev in your Content Security Policy
If your app sets aContent-Security-Policy, the browser blocks any image whose origin isn’t in img-src. The browser fires the image’s error event, the same as a broken link or a 404. The only trace is a CSP violation in the console. Add img.logo.dev to img-src:
The REST APIs (
api.logo.dev) take a secret key and
are server-side only, so they don’t need a connect-src entry for browser
code. If your own backend calls them, you don’t need a CSP change there
either. CSP only governs requests the browser makes directly.Generate OG images and PDFs on the server
For Open Graph images (Satori,@vercel/og), PDF or screenshot rendering (Puppeteer, Playwright), or image processing (sharp), fetch the logo on the server and pass the bytes to the renderer. A server-side fetch sidesteps canvas tainting entirely and keeps your publishable key out of the rendered output:
Use Logo.dev with Next.js
Add
img.logo.dev to remotePatterns and render with next/image.