¿Como puedo evitar que mi sitio sea puesto en un <iframe>
y cómo puedo permitir que sólo un sitio pueda ponerlo en él?
1 respuesta
Puedes comprobar si una página está dentro de un <iframe>
o no probando si window.self
(ventana o marco actual) y window.top
(ventana o marco padre) es el mismo:
try {
console.log('Estamos en iframe: ', window.self !== window.top);
console.log('Si nos lo permite CORS, podemos ver la URL:',
window.top.location);
} catch (e) {
/* Las políticas "same origin" impiden que accedamos a window.top */
console.log('Estamos en iframe');
}
Si no se cumplen las políticas de mismo origen (same origin) entonces no podremos comprobar la URL de la página padre, será imposible dar acceso a unas páginas sí y otras no si no lo acceso haciendo uso de CORS.
Las políticas de mismo origen se cumplen si incluyes una página dentro de otra si:
Dos páginas tienen el mismo origen si el protocolo, puerto (si es especificado) y host son los mismo para ambas páginas. Verá esto a veces referido como la tupla esquema/host/puerto" (donde una "tupla" es un conjunto de tres componentes que juntos forman un todo).
La siguiente tabla muestra ejemplos de comparaciones de origenes para la URL
http://store.company.com/dir/page.html
:
- http://store.company.com/dir2/other.html - Éxito
- http://store.company.com/dir/inner/another.html - Éxito
- https://store.company.com/secure.html - Fallo (diferente protocolo)
- http://store.company.com:81/dir/etc.html - Fallo (diferente puerto)
- http://news.company.com/dir/other.html - Fallo (diferente host)
Para implementar CORS en PHP necesitas hacer uso de la cabecera Access-Control-Allow-Origin
tal y como se muestra en este ejemplo:
<?php
/* Aquí comprobamos HTTP_REFERER para ver si permitimos o no el iframe */
if ($_SERVER['HTTP_REFERER'] === 'http://urlpermitida/exacta.html') {
header('Access-Control-Allow-Origin: http://urlpermitida');
}
/* Resto del código de la página */