始终在图像上具有跨域匿名属性的后果是什么？

Question

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

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

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

仅用于上下文；我目前正在使用包含同一域和其他域的图像的画布，我想知道在所有图像上将crossorigin 设置为anonymous 是否存在任何安全性或其他问题？

编辑：在 Safari (Why does Safari throw CORS error when setting base64 data on a crossOrigin = 'Anonymous' image?) 上使用 data: uri 时使用跨域匿名似乎存在问题

Answer 1

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

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

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;

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

---

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

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

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

---

总而言之，如果您打算以编程方式导出画布，请使用具有crossOrigin 属性的所有图像，只需在 Safari 的情况下侦听错误事件，就可以了。