解决canvas中获取跨域图片数据的问题

背景

在一张图片添加相关文字,然后转化为base64数据,上传至服务器。当代码上线写完部署到测试环境,控制台报出如下错题:

Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

经过排查,页面在请求图片时产生跨域情况,canvas认为该图片数据为 污染的数据,是不安全的数据,无法导出base64数据。

为什么 canvas 认为跨域图片数据为 污染的数据

当请求跨域图片数据,而未满足跨域请求资源的条件时。如果canvas使用未经跨域允许的图片的原始数据,这些是不可信的数据,可能会暴露页面的数据。

请求图片资源 - 同域

Request Headers带有cookie。图片数据是被canvas信任的。

请求图片资源 - 跨域

默认情况下,直接请求跨域图片。因为不符合跨域请求资源的条件,图片数据是不被canvas信任的。

为了解决图片跨域资源共享的问题, 元素提供了支持的属性:crossOrigin,该属性一共有两个值可选:anonymoususe-credentials,下面列举了两者的使用场景,以及满足的条件。

anonymous use-credentials
用途 匿名请求跨域图片资源,不会发送证书(比如cookie等) 具名请求跨域图片资源,会携带证书数据
Request Headers origin origin、cookie
Response headers Access-Control-Allow-Origin Access-Control-Allow-Origin、Access-Control-Allow-Credentials
所需条件 Access-Control-Allow-Origin 字段值需要包含请求域。 Access-Control-Allow-Origin 字段值需要包含请求域,且不能为通配符 *。Access-Control-Allow-Credentials 字段值需要为 true,表明允许请求发送证书数据。

代码示例:

// page origin is https://a.com

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
   context.drawImage(this, 0, 0);
   context.getImageData(0, 0, img.width, img.height);
};
img.src = 'https://b.com/a.png';

结束语

总结了请求图片资源的所有场景:同域、匿名跨域、具名跨域,以及跨域成功所需的条件。希望可以帮到遇到类似问题的小伙伴。

参考

  1. CORS_enabled_image
  2. HTMLImageElement.crossOrigin
  3. 跨源资源共享(CORS)
  4. 跨源相关机制综述(三):crossorigin属性
  5. canvas-todataurl-securityerror

你可能感兴趣的