10

「データ」URIを使用してプログラムでiframeを作成しています：

<iframe id="myFrame" src='data:text/html;charset=utf-8,<!DOCTYPE html><html><head></head><body><h1>Hello.</h1></body></html>'></iframe>​

このフレームは正常に読み込まれますが、iframe をプログラムで操作すると、クロスドメイン セキュリティ チェックにヒットするようです。

var iframeDoc = document.getElementById('myFrame').contentWindow.document;
$(iframeDoc.body).find('h1').text('Changed');

Chrome および Safari でエラーをスローします。

安全でない JavaScript が URL data:text/html;charset=utf-8,... from frame with URL http://... でフレームにアクセスしようとしています...のプロトコルは '' です。プロトコルが一致する必要があります。

セキュリティエラーを示すフィドルは次のとおりです。http://jsfiddle.net/bhGcw/4/

Firefox と Opera はこの例外をスローせず、iframe の内容を変更できます。Webkit がデータ URI の空白のプロトコルを認識し、これをクロスドメイン違反と見なしているようです。

これを回避する方法はありますか？

4

3 に答える 3

8

データ URL を使用する代わりに、HTML5 属性 srcdoc を使用するのはどうですか。

<iframe id="iframe" srcdoc='<html><body><h1>Hello!</h1></body></html>'></iframe>
<script type="text/javascript">
    $(function(){
        $($("iframe")[0].contentWindow.document).find("h1").text("Modified from the parent window!");
    });
</script>

http://jsfiddle.net/ff3bF/に例があります

于 2014-03-30T19:21:54.177 に答える
7

Webkitはドメインチェックコードで単純な文字列比較を行っているようです。

String DOMWindow::crossDomainAccessErrorMessage(DOMWindow* activeWindow)
{
    ...

    SecurityOrigin* activeOrigin = activeWindow->document()->securityOrigin();
    SecurityOrigin* targetOrigin = document()->securityOrigin();
    if (targetOrigin->protocol() != activeOrigin->protocol())
        return message + " The frame requesting access has a protocol of '" + activeOrigin->protocol() + "', the frame being accessed has a protocol of '" + targetOrigin->protocol() + "'. Protocols must match.\n";

    ...
}

少なくとも次のバグレポートによると、ChromiumはHTML5仕様よりも厳格になっているようです。

Chromiumの開発者は、このルールを緩和することに賛成していないようです。残念。

于 2013-01-04T00:52:30.933 に答える
6

@jamie が提唱した回答は、HTML を iframe にロードし、その後のコンテンツ ドキュメントとのプログラムによる対話を可能にするのにうまく機能します。

XHTML はそれほど簡単ではありません。

このsrcdoc属性は、XHTML ではなく、HTML に限定されているようです。

これを回避するには、 を指定Blobできる URL を使用しcontent-typeます。

var documentSource = '<?xml version="1.0" encoding="UTF-8"?>\n<html xmlns="http://www.w3.org/1999/xhtml">\n<head>...';
var blob = new Blob([documentSource], { type: "application/xhtml+xml" });
iframe.src = URL.createObjectURL(blob);

この手法は、少なくとも Chrome、Firefox、および Safari で機能します。

于 2014-09-08T04:11:21.190 に答える