javascript - otra - ¿Cómo identificar si una página web se está cargando dentro de un iframe o directamente en la ventana del navegador?
iframes properties (15)
Estoy escribiendo una aplicación de facebook basada en iframe. Ahora quiero usar la misma página html para representar el sitio web normal y la página de lienzo dentro de facebook. Quiero saber si puedo determinar si la página se ha cargado dentro del iframe o directamente en el navegador.
El mejor script para romper el marco del navegador heredado
Las otras soluciones no funcionaron para mí. Éste funciona en todos los navegadores:
Una forma de defenderse contra el clickjacking es incluir un script "que rompa el marco" en cada página que no deba ser enmarcado. La siguiente metodología evitará que una página web se enmarque incluso en navegadores heredados, que no son compatibles con X-Frame-Options-Header.
En el documento elemento HEAD, agregue lo siguiente:
<style id="antiClickjack">body{display:none !important;}</style>
Primero aplique una identificación al propio elemento de estilo:
<script type="text/javascript">
if (self === top) {
var antiClickjack = document.getElementById("antiClickjack");
antiClickjack.parentNode.removeChild(antiClickjack);
} else {
top.location = self.location;
}
</script>
De esta manera, todo puede estar en el documento HEAD y solo necesita un método / taglib en su API.
Referencia: https://www.codemagi.com/blog/post/194
Dado que está preguntando en el contexto de una aplicación de Facebook, es posible que desee considerar la detección de esto en el servidor cuando se realiza la solicitud inicial. Facebook pasará un montón de datos de la cadena de consulta, incluida la clave fb_sig_user si se llama desde un iframe.
Como es probable que necesite verificar y usar estos datos de todas formas en su aplicación, úselo para determinar el contexto apropiado para renderizar.
En realidad, solía marcar window.parent y funcionó para mí, pero últimamente window es un objeto cíclico y siempre tiene una clave principal, iframe o no iframe.
Como los comentarios sugieren una comparación difícil con windows.parent funciona. No estoy seguro de si esto funcionará si iframe es exactamente la misma página web que el principal.
window === window.parent;
Es un código antiguo que he usado varias veces:
if (parent.location.href == self.location.href) {
window.location.href = ''https://www.facebook.com/pagename?v=app_1357902468'';
}
Escribe este javascript en cada página
if (self == top)
{ window.location = "Home.aspx"; }
Luego se redirige automáticamente a la página de inicio.
Esto terminó siendo la solución más simple para mí.
<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>
Estoy usando esto:
var isIframe = (self.frameElement && (self.frameElement+"").indexOf("HTMLIFrameElement") > -1);
La respuesta aceptada no me funcionó dentro del script de contenido de una extensión de Firefox 6.0 (Addon-SDK 1.0): Firefox ejecuta el script de contenido en cada una: la ventana de nivel superior y en todos los iframes.
Dentro del script de contenido obtengo los siguientes resultados:
(window !== window.top) : false
(window.self !== window.top) : true
Lo extraño de esta salida es que siempre es lo mismo, independientemente de si el código se ejecuta dentro de un iframe o la ventana de nivel superior.
Por otro lado, Google Chrome parece ejecutar mi script de contenido solo una vez dentro de la ventana de nivel superior, por lo que lo anterior no funcionaría en absoluto.
Lo que finalmente me funcionó en un script de contenido en ambos navegadores es esto:
console.log(window.frames.length + '':'' + parent.frames.length);
Sin iframes, esto imprime 0:0 , en una ventana de nivel superior que contiene un marco, imprime 1:1 , y en el único iframe de un documento imprime 0:1 .
Esto permite que mi extensión determine en ambos navegadores si hay algunos iframes presentes, y adicionalmente en Firefox si se ejecuta dentro de uno de los iframes.
No estoy seguro de cómo funciona este ejemplo para los navegadores web más antiguos, pero uso esto para IE, Firefox y Chrome sin ningún problema:
var iFrameDetection = (window === window.parent) ? false : true;
RoBorg tiene razón, pero quería añadir una nota al margen.
En IE7 / IE8, cuando Microsoft agregó pestañas a su navegador, rompieron una cosa que causará estragos en su JS si no tiene cuidado.
Imagina este diseño de página:
MainPage.html
IframedPage1.html (named "foo")
IframedPage2.html (named "bar")
IframedPage3.html (named "baz")
Ahora, en el cuadro "baz", haces clic en un enlace (sin destino, se carga en el cuadro "baz") funciona bien.
Si la página que se carga, llamémosla special.html, usa JS para verificar si "tiene" un marco primario llamado "barra", devolverá verdadero (esperado).
Ahora digamos que la página special.html cuando se carga, comprueba el marco principal (busca la existencia y su nombre, y si es "barra" se vuelve a cargar en el marco de la barra, por ejemplo,
if(window.parent && window.parent.name == ''bar''){
window.parent.location = self.location;
}
Hasta ahora tan bueno. Ahora viene el error.
Digamos que en lugar de hacer clic en el enlace original como de costumbre, y al cargar la página special.html en el marco "baz", hizo clic con el botón central o eligió abrirlo en una nueva pestaña.
Cuando esa nueva pestaña se cargue (¡ sin marcos principales! ) ¡ IE entrará en un bucle sin fin de carga de páginas! porque IE "copia sobre" la estructura del cuadro en JavaScript, de modo que la nueva pestaña TIENE un padre, y ese padre TIENE el nombre "barra".
La buena noticia es que revisando:
if(self == top){
//this returns true!
}
en esa nueva pestaña devuelve verdadero, y así puedes probar esta condición impar.
Si desea saber si el usuario está accediendo a su aplicación desde la pestaña de la página de Facebook o en el lienzo, consulte la Solicitud firmada. Si no lo consigues, probablemente el usuario no esté accediendo desde facebook. Para asegurarse de confirmar la estructura de los campos signed_request y el contenido de los campos.
Con el php-sdk puede obtener la solicitud firmada de esta manera:
$signed_request = $facebook->getSignedRequest();
Puedes leer más sobre Solicitud Firmada aquí:
https://developers.facebook.com/docs/reference/php/facebook-getSignedRequest/
y aquí:
https://developers.facebook.com/docs/reference/login/signed-request/
Use esta función de javascript como un ejemplo de cómo lograr esto.
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;
}
window.frameElement Devuelve el elemento (como <iframe> o <object>) en el que la ventana está incrustada, o nula si la ventana es de nivel superior. Entonces el código de identificación parece
if (window.frameElement) {
// in frame
}
else {
// not in frame
}
Este es un método estándar y bastante nuevo . Funciona exactamente en Chrome y Firefox. No puedo recomendarlo como solución universal, pero creo que debería mencionarse aquí.
Los navegadores pueden bloquear el acceso a window.top debido a la misma política de origen . Errores de IE también tienen lugar. Aquí está el código de trabajo:
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
top y self son ambos objetos de window (junto con el elemento parent ), por lo que está viendo si su ventana es la ventana superior.
if (window.frames.length != parent.frames.length) { page loaded in iframe }
Pero solo si el número de iframes difiere en su página y en la página que lo está cargando en iframe. No haga iframe en su página para tener una garantía del 100% del resultado de este código