イメージにcrossoriginの匿名属性が常に付いている結果はどうですか？

Question

画像上のcrossorigin属性の仕様は、その属性が省略されている場合、その要求はNo CORS状態にあることを示します。

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

画像にcrossorigin属性を使用していないためにユースケースとは何ですか？

コンテキストのためだけです。私は現在、同じドメインと他のドメインの両方の画像を持つキャンバスに取り組んでおり、crossoriginをすべての画像でanonymousに設定することでセキュリティやその他の懸念があるのだろうかと疑問に思っていましたか？

編集： Safariでdata: URIを使用している場合、匿名crossoriginを使用して問題があるようだ（Why does Safari throw CORS error when setting base64 data on a crossOrigin = 'Anonymous' image?）

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>

---

なしがあるはず

すべての画像にanonymousにcrossoriginセットを持つ任意のセキュリティやその他の問題があるだろうかと思いまして本物のセキュリティ問題それはあなたのすべての画像のために設定されます。

の関心事については、あなたが言及したこのSafariの問題があります。また、crossOrigin属性で行われたすべての要求が2段階の要求であるという事実もあります。まず、ブラウザは、サーバーはそれをクロスオリジンサーバーに共有することに同意し、そうであれば最終的に取得要求を出します。しかし、これは、飛行前のリクエストがデータの中で小さいため、大きな懸念事項ではありません。したがって、すべてのすべてで

---

あなたがプログラムでcrossOriginプロパティですべてのイメージで行く、あなたのキャンバスを輸出することを計画している場合は、ちょうどサファリの場合のエラーイベントをリッスン、あなたは問題ないはずです。