3

だから私は次のコードを持っています：

var element = document.getElementById("myCanvas");
var width = element.width;                                   
var height = element.height;  
var context = element.getContext("2d");                      

/* test 1 */
var img1 = new Image(width, height);
img1.src = "http://www.mydomain.com/image.jpg";

document.body.appendChild(img1);          // <-- A: this works 
context.drawImage(img1,0,0,width,height); // <-- B: this works

/* test 2 */
var img2 = new Image(width, height);
img2.src = "http://www.notmydomain.com/image.jpg";

document.body.appendChild(img2);          // <-- C: this works 
context.drawImage(img2,0,0,width,height); // <-- D: this does not work

さて、私のコードを見て、私test 1は自分のページと同じドメインでホストされている画像を使用して画像オブジェクトを作成します。からA:、正常にロードされていることがわかります（imgオブジェクトが適切にロードされていることを確認するためのテストとしてスローされます）A:。C:またB:、同様に機能し、画像をキャンバスに描画します。

でtest 2、自分のページのドメインとは異なるドメインでホストされている画像を読み込みます。 C:正常に動作し、他のドメインでホストされている画像を読み込むことが許可されていることを私は知っています。ただし、D:動作しません。次のエラーが発生します。

Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: ....

私の理解では、これはクロスサイトスクリプティングとしてカウントされることを意味します。

だからここに質問があります：

1）なぜこれがクロスサイトスクリプティングと見なされるのですか？つまり、私は理由を知っています...しかし、なぜD:許可されないのですか、いつC:ですか？IMO彼らは原則/精神と同じようなものですか？

2）従来のクロスサイトスクリプティングの回避策以外に、これを回避する方法はありますか？AJAXを使用してURLをサーバー側スクリプトに渡してリクエストを行い、サーバーに画像を保存して同じドメインにあるようにURLを返す必要があると思います。そうでなければ（私は思う）生のbase64エンコードされたデータを返し、canvasメソッドを使用して生データからそれを構築することができます。私はこれらのいずれかを実行することで生きることができますが...私はおそらくhtml5/canvasのものについて何かが欠けていることを望んでいます（私はそれに慣れていません！）

4

2 に答える 2

5

持て。ここで何か他のことが起こっています。

別のドメインから絶対に画像を描くことができます。

placekitten.comから画像を描画するjsfiddleのコードは次のとおりです。

http://jsfiddle.net/ZZW5V/

そのフィドルコードのURLをnotyourdomainイメージのURLに置き換えてみてください。それでも動作するはずです。

一般に、画像を正常に取得できる場所であればどこからでも、キャンバスに画像を描画できる必要があります。

その後、許可されていないのはimageData、キャンバスを取得するか、を使用してPNGに保存することtoDataUrlです。それが許可されない重要なセキュリティ上の理由があります。

私の推測では、あなたは単に画像を描画しようとしているのではなく、セキュリティルールの1つに違反するために何かをしていると思います。

于 2012-06-01T15:29:23.560 に答える
2

これは、情報が「盗まれる」のを防ぐためのセキュリティ対策です。これは、AJAXを使用して別のドメインからページを取得できないのと同じ理由です。

たとえば、銀行のWebサイトが画像を使用してクレジット情報を表示したとします。コードはその画像をページにロードしてからサーバーに送信し、クライアントの安全な情報を盗む可能性があります。これは極端な例ですが、有効な例です。

ページから情報を取得できないため、ページに画像を追加できます。画像をJavaScriptにロードすることはできません。これは、生の画像データを操作および転送できるようにするためです。

于 2012-06-01T14:51:31.100 に答える