問題は、画像

Question

をロードする

参考：これは潜在的な「活用」、私はすべての[img] BBCodesへcrossorigin="anonymous"を追加しましたから、私のユーザー生成コンテンツを保護するためにPrevent HTTP Basic Authentication from displaying prompt for images

。

IE11でうまくいきました。悪用をテストしたときに、イメージは認証ダイアログをトリガーしなくなりました。

しかし、Chromeでは、画像がまったく読み込まれていないため、悪用されません。代わりに、私は明らかにかなり一般的なエラーを取得しています：

Image from origin 'XXXXX' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'YYYYY' is therefore not allowed access.

はたぶん私の理解が間違っているが、私は、属性の"anonymous"値はこれが動作することが可能だろうと思いました。

私は何か不足していますか？あれば、この問題を防ぐために他にどのようなオプションがありますか？

Answer 1

最初に私の理解によれば、イメージはIEで読み込まれなかったと言うことを意味します。どちらが完璧です！それがうまくいかなければならない。

第2に（&最後に）、Chromeの動作も完璧です。

プロセス/詳細：サーバーは、（匿名へのアクセス制御 - 許可 - 原点を設定することによって）元のサイトに資格情報を与えるものではありません

、画像が汚染され、その使用が制限されています。

cross-origin imageがあればキャンバスにコピーすることができますが、キャンバスを読むことで画像が盗まれたり、ダウンロードされたりすることはありません。ただし、CORSを使用することにより、イメージが格納されているサーバーは、クロス・オリジン・アクセスが許可されているため、イメージ・データにキャンバスでアクセスできます。

ヘッダーが同じ発信元でない場合、つまりリソー​​スがCORS要求なしで（つまり、Origin：HTTPヘッダーを送信せずに）フェッチされ、無効になった場合は、列挙されたものとして扱われますキーワードanonymousが使用されました。

私の推測では、nullは存在しないか無効であるかのいずれかであり、その場合はanonymousのように扱われます。

Chromeでは、IEが行っていることを正確に行うことを意味しています。

---

• Purpose of the crossorigin attribute …?

• HTML crossorigin attribute for img tag

• Javascript CORS image/canvas manipulation

をヘルプ - することができますいくつかの参照3210

• Drawing images to canvas with img.crossOrigin = “Anonymous” doesn't work

ではないが、直接の答え、しかし、

• How can I override javascript files referenced with the crossorigin=“anonymous” using a Google Chrome extension?

• CORS enabled image

links-役立つが、それがお役に立てば幸い！ :)ハッピーコーディング！

Answer 2

私が調査を1として、

Firstly What do you mean by Tainted canvas:

Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error.
ref: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

CORS settings attributes:

In HTML5, some HTML elements which provide support for CORS, such as img or video , have a crossorigin attribute (crossOrigin property), which lets you configure the CORS requests for the element's fetched data. By default (that is, when the attribute is not specified), CORS is not used at all.
The "anonymous" keyword means that there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication

あなたにリンクしている画像は、CORS対応でない、ので、あなたはAccess-Control-Allow-Originエラーを取得しています。

問題を解決するには、crossOrigin属性だけでなく、適切なヘッダーを送信する必要があります。これをcrossOriginに設定してuse-credentialsに設定すると、サーバーがコンテンツに対する権利を持っているかどうかを判断するために使用できる資格情報要求ヘッダーが設定されます。イメージのためにCORSヘッダーがサーバーから返され、そのイメージがキャンバス上で使用されるとき、origin-cleanフラグはtrueです。