web-dev-qa-db-ja.com

エラー：プロパティ "document"へのアクセス許可が拒否されました

iframeを含むHTMLドキュメントがあります。 JSでこのiframeにアクセスまたは変更しようとすると、Error: Permission denied to access property "document"。

私は使っている frame.contentWindow.document.body.innerHTML または frame.contentWindow.document.body.onloadまたはiframeにアクセスまたは変更する同様の属性。 （指定されたコードでは、iframeはframeと呼ばれます。）

私が開発しているWebアプリの場合、これらの属性へのアクセスが必要であり、これら（または同様の代替手段）なしではできません。

javascripthtmliframexssaccess-control
21
sbrm1

受信ウィンドウのヘッダー部分にアクセスできない場合でも、YQLを使用してこの問題を回避できます。 Postmessageメソッドでは、受信者ウィンドウスクリプトを編集する必要もあります。ただし、この方法を使用すると、スクリプトに触れることなくiframeを読み込むことができます。これをチェックしてください！

<html>
<iframe src="https://google.com/" width="500" height="300"></iframe>

<script>
var iframe = document.getElementsByTagName('iframe')[0];
var url = iframe.src;
var getData = function (data) {
    if (data && data.query && data.query.results && data.query.results.resources && data.query.results.resources.content && data.query.results.resources.status == 200) loadHTML(data.query.results.resources.content);
    else if (data && data.error && data.error.description) loadHTML(data.error.description);
    else loadHTML('Error: Cannot load ' + url);
};
var loadURL = function (src) {
    url = src;
    var script = document.createElement('script');
    script.src = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=getData';
    document.body.appendChild(script);
};
var loadHTML = function (html) {
    iframe.src = 'about:blank';
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(html.replace(/<head>/i, '<head><base href="' + url + '"><scr' + 'ipt>document.addEventListener("click", function(e) { if(e.target && e.target.nodeName == "A") { e.preventDefault(); parent.loadURL(e.target.href); } });</scr' + 'ipt>'));
    iframe.contentWindow.document.close();
}

loadURL(iframe.src);
</script>
</html>
8
Gihan Gamage

他のWebサイトのiframesにあるWebページにアクセスして変更することは、 クロスサイトスクリプティング または XSS そして、それは悪意のあるハッカーが疑いを持たない犠牲者を捕食するために使用する技術です。

「Same-Origin Policy」という名前のポリシーは、このような動作とJSコードの任意の実行を防ぐために、ブラウザーメーカーによって実装されています。

このエラーは、同じドメインとサブドメインのiframeに親ドキュメントとドキュメントをホストし、ドキュメントが同じプロトコルを使用してロードされるようにすることで防止できます。

互換性のないページの例：

  1. http://www.example.org＆http://www.example2.com
  2. http://abc.example.org＆http://xyz.example.com
  3. http://www.example.org＆https://www.example.com

Cross-Origin Resource Sharing は、この問題の解決策です。

例えば：
If http://www.example.com共有したいhttp://www.example.com/hello with http://www.example.org、次のようなヘッダーをドキュメントとともに送信できます。

Access-Control-Allow-Origin: http://www.example.org

HTMLで送信するには、<META HTTP-EQUIV="...">タグ、次のように：

<head>
    ...
    <META HTTP-EQUIV="Access-Control-Allow-Origin" CONTENT="http://www.example.org">
    ...
</head>
20
sbrm1

postMessage を使用できます

ウィンドウ1-受信

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  var Origin = event.Origin || event.originalEvent.Origin; 
  // For Chrome, the Origin property is in the event.originalEvent object.
  if (Origin !== "http://example.org:8080")
    return;

  // ...
}

ウィンドウ-2送信

var popup = window.open(...popup details...);
popup.postMessage(
       "The user is 'bob' and the password is 'secret'", 
       "https://secure.example.net"
);

相互通信するには別のペアを作成する必要があります。

9
joyBlanks