it-swarm.com.de

Wie implementiere ich domänenübergreifenden URL-Zugriff von einem Iframe aus mit Javascript?

Ich muss von meinem Iframe aus, der sich in einer anderen Domain befindet, auf die URL der übergeordneten Domain zugreifen.

Beispiel: "example.com" ist meine Website mit einem Iframe von einer anderen übergeordneten Domain, z. B. "google.com". Hier muss ich auf die URL der übergeordneten Domain von meinem example.com zugreifen. Das heißt, ich muss die URL "google.com" in meiner Domain "example.com" abrufen. Darüber hinaus kann die übergeordnete Domäne nicht fest codiert werden.

Ich habe versucht, den folgenden Code zu verwenden:

window.parent.location.href()

dies führt jedoch zu einem Fehler "Zugriff verweigert". Wie setze ich das richtig um, um dies zu erreichen?

29
Sri Kumar

Sie können versuchen, nach dem Verweis zu suchen, der die übergeordnete Site sein sollte, wenn Sie ein Iframe sind

das kannst du so machen:

var href = document.referrer;
34
Yuliy

Vielleicht möchten Sie sich diese Fragen/Antworten ansehen. Sie könnten Ihnen einige Informationen zu Ihrem Problem geben:

Um es kurz zu machen: Aus Sicherheitsgründen ist der Zugriff auf iframe von einer anderen Domain aus nicht möglich. Dies erklärt die Fehlermeldung, die Sie erhalten.


Die Seite Same Origin Policy auf Wikipedia enthält einige Informationen zu dieser Sicherheitsmaßnahme:

Kurz gesagt, die Richtlinie ermöglicht es Skripten, die auf Seiten ausgeführt werden, die von derselben Site stammen, ohne bestimmte Einschränkungen auf die Methoden und Eigenschaften der jeweils anderen zuzugreifen, verhindert jedoch den Zugriff auf die meisten Methoden und Eigenschaften über Seiten auf verschiedenen Sites hinweg.

Auf der Client-Seite muss eine strikte Trennung zwischen Inhalten, die von nicht verwandten Websites bereitgestellt werden, eingehalten werden, um den Verlust der Vertraulichkeit oder Integrität der Daten zu verhindern.

14
Pascal MARTIN

Anstatt den Referrer zu verwenden, können Sie window.postMessage um über iframes/windows domänenübergreifend zu kommunizieren.
Sie posten in window.parent und dann gibt parent die URL zurück.
Dies funktioniert, erfordert jedoch eine asynchrone Kommunikation.
Sie müssen einen synchronen Wrapper um die asynchronen Methoden schreiben, wenn Sie ihn synchron benötigen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>

    <!--
    <link rel="shortcut icon" href="/favicon.ico">


    <link rel="start" href="http://benalman.com/" title="Home">

    <link rel="stylesheet" type="text/css" href="/code/php/multi_file.php?m=benalman_css">

    <script type="text/javascript" src="/js/mt.js"></script>
    -->
    <script type="text/javascript">
        // What browsers support the window.postMessage call now?
        // IE8 does not allow postMessage across windows/tabs
        // FF3+, IE8+, Chrome, Safari(5?), Opera10+

        function SendMessage()
        {
            var win = document.getElementById("ifrmChild").contentWindow;

            // http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/


            // http://stackoverflow.com/questions/16072902/dom-exception-12-for-window-postmessage
            // Specify Origin. Should be a domain or a wildcard "*"

            if (win == null || !window['postMessage'])
                alert("oh crap");
            else
                win.postMessage("hello", "*");
            //alert("lol");
        }



        function ReceiveMessage(evt) {
            var message;
            //if (evt.Origin !== "http://robertnyman.com")
            if (false) {
                message = 'You ("' + evt.Origin + '") are not worthy';
            }
            else {
                message = 'I got "' + evt.data + '" from "' + evt.Origin + '"';
            }

            var ta = document.getElementById("taRecvMessage");
            if (ta == null)
                alert(message);
            else
                document.getElementById("taRecvMessage").innerHTML = message;

            //evt.source.postMessage("thanks, got it ;)", event.Origin);
        } // End Function ReceiveMessage




        if (!window['postMessage'])
            alert("oh crap");
        else {
            if (window.addEventListener) {
                //alert("standards-compliant");
                // For standards-compliant web browsers (ie9+)
                window.addEventListener("message", ReceiveMessage, false);
            }
            else {
                //alert("not standards-compliant (ie8)");
                window.attachEvent("onmessage", ReceiveMessage);
            }
        }
    </script>


</head>
<body>

    <iframe id="ifrmChild" src="child.htm" frameborder="0" width="500" height="200" ></iframe>
    <br />


    <input type="button" value="Test" onclick="SendMessage();" />

</body>
</html>

Child.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>

    <!--
    <link rel="shortcut icon" href="/favicon.ico">


    <link rel="start" href="http://benalman.com/" title="Home">

    <link rel="stylesheet" type="text/css" href="/code/php/multi_file.php?m=benalman_css">

    <script type="text/javascript" src="/js/mt.js"></script>
    -->

    <script type="text/javascript">
        /*
        // Opera 9 supports document.postMessage() 
        // document is wrong
        window.addEventListener("message", function (e) {
            //document.getElementById("test").textContent = ;
            alert(
                e.domain + " said: " + e.data
                );
        }, false);
        */

        // https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
        // http://ejohn.org/blog/cross-window-messaging/
        // http://benalman.com/projects/jquery-postmessage-plugin/
        // http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html

        // .data – A string holding the message passed from the other window.
        // .domain (origin?) – The domain name of the window that sent the message.
        // .uri – The full URI for the window that sent the message.
        // .source – A reference to the window object of the window that sent the message.
        function ReceiveMessage(evt) {
            var message;
            //if (evt.Origin !== "http://robertnyman.com")
            if(false)
            {
                message = 'You ("' + evt.Origin + '") are not worthy';
            }
            else
            {
                message = 'I got "' + evt.data + '" from "' + evt.Origin + '"';
            }

            //alert(evt.source.location.href)

            var ta = document.getElementById("taRecvMessage");
            if(ta == null)
                alert(message);
            else
                document.getElementById("taRecvMessage").innerHTML = message;

            // http://javascript.info/tutorial/cross-window-messaging-with-postmessage
            //evt.source.postMessage("thanks, got it", evt.Origin);
            evt.source.postMessage("thanks, got it", "*");
        } // End Function ReceiveMessage




        if (!window['postMessage'])
            alert("oh crap");
        else {
            if (window.addEventListener) {
                //alert("standards-compliant");
                // For standards-compliant web browsers (ie9+)
                window.addEventListener("message", ReceiveMessage, false);
            }
            else {
                //alert("not standards-compliant (ie8)");
                window.attachEvent("onmessage", ReceiveMessage);
            }
        }
    </script>


</head>
<body style="background-color: gray;">
    <h1>Test</h1>

    <textarea id="taRecvMessage" rows="20" cols="20" ></textarea>

</body>
</html>
6
Stefan Steiger

Sie haben mehrere Möglichkeiten:

  1. Verkleinern Sie die Domain (siehe document.domain) auf der übergeordneten Seite und in der iframe auf dasselbe. In diesem Fall sind sie nicht an die Bedingungen des gleichen Ursprungs gebunden.

  2. Verwenden Sie postMessage, das von allen HTML5-Browsern für die cross-domain - Kommunikation unterstützt wird.

1
SSS

Guter Artikel hier: domänenübergreifende Kommunikation mit iframes

Sie können document.domain auch direkt in beiden Frames (gerade) gleich setzen

document.domain = document.domain;

code hat Sinn, weil er den Port auf null zurücksetzt, aber dieser Trick ist nicht für allgemeine Zwecke.

0
Razoomnick