web-dev-qa-db-ja.com

クロスオリジンの匿名が画像の読み込みに失敗する問題

参照： HTTP基本認証で画像のプロンプトが表示されないようにする

この潜在的な「エクスプロイト」からユーザー生成コンテンツを保護するために、すべてのcrossorigin="anonymous" BBCodeに[img]を追加しました。

まあ、それはIE11で機能しました。エクスプロイトをテストしたときに、画像は認証ダイアログをトリガーしなくなりました（キャッシュを無効にして、適切な方法でさまざまなURLでテストしました）。

しかしChromeでは、エクスプロイトは機能しません...画像がまったく読み込まれていないためです。代わりに、明らかにかなり一般的なエラーが発生します。

Origin 'XXXXX'からの画像はCross-Origin Resource Sharingポリシーによってロードがブロックされました：リクエストされたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません。したがって、オリジン 'YYYYY'はアクセスを許可されません。

多分私の理解は間違っているかもしれませんが、私は属性の"anonymous"値がこれを機能させると考えました。

私は何かを逃していますか、もしそうなら、この問題から保護するために他にどのようなオプションがありますか？

javascripthtmlimagecorscross-domain
12
Niet the Dark Absol

まず、私の理解によると、画像がIEに読み込まれなかったということです。それは完璧です！それが機能する方法です。

2番目に（＆最後に）、Chromeの動作も完璧です。

プロセス/詳細：

サーバーは（Access-Control-Allow-OriginをAnonymousに設定することにより）Originサイトに資格情報を提供せず、画像が汚染され、その使用が制限されます。

cross-Origin image がある場合は、キャンバスにコピーできますが、これによりキャンバスが「汚染」され、読み取れなくなります（したがって、イメージを「スチール」または「ダウンロード」できません） 。ただし、CORSを使用することにより、画像が保存されているサーバーはブラウザーにクロスオリジンアクセスが許可されていることを通知できるため、キャンバスを介して画像データにアクセスできます。

ヘッダーが同じOriginからのものではない場合、つまりリソー​​スがCORSリクエストなしで（つまりOrigin：HTTPヘッダーを送信せずに）フェッチされ、それが無効になると、列挙型キーワードanonymousが使用されたかのように処理されます。 。

だから私の推測では、nullは存在しない、または無効であることと同じであり、その場合はanonymousのように処理されます。

つまり、Chromeのエラーは、IEが実行していることを正確に実行することを意味します。

いくつかの参考になる参考資料-

直接的な回答ではありませんが、役立つリンク-

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

13
bozzmob

私が調査したように、

まず、汚染されたキャンバスとはどういう意味ですか：

CORSの承認なしにキャンバスで画像を使用できますが、そうすることでキャンバスが汚染されます。キャンバスが汚染されると、キャンバスからデータを引き戻すことはできなくなります。たとえば、キャンバスのtoBlob（）、toDataURL（）、またはgetImageData（）メソッドを使用できなくなりました。これを行うと、セキュリティエラーがスローされます。
ref： https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

CORS設定属性：

HTML5では、imgやvideoなどのCORSをサポートする一部のHTML要素にcrossorigin属性（crossOriginプロパティ）があり、要素のフェッチされたデータに対するCORS要求を構成できます。デフォルトでは（つまり、属性が指定されていない場合）、CORSはまったく使用されません。
「匿名」キーワードは、Cookie、クライアント側のSSL証明書、またはHTTP認証を介したユーザー資格情報の交換がないことを意味します

リンク先の画像はCORS対応ではないため、Access-Control-Allow-Originエラーが発生します。

この問題を修正するには、crossOrigin属性を実行するだけでなく、適切なヘッダーを送信する必要があります。これをcrossOriginにuse-credentialsに設定すると、資格情報リクエストヘッダーが設定されます。サーバーはこれを使用して、コンテンツに対する権限があるかどうかを判断できます。 CORSヘッダーがサーバーから画像に送信され、その画像がキャンバスで使用される場合、Origin-cleanフラグはtrueです。

1
Vicky Gonsalves