解决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信任的。

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

anonymoususe-credentials
用途匿名请求跨域图片资源,不会发送证书(比如cookie等)具名请求跨域图片资源,会携带证书数据
Request Headersoriginorigin、cookie
Response headersAccess-Control-Allow-OriginAccess-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
13 声望
1 粉丝
0 条评论
推荐阅读
由z-index属性,引发对层叠上下文的全面认知
在日常开发中,经常使用z-index样式属性调整元素的层级大小。一般情况下,都能达到元素之间覆盖效果的要求。但在某些场景下,不论定位元素z-index属性值设置多大,都无法在页面的最顶层呈现。虽然可以可以把该元...

尽吾志者阅读 642

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木143阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
13 声望
1 粉丝
宣传栏