> ## Documentation Index
> Fetch the complete documentation index at: https://www.logo.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# CORS, canvas, and Content Security Policy

> img.logo.dev sends Access-Control-Allow-Origin on every response, so you can draw logos on a canvas, generate OG images, and render PDFs without a proxy.

Every response from `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:

```html theme={null}
<img
  src="https://img.logo.dev/stripe.com?token=LOGO_DEV_PUBLISHABLE_KEY"
  crossorigin="anonymous"
  alt="Stripe logo"
/>
```

Loading the image from script works the same way. Set `crossOrigin` before `src`:

```javascript theme={null}
const img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://img.logo.dev/stripe.com?token=LOGO_DEV_PUBLISHABLE_KEY";
img.onload = () => {
  ctx.drawImage(img, 0, 0);
  canvas.toDataURL(); // succeeds: the canvas is not tainted
};
```

## Allow img.logo.dev in your Content Security Policy

If your app sets a `Content-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`:

```http theme={null}
Content-Security-Policy: img-src 'self' https://img.logo.dev;
```

<Note>
  The REST APIs (`api.logo.dev`) take a [secret key](/platform/api-keys) 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.
</Note>

## 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:

```javascript theme={null}
const res = await fetch("https://img.logo.dev/stripe.com?token=LOGO_DEV_PUBLISHABLE_KEY");
const logo = await res.arrayBuffer();
// Satori and @vercel/og take the ArrayBuffer as-is (works on Edge runtimes).
// Node-only libraries (sharp, PDF kits) want Buffer.from(logo).
```

<Warning>
  A server-side fetch sends no `Referer` header. If your publishable key has
  [domain restrictions](/platform/api-keys#domain-restrictions) enabled, this
  request is blocked. Use a separate, unrestricted key for server-side
  rendering, or disable domain restrictions on the key you use here.
</Warning>

<Card title="Use Logo.dev with Next.js" href="/integrations/nextjs" icon="react">
  Add `img.logo.dev` to `remotePatterns` and render with `next/image`.
</Card>