Hvordan finne ut om en nettside er lastet inne i en iframe, eller direkte i nettleservinduet?

RoBorg er riktig, men jeg ønsket å legge til en side note.

I IE7 / IE8 når Microsoft lagt Tabs til nettleseren de brøt en ting som vil føre til kaos med JS hvis du ikke er forsiktig.

Tenk deg dette sideoppsettet:

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

Nå i ramme "baz" du klikker på en link (ingen mål, masse i "Baz" ramme) det fungerer fint.

Hvis siden som blir lastet, kan kalle det special.html, bruker JS for å sjekke om "det" har en overordnede rammen som heter "bar" det vil returnere true (forventet).

Nå kan si at special.html siden når det lastes, kontrollerer den overordnede rammen (for eksistens og sitt navn, og hvis det er "bar" det laster seg selv i bar ramme. f.eks

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

Så langt så bra. Nå kommer den feilen.

Kan si i stedet for å klikke på den opprinnelige koblingen som vanlig, og lasting av special.html siden i "baz" ramme, du middel klikket det eller valgte å åpne den i en ny fane.

Når den nye fanen laster ( uten foreldre rammer i det hele tatt! ) IE vil gå inn en endeløs løkke av side lasting! fordi IE "kopier enn" rammestrukturen i Javascript slik at den nye kategorien har en forelder, og at foreldrene har navnet "bar".

Den gode nyheten er at kontroll:

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

i den nye fanen ikke returnere true, og dermed kan du teste for dette merkelig tilstand.

Siden du spør i sammenheng med en facebook app, vil du kanskje vurdere å oppdage dette på serveren når den første forespørselen er gjort. Facebook vil passere langs en haug med QueryString data inkludert fb_sig_user nøkkelen hvis det kalles fra en iframe.

Siden du sannsynligvis trenger å kontrollere og bruke disse dataene likevel i programmet ditt, kan du bruke den til å bestemme den aktuelle konteksten å gjengi.

Bruk denne javascript funksjon som et eksempel på hvordan man skal oppnå dette.

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

Den aksepterte svaret fungerte ikke for meg inne i innholdsskript av en Firefox 6.0 Extension (Addon-SDK 1.0): Firefox utfører innholdsskript i hver: toppnivå vinduet og i alle iframes.

Inne i innholdsskript jeg får følgende resultater:

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

Det merkelige ting om denne produksjonen er at det er alltid den samme uavhengig om koden kjøres inne i en iframe eller vindu på øverste nivå.

På den annen side Google Chrome ser ut til å kjøre min innholdsskript eneste gang i løpet av vindu på øverste nivå, slik at ovennevnte ikke ville fungere i det hele tatt.

Det som til slutt fungerte for meg i en innholdsskript i begge nettleserne er dette:

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

Uten iframes Dette skriver 0:0, i et vindu på øverste nivå inneholdende en ramme det skrives 1:1, og i den eneste iframe av et dokument de skrives ut 0:1.

Dette gjør min forlengelse for å fastslå i begge nettleserne om det er noen iframes stede, og i tillegg i Firefox hvis den kjøres inn i en av iframes.

Det er et gammelt stykke kode som jeg har brukt et par ganger:

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

Jeg bruker dette:

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

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

Men bare hvis antall iframes forskjellig i din side og side som legger du i iframe. Gjør ingen iframe på siden din å ha 100% garanti for resultatet av denne koden

Skriv denne javascript i hver side

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

Deretter vil det automatisk omdirigerer til hjemmesiden.

Hvis du ønsker å vite om brukeren tilgang til app fra facebook side fane eller lerret sjekk for Signert Request. Hvis du ikke får det, sannsynligvis brukeren ikke har tilgang til fra facebook. For å være sikker bekrefte at signed_request felt struktur og felt innhold.

Med php-SDK kan du få den signert Request som dette:

$signed_request = $facebook->getSignedRequest();

Du kan lese mer om Signert Request her:

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

og her:

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

window.frameElementReturnerer element (for eksempel <iframe> eller <object>) i hvilken vinduet er innleiret, eller null hvis vinduet er på øverste nivå. Så identifisere koden ser slik ut

if (window.frameElement) {
  // in frame
}
else {
  // not in frame
}

Dette er standard og ganske ny metode. Det fungerer akkurat i Chrome og Firefox. Jeg kan ikke anbefale det som universell løsning, men det bør nevnes her tror jeg.

Jeg faktisk brukes til å sjekke window.parent og det fungerte for meg, men i det siste vinduet er en syklisk objekt og har alltid en forelder nøkkel, iframe eller ingen iframe.

Som kommentarene foreslår vanskelig å sammenligne med window.parent fungerer. Ikke sikker på om dette vil fungere hvis iframe er nøyaktig den samme nettsiden som forelder.

window === window.parent;

Jeg er ikke sikker på hvordan dette eksempelet fungerer for eldre nettlesere, men jeg bruker dette for IE, Firefox og Chrome uten og problemet:

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

Best-for-nå eldre nett Frame Breaking Script

De andre løsningene ikke fungerte for meg. Denne fungerer på alle nettlesere:

En måte å forsvare seg mot Clickjacking er å inkludere en "frame-breaker" script på hver side som ikke bør rammes. Følgende metodikk vil hindre en nettside fra å bli rammet selv i eldre nettlesere, som ikke støtter X-Frame-Options-Header.

I dokumentet HEAD element, legge til følgende:

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

Først gjelder en ID for stilelementet selv:

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

På denne måten kan alt være i dokumentet HEAD og du trenger bare en metode / taglib i API din.

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

Dette endte være den enkleste løsningen for meg.

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