Canvas图形渲染安全：防止跨域污染（CORS）与图片绘制-H5教程-PHP中文网

canvas跨域图片导出失败的核心原因是画布被污染，需同时满足前端设置crossorigin='anonymous'和后端返回合法cors响应头（如access-control-allow-origin），否则todataurl等读取操作将被拦截。

canvas图形渲染安全：防止跨域污染（cors）与图片绘制

Canvas 渲染跨域图片时，最核心的安全限制不是“画不出来”，而是“画出来后读不了”——一旦图片未经合规跨域授权就绘制到画布上，canvas 就会被标记为“污染状态”，后续所有像素读取操作（toDataURL()、toBlob()、getImageData()）都会被浏览器拦截并抛出安全异常。

这个机制不是 bug，是浏览器主动实施的防护：防止恶意页面偷偷加载用户头像、私有相册等敏感资源，再用 canvas 提取像素数据上传到第三方服务器。

要让跨域图片既能正常绘制，又能安全导出，必须同时满足两个条件：前端显式声明跨域意图 + 后端明确授权访问。

图片加载前必须设置 `crossOrigin = 'anonymous'`

仅把 <img> 标签或 new Image() 实例的 src 指向跨域地址，是不够的。浏览器默认按“同源方式”加载，即使图片显示出来了，画布也会被污染。

正确做法是在加载前设置 crossOrigin 属性：

const img = new Image();
img.crossOrigin = 'anonymous'; // 关键！必须写在 src 之前
img.src = 'https://cdn.example.com/photo.jpg';
img.onload = () => {
  ctx.drawImage(img, 0, 0);
  const dataUrl = canvas.toDataURL(); // ✅ 此时不会报错
};

HTML 中也一样：

@@##@@

⚠️ 注意：

'use-credentials' 会要求携带 cookie，多数 CDN 不支持，且与 Access-Control-Allow-Origin: * 冲突，一般不用；
设置了 crossOrigin 后，浏览器会发起带 Origin 头的 CORS 请求，服务端必须响应匹配的 Access-Control-Allow-Origin，否则请求失败，图片加载不出。

服务端必须返回合法的 CORS 响应头

前端设了 crossOrigin，只是发出了“申请”，最终是否放行，取决于服务端响应头。

最常用且安全的配置是：

Access-Control-Allow-Origin: https://your-app.com

如果确需开放给所有站点（如公开图床），可用：

Canvas

在网页画布上显示并控制已连接 Mac、iOS 或 Android 节点的 HTML 内容，支持实时重载和远程操作。

下载

Access-Control-Allow-Origin: *

但注意：* 不能和 Access-Control-Allow-Credentials: true 共存；若需传 cookie，必须指定具体域名。

其他辅助头（尤其对 CDN 或 Nginx 部署）建议一并加上：

Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With
Access-Control-Expose-Headers: Content-Length,Content-Type

验证方式很简单：打开浏览器开发者工具 → Network → 找到该图片请求 → 查看 Response Headers 是否包含上述字段。没有，前端再怎么设 crossOrigin 都无效。

当你无法控制图片服务端时，用代理或 Blob 绕过

有些场景下，图片来自第三方平台（如微信头像、微博图床、未开启 CORS 的旧系统），你无法修改其响应头。这时可采用两种稳妥方案：

后端代理转发
前端请求自己的接口（如 /api/proxy-image?url=https://xxx.com/1.jpg），后端用 HTTP 客户端拉取图片，原样返回，并带上 Access-Control-Allow-Origin 头。这是最稳定、兼容性最好的方式。

Fetch + Blob URL 替代 Image.src
绕开浏览器对 img.src 的缓存干扰（比如同一 URL 先被普通 <img crossorigin="anonymous" src="https://cdn.example.com/photo.jpg?x-oss-process=image/resize,p_40"> 加载过，再进 canvas 就可能复用非 CORS 缓存）：

fetch('https://xxx.com/photo.jpg', { mode: 'cors', cache: 'no-store' })
  .then(res => res.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 仍建议保留
    img.onload = () => {
      ctx.drawImage(img, 0, 0);
      URL.revokeObjectURL(url); // 用完及时释放
    };
    img.src = url;
  });

这种方式不依赖服务端 CORS，但增加了网络请求和内存开销，适合临时或低频使用。