分类:JavaScript
日期:2021年5月15日

谷歌浏览器缓存导致跨域,造成tainted canvas错误

最近工作中遇到了一个canvas绘制image的错误。是由于canvas在使用其他源的图片的时候,造成跨域导致,遇到这种问题一般我们只需要将图片的crossorigin设置下,然后请求响应头也需要设置access-control-allow-origin,即可解决问题。但是我遇到的问题比这要复杂一些,因为在前端和服务端都设置好的情况下,我的问题依然存在,依然报跨域。接下来我将详细解释相关内容。

cors图片

一. 同源限制

因为问题产生的根本原因时浏览器的同源限制(same-origin-policy)导致,所以我将简要介绍下这个概念。

浏览器安全的根基就是同源限制,何为同源限制呢,当且仅当两个域名满足以下三点,我们认为这两个域名是同源的:

  • 协议相同
  • 域名相同
  • 端口相同

有一点需要注意的是,标准规定的端口相同的才同源,但是浏览器并没有遵循这一项规定,也就是说如果两个网站协议相同,域名相同但是端口不相同,那么浏览器也认为其是同源的,例如http:://www.pengfeixc.com:8000http://www.pengfeixc.com:8001这两个地址只有端口不一样,它们是不同源的,但是由于浏览器并未遵循这一规定,所以浏览器认为它们是同源的,所以它们是可以互相读取cookie的。

同源限制的目的是为了保证互联网的用户安全信息的,如果没有同源限制,不同源的网站可以互相读取cookie的话,那么会很危险的。设想一下,如果网站A把用户信息存储在cookie中,如果没有同源限制的情况下,网站B也可以读取网站A存储的cookie来获取用户信息,如果是比较重要的用户信息,那么后果将不敢想象。

所以出现了CORS(cross origin resource share),即跨域资源共享。在请求非同源资源的时候必须通过CORS方式请求。 关于CORS,我就不在展开了,它就是一种请求非同源资源的方式。可以在https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS 上获取详细信息。

二.crossorigin属性

html5中一些html元素增加了crossorigin属性,提供了对cors的支持。例如<audio><img><link><script><video>都可以通过设置crossorigin属性来改变普通请求方式为cors请求。以img为例

<!-- 以非跨域请求方式请求/1.jpg -->
<img src="/1.jpg"  alt="图片" />
<!-- 以cors请求方式请求http://www.example.com/image/1.jpg -->
<img src="http://www.example.com/image/1.jpg" alt="图片" crossorigin="anonymous" />

crossorigin有如下取值:

  • anonymous:执行一个cors请求,但是该请求不会发送相关证书,例如cookie。服务器需要相应的设置Access-control-Allow-Origin响应头,图片才是未被污染的。

  • use-credentials: 执行一个cors请求,该请求会发送相关证书,携带cookie和http基本验证信息。服务器需要相应设置Access-Control-Allow-Origin响应头。

如果没有显示设置crossorigin属性,那么请求会是非跨域请求,如果图片来自非同源地址,那么该图片认为是被污染的。如果我们在canvas上绘制该图片,那么canvas将被认为是污染(tainted)的,被污染的canvas不能使用如下方法:

  • 在canvas context上调用getImageData()
  • 在canvas元素上调用toBlob()
  • 在canvas元素上调用toDataURL()

总结就是我们不能在被污染的canvas上获取图片相关信息,所以要避免这中问题,就需要设置图片的crossorigin属性,当然服务端也需要设置响应头。

三.浏览器缓存

我在查阅了很多资料后,image的crossorigin属性也设置了,一般应该是没有问题了,但是浏览器还是报错,图片跨域!!!

整个人快整懵了,崩溃了。后来发现罪魁祸首是浏览器缓存导致的。因为我在css样式中提前引入了非同源地址的图片作为背景图,代码类似如下:

{
    background: url("http://www.example.com/1.jpg");
}

背景图的url与当前网站是非同源的,css在请求的时候是以普通请求(非cors方式)请求的,所以请求到的图片是污染的图片,在canvas中直接使用后,肯定是不能获取该图片数据的(getImageData、toBlob和toDataURL方法报错)。虽然我在canvas中使用的图片已经设置过了crossorigin属性但是其地址也是http://www.example.com/1.jpg,与我上面用到的背景图地址相同,谷歌浏览器为了用户体验,直接使用缓存的图片,也就是背景图,但是这背景图是以非同源方式请求的啊。这下该怎么办。我又不能设置css背景图以cors方式请求,html并没有提供类似的corssorigin属性来设置background image。所以要么我更改背景图片,要么另寻他法。

四.解决

发现了问题,就要去解决。在查找了大量的资料,最后找到了一个方法,就是在每次请求图片的时候加一个timestamp参数,这样可以强制浏览器不使用缓存的图片。每次在canvas上绘制图片时,重新请求的图片地址加上当前的时间戳参数。

`http:://www.example.com/1.jpg?timestamp=${Date.now()}`

因为每次请求的地址不一样,所以浏览器不可能在从缓存中找到它认为相同的图片了。至此问题终于被解决了😄。

(完)

留言(0
发表评论
邮箱地址不会被公开。*表示必填项。
评论(支持部分html标签)*
姓名*
站点