Question

图像上crossorigin属性的规范表明，当省略该属性时，请求处于No CORS状态。

https://html.spec.whatwg.org/multipage/infrastructure.html#cors-settings-attribute

在图片上不使用crossorigin属性的用例是什么？

仅供上下文;我目前正在使用同一个域和其他域中的图像使用canvas，我想知道在所有图像上crossorigin设置为anonymous是否存在任何安全性或其他问题？

修改：在Safari（Why does Safari throw CORS error when setting base64 data on a crossOrigin = 'Anonymous' image?）上使用data: uri时，使用crossorigin匿名似乎有问题

Answer 1

不在图像上使用crossorigin属性的用例是什么？

其中之一是，如果您希望显示来自未设置的服务器的跨域图像以接受匿名请求，并且不需要以编程方式导出画布结果。
如果您确实设置了crossOrigin属性，那么您的请求就会出错，您根本无法使用该资源。

＆＃13;

var url = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";

var cors = new Image();
cors.crossOrigin = 'anonymous';
cors.onload = function(){
    console.log("your browser doesn't support crossOrigin attribute");
  };
cors.onerror = function(){
   console.log('CORS failed');
  };
cors.src = url;

var nocors = new Image();
nocors.onload = function(){
   console.log('nocors loaded');
   // we can still display it
   c.width = this.width;
   c.height = this.height;
   var ctx = c.getContext('2d');
   ctx.fillStyle = 'green';
   ctx.fillRect(0,0,this.width,this.height);
   ctx.globalCompositeOperation = 'destination-atop';
   ctx.drawImage(this, 0,0);
  };
nocors.src = url;

＆＃13;

<canvas id="c"></canvas>

＆＃13;

我想知道在所有图片上将crossorigin设置为anonymous是否存在任何安全性或其他问题

应该没有真正的安全问题，为您的所有图片设置它。

但是，对于问题，确实存在您提到的Safari问题，以及使用crossOrigin属性发出的每个请求都是两步请求的事实：首先，浏览器进行预先飞行请求确保服务器同意将其共享给跨源服务器，如果是这样，它最终会发出get请求。但这不应该是一个巨大的问题，因为飞行前的请求数据很少。

总而言之，如果您计划以编程方式导出画布，请使用crossOrigin属性的所有图像，只需在Safari的情况下侦听错误事件，您应该没问题。

始终在图像上使用crossorigin匿名属性的后果是什么？

1 个答案: