Come identificare se una pagina Web viene caricata all'interno di un iframe o direttamente nella finestra del browser?

Sto scrivendo un'app Facebook basata su iframe. Ora voglio usare la stessa pagina HTML per il rendering del normale sito Web e della pagina tela all'interno di Facebook. Voglio sapere se posso determinare se la pagina è stata caricata all'interno dell'iframe o direttamente nel browser?

I browser possono bloccare l'accesso a window.topcausa della stessa politica di origine . Si verificano anche bug di IE. Ecco il codice di lavoro:

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

tope selfsono entrambi windowoggetti (insieme a parent), quindi vedrai se la tua finestra è la finestra in alto.

Quando si trova in un iframe sulla stessa origine del genitore, il window.frameElementmetodo restituisce l'elemento (ad esempio iframeo object) in cui è incorporata la finestra. Altrimenti, se la navigazione in un contesto di livello superiore o se il frame principale e secondario hanno origini diverse, verrà valutato null.

window.frameElement
  ? 'embedded in iframe or object'
  : 'not embedded or cross-origin'

Questo è uno standard HTML con supporto di base in tutti i browser moderni.

RoBorg è corretto, ma volevo aggiungere una nota a margine.

In IE7 / IE8 quando Microsoft ha aggiunto Tab al loro browser hanno rotto una cosa che causerà il caos con il tuo JS se non stai attento.

Immagina questo layout di pagina:

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

Ora nel frame "baz" fai clic su un link (nessun target, carica nel frame "baz") funziona bene.

Se la pagina che viene caricata, chiamiamola special.html, usa JS per verificare se "esso" ha un frame principale chiamato "bar", restituirà vero (previsto).

Ora supponiamo che la pagina special.html quando viene caricata, controlla il frame principale (per l'esistenza e il suo nome, e se è "bar" si ricarica nel frame bar. Es.

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

Fin qui tutto bene. Ora arriva il bug.

Diciamo invece di fare clic sul collegamento originale come al solito, e caricando la pagina special.html nel frame "baz", hai fatto clic con il pulsante centrale o hai scelto di aprirlo in una nuova scheda.

Quando quella nuova scheda viene caricata ( senza frame principali! ) IE entrerà in un ciclo infinito di caricamento della pagina! perché IE "copia" la struttura del frame in JavaScript in modo tale che la nuova scheda abbia un padre e che il padre abbia il nome "barra".

La buona notizia è che controllando:

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

in quella nuova scheda ritorna vero, e quindi puoi provare questa strana condizione.

La risposta accettata non ha funzionato per me all'interno dello script di contenuto di un'estensione di Firefox 6.0 (Addon-SDK 1.0): Firefox esegue lo script di contenuto in ciascuno: la finestra di livello superiore e in tutti gli iframe.

All'interno dello script del contenuto ottengo i seguenti risultati:

 (window !== window.top) : false 
 (window.self !== window.top) : true

La cosa strana di questo output è che è sempre lo stesso indipendentemente dal fatto che il codice sia eseguito all'interno di un iframe o nella finestra di livello superiore.

D'altra parte, Google Chrome sembra eseguire il mio script dei contenuti solo una volta all'interno della finestra di livello superiore, quindi quanto sopra non funzionerebbe affatto.

Ciò che alla fine ha funzionato per me in uno script di contenuto in entrambi i browser è questo:

 console.log(window.frames.length + ':' + parent.frames.length);

Senza iframe questo viene stampato 0:0, in una finestra di livello superiore contenente un frame che stampa 1:1e nell'unico iframe di un documento che stampa 0:1.

Ciò consente alla mia estensione di determinare in entrambi i browser se sono presenti iframe e, inoltre, in Firefox se viene eseguito all'interno di uno degli iframe.

Non sono sicuro di come questo esempio funzioni per i browser Web meno recenti, ma lo uso per IE, Firefox e Chrome senza problemi:

var iFrameDetection = (window === window.parent) ? false : true;

Sto usando questo:

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

Utilizzare questa funzione JavaScript come esempio su come eseguire questa operazione.

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;
}

Best-for-now Legacy Browser Frame Breaking Script

Le altre soluzioni non hanno funzionato per me. Questo funziona su tutti i browser:

Un modo per difendersi dal clickjacking è includere uno script "frame-breaker" in ogni pagina che non dovrebbe essere inquadrato. La seguente metodologia eviterà che una pagina web venga inquadrata anche nei browser legacy, che non supportano X-Frame-Options-Header.

Nell'elemento HEAD del documento, aggiungere quanto segue:

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

Innanzitutto applica un ID all'elemento di stile stesso:

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

In questo modo, tutto può essere contenuto nel documento HEAD e nell'API è necessario solo un metodo / taglib.

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

if ( window.location !== window.parent.location ) 
{
      // The page is in an iframe   
} 
else 
{     
      // The page is not in an iframe   
}

Dato che stai chiedendo nel contesto di un'app di Facebook, potresti prendere in considerazione l'idea di rilevarlo sul server quando viene effettuata la richiesta iniziale. Facebook passerà un mucchio di dati di querystring tra cui il tasto fb_sig_user se viene chiamato da un iframe.

Poiché probabilmente è necessario controllare e utilizzare questi dati comunque nella propria app, utilizzarli per determinare il contesto appropriato per il rendering.

In realtà controllavo window.parent e ha funzionato per me, ma ultimamente window è un oggetto ciclico e ha sempre una chiave genitore, iframe o no iframe.

Come i commenti suggeriscono un duro confronto con i lavori di window.parent. Non sono sicuro che funzionerà se iframe è esattamente la stessa pagina web del genitore.

window === window.parent;

È un antico pezzo di codice che ho usato alcune volte:

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

Se vuoi sapere se l'utente sta accedendo alla tua app dalla scheda della pagina Facebook o dalla tela, controlla la richiesta firmata. Se non lo capisci, probabilmente l'utente non accede da Facebook. Per essere sicuri di confermare la struttura dei campi signed_request e il contenuto dei campi.

Con php-sdk puoi ottenere la richiesta firmata in questo modo:

$signed_request = $facebook->getSignedRequest();

Puoi leggere ulteriori informazioni sulla richiesta firmata qui:

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

e qui:

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

Questa è stata la soluzione più semplice per me.

    <p id="demofsdfsdfs"></p>

<script>

if(window.self !== window.top) {

//run this code if in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "in frame";

}else{

//run code if not in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "no frame";
}

</script>

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

Ma solo se il numero di iframe differisce nella tua pagina e pagina che ti sta caricando in iframe. Non creare iframe nella tua pagina per avere il 100% di garanzia sul risultato di questo codice

Scrivi questo javascript in ogni pagina

if (self == top)
  { window.location = "Home.aspx"; }

Quindi reindirizzerà automaticamente alla home page.