javascript - titel - title tag wordpress




Wie erkenne ich, ob eine Webseite in einen Iframe oder direkt in das Browserfenster geladen wird? (10)

Ich schreibe eine iframe-basierte Facebook-App. Jetzt möchte ich die gleiche HTML-Seite verwenden, um die normale Website sowie die Canvas-Seite innerhalb von Facebook zu rendern. Ich möchte wissen, ob ich feststellen kann, ob die Seite im iframe oder direkt im Browser geladen wurde.


Best-for-Now-Legacy-Browser-Frame-Breaking-Skript

Die anderen Lösungen haben bei mir nicht funktioniert. Dieser funktioniert auf allen Browsern:

Eine Möglichkeit, sich gegen Clickjacking zu verteidigen, besteht darin, auf jeder Seite ein "frame-breaker" -Skript einzufügen, das nicht umrahmt werden sollte. Die folgende Methode verhindert, dass eine Webseite auch in älteren Browsern, die den X-Frame-Options-Header nicht unterstützen, gerahmt wird.

Fügen Sie im HEAD-Element des Dokuments Folgendes hinzu:

<style id="antiClickjack">body{display:none !important;}</style>

Wenden Sie zuerst eine ID auf das Stilelement selbst an:

<script type="text/javascript">
   if (self === top) {
       var antiClickjack = document.getElementById("antiClickjack");
       antiClickjack.parentNode.removeChild(antiClickjack);
   } else {
       top.location = self.location;
   }
</script>

Auf diese Weise kann alles im Dokument HEAD sein und Sie benötigen nur eine Methode / taglib in Ihrer API.

Referenz: https://www.codemagi.com/blog/post/194


Da Sie im Kontext einer Facebook-App nachfragen, sollten Sie möglicherweise erwägen, dies bei der ersten Anfrage auf dem Server zu erkennen. Facebook wird eine Reihe von Querystring-Daten einschließlich des fb_sig_user-Schlüssels weiterleiten, wenn es von einem iframe aufgerufen wird.

Da Sie diese Daten wahrscheinlich ohnehin in Ihrer App überprüfen und verwenden müssen, verwenden Sie sie, um den richtigen Kontext zum Rendern zu bestimmen.


Es ist ein altes Stück Code, das ich ein paar Mal benutzt habe:

if (parent.location.href == self.location.href) {
    window.location.href = 'https://www.facebook.com/pagename?v=app_1357902468';
}

Ich benutze das:

var isIframe = (self.frameElement && (self.frameElement+"").indexOf("HTMLIFrameElement") > -1);

Ich habe tatsächlich window.parent überprüft und es hat für mich funktioniert, aber in letzter Zeit ist window ein zyklisches Objekt und hat immer einen Elternschlüssel, iframe oder keinen iframe.

Wie die Kommentare vorschlagen schwer mit window.parent zu vergleichen. Nicht sicher, ob das funktioniert, wenn Iframe genau dieselbe Webseite ist wie der Elternteil.

window === window.parent;

RoBorg ist korrekt, aber ich wollte eine Randnotiz hinzufügen.

In IE7 / IE8, als Microsoft Tabs zu ihrem Browser hinzufügte, brachen sie eine Sache, die Chaos mit Ihrem JS verursachen wird, wenn Sie nicht vorsichtig sind.

Stellen Sie sich dieses Seitenlayout vor:

MainPage.html
  IframedPage1.html   (named "foo")
  IframedPage2.html   (named "bar")
    IframedPage3.html (named "baz")

Jetzt in Frame "Baz" klicken Sie auf einen Link (kein Ziel, lädt in der "Baz" -Rahmen) es funktioniert gut.

Wenn die Seite, die geladen wird, die Datei special.html aufrufen soll, verwendet sie JS, um zu überprüfen, ob "it" einen übergeordneten Frame namens "bar" hat, wird der Wert true (expected) zurückgegeben.

Nun sagen wir, dass die Seite special.html, wenn sie geladen wird, den übergeordneten Frame überprüft (für Existenz und ihren Namen, und wenn es "bar" ist), lädt sie sich selbst im Balkenrahmen neu

if(window.parent && window.parent.name == 'bar'){
  window.parent.location = self.location;
}

So weit, ist es gut. Jetzt kommt der Fehler.

Lassen Sie uns sagen, anstatt auf den ursprünglichen Link wie normal zu klicken und die Seite special.html in den "baz" -Rahmen zu laden, klicken Sie mit der mittleren Maustaste darauf oder wählen Sie, um sie in einem neuen Tab zu öffnen.

Wenn diese neue Registerkarte geladen wird ( ohne übergeordnete Frames überhaupt! ), Wird der IE in eine Endlosschleife des Seitenladens eintreten! weil IE die Frame-Struktur in JavaScript "kopiert", so dass die neue Registerkarte ein Elternteil hat, und dieses Elternteil hat den Namen "Bar".

Die gute Nachricht ist, dass überprüft:

if(self == top){
  //this returns true!
}

Die neue Registerkarte gibt "true" zurück, und Sie können diese ungewöhnliche Bedingung testen.


Verwenden Sie diese Javascript-Funktion als ein Beispiel dafür, wie dies zu erreichen ist.

function isNoIframeOrIframeInMyHost() {
// Validation: it must be loaded as the top page, or if it is loaded in an iframe 
// then it must be embedded in my own domain.
// Info: IF top.location.href is not accessible THEN it is embedded in an iframe 
// and the domains are different.
var myresult = true;
try {
    var tophref = top.location.href;
    var tophostname = top.location.hostname.toString();
    var myhref = location.href;
    if (tophref === myhref) {
        myresult = true;
    } else if (tophostname !== "www.yourdomain.com") {
        myresult = false;
    }
} catch (error) { 
  // error is a permission error that top.location.href is not accessible 
  // (which means parent domain <> iframe domain)!
    myresult = false;
}
return myresult;
}

Wenn Sie wissen möchten, ob der Nutzer über die Registerkarte "Facebook" oder "Canvas" der Website auf Ihre App zugreift, überprüfen Sie die signierte Anfrage. Wenn Sie es nicht erhalten, greift der Benutzer wahrscheinlich nicht von Facebook aus zu. Um sicherzustellen, dass die signed_request-Felder die Struktur und den Inhalt der Felder bestätigen.

Mit der PHP-SDK können Sie die signierte Anfrage wie folgt erhalten:

$signed_request = $facebook->getSignedRequest();

Sie können mehr über die unterzeichnete Anfrage hier lesen:

https://developers.facebook.com/docs/reference/php/facebook-getSignedRequest/

und hier:

https://developers.facebook.com/docs/reference/login/signed-request/


Browser können den Zugriff auf window.top aufgrund der gleichen Ursprungsrichtlinie blockieren. IE Bugs finden auch statt. Hier ist der Arbeitscode:

function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

top und self sind beide window (zusammen mit dem parent ). Sie sehen also, ob Ihr Fenster das oberste Fenster ist.


if (window.frames.length != parent.frames.length) { page loaded in iframe }

Aber nur, wenn sich die Anzahl der Iframes auf Ihrer Seite und auf Ihrer Seite unterscheidet, die Sie in iframe laden. Machen Sie keinen Iframe auf Ihrer Seite, um eine 100% ige Garantie für das Ergebnis dieses Codes zu erhalten







iframe