始终在图像上使用crossorigin匿名属性的后果是什么？(What is the consequence of always having the crossorigin anonymous attribute on images?)

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

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

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

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

编辑：使用data:时使用crossorigin anonymous似乎有问题data:在Safari上使用uri（ 为什么Safari在crossOrigin ='Anonymous'图像上设置base64数据时会抛出CORS错误？ ）

The spec for the crossorigin attribute on images indicates that when that attribute is omitted then the request is in a No CORS state.

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

What is the use case for not using the crossorigin attribute on images?

Just for context; I am currently working with canvas with images that are both on the same domain and from other domains and I was wondering if there would be any security or other concerns with having the crossorigin set to anonymous on all images?

Edit: There seems to be a problem using crossorigin anonymous when using a data: uri on Safari ( Why does Safari throw CORS error when setting base64 data on a crossOrigin = 'Anonymous' image? )

最满意答案

不在图像上使用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的情况下侦听错误事件，您应该没问题。 
 
 
What is the use case for not using the crossorigin attribute on images?
 

 

One of these is if you want to display an cross-origin image from a server not set-up to accept anonymous requests, and don't need to programmatically export the canvas result. If you do set the crossOrigin property, then your request will simply err, you won't be able to use the resource at all.
 

 
 
  
  
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> 
  
 

 

 

 
 
I was wondering if there would be any security or other concerns with having the crossorigin set to anonymous on all images
 

 

There should be no real security issue having it set for all your images. 
 

However, for concerns, there is indeed this Safari issue you mentioned, and also the fact that every request made with the crossOrigin attribute is a two steps request : First the browser makes a pre-flight request to insure that the server does agree to share it to a cross-origin server, and if so, it does finally make a get request. But this should not be a huge concern as pre-flight requests are small in data. 
 

 

So all in all, if you are planning to programmatically export your canvas, go with all images with crossOrigin property, just listen for the error event in case of Safari, and you should be fine.

更多推荐