web-dev-qa-db-ja.com

IEキャンバスでtoDataUrlを呼び出すと、セキュリティエラーがスローされます

まず、ソース画像が別のOriginからのものである場合にcanvasのtoDataURLメソッドにアクセスすることは、セキュリティの問題であることを私は知っています。

しかし、私の場合は、imgのソースとしてdata: urlを使用し、次にimgを使用してcanvasに描画し、canvas.toDataUrl。

これはChromeおよびFirefoxでは正常に機能しますが、IEのセキュリティエラーで失敗します！

何か案が？

...
var svgxml = getxmlsvg();
img.onload = function(){
    canvas.drawImage(this, 0, 0);
    canvas.toDataURL("image/png"); // <--- security error
}
image.src = URL.createObjectURL(new Blob([svgxml], {type: "image/svg+xml;charset=utf-8" }))

これが svgopen.org からの引用です

SVGからCanvasへのデータ転送にはセキュリティの問題があり、Canvasが書き込み専用になります。これらの問題は、SVG.toDataURL（）提案（「推奨事項」のセクション）で回避できると主張します。

同一生成元ポリシーとキャンバス生成元ポリシー

Webページは、さまざまな起源からのさまざまな要素で構成されています。同じオリジンからの要素は安全であると見なされます[Origin10]。

Canvasには、強力な画像の読み取りおよび書き込み機能があります。 file：// -URLからCanvas要素に画像をロードし、JavaScriptを使用してCanvas要素から任意のホストにピクセルデータを送信するだけで、ローカル画像をサードパーティに転送する仲介者としてcanvasを使用するのは簡単です。

Canvasでの情報漏えいを防ぐため、画像データのソースが安全でない場合、ブラウザはCanvasの使用を慎重に保護しています。すべてのCanvas要素は、Origin-clean属性をtrueに設定して作成されます。 Canvas要素を使用して同一生成元ポリシーに違反するコンテンツを転送するために使用される可能性のあるアクションのいずれかが発生すると、Origin-cleanプロパティは永続的にfalseに設定されます。

ToDataURL（）やgetImageData（）など、canvasに格納されているピクセルデータを返すメソッドが、Origin-cleanがfalseのCanvas要素で呼び出されると、DOMException 18SECURITY_ERRが発生します[Canvas10]。

しかし、私はブラウザでその場でSVGを作成しています。

javascripthtmlinternet-explorercanvassvg
31
Bakhshi

私の場合、画像を構成するグラフィック要素をsvgからpngに変更しました。 svgを使用している場合、toDataURLを使用すると、ChromeではなくIE 11（および10）でセキュリティエラーが発生します。png要素を使用してグラフィックを作成する場合は問題ありません。

IE 11でsvgのサイズが適切に変更されないという2番目の問題があるため、IEでsvgを使用することに対するもう1つの問題です。

1
Gary Wolfe

Svg-> canvas-> pngを抽象化し、SVG要素にメソッドを追加するライブラリが存在するため、どのブラウザでも、コールバックとオプション「canvg」を使用してmySvg.toDataUrl（）を呼び出すことができます。

https://github.com/sampumon/SVG.toDataURL

この実装ではセキュリティ例外が考慮されるため、発生しているアクセス許可エラーを乗り越えることができます。

<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script> 
<script>
<script type="text/javascript" src="http://rawgit.com/sampumon/SVG.toDataURL/master/svg_todataurl.js"></script>

mySVGelement.toDataURL("image/png", {
  renderer: "canvg"
  callback: function(data) {
      image.src = data;
  }
});
</script>

互換性：

Browser     E x p o r t i n g  f o r m a t
            SVG+XML  PNG/canvg  PNG/native
IE           9+       9+         -
Chrome       +        +          33+ ²
Safari       +        +          -
Firefox      +        +          11+ ¹
Opera        +        +          -
1
chwagssd