Prevención del almacenamiento en caché de iframe en el navegador


¿Cómo se evita que Firefox y Safari almacenen en caché el contenido de iframe?

Tengo una página web simple con un iframe a una página en un sitio diferente. Tanto la página externa como la interna tienen encabezados de respuesta HTTP para evitar el almacenamiento en caché. Cuando hago clic en el botón "atrás" en el navegador, la página exterior funciona correctamente, pero no importa qué, el navegador siempre recupera una caché de la página iframed. IE funciona muy bien, pero Firefox y Safari me están dando problemas.

Mi página web se ve algo como esto:

<html>
  <head><!-- stuff --></head>
<body>
  <!-- stuff -->
  <iframe src="webpage2.html?var=xxx" />
  <!-- stuff -->
</body>
</html>

La variable var siempre cambia. A pesar de que la URL del iframe ha cambiado (y por lo tanto, el navegador debería hacer una nueva solicitud a esa página), el navegador simplemente obtiene el contenido almacenado en caché.

He examinado las solicitudes y respuestas HTTP que van y vienen, y me di cuenta de que incluso si la página exterior contiene <iframe src="webpage2.html?var=222" />, el navegador todavía obtendrá webpage2.html?var=111.

Esto es lo que he intentado hasta ahora:

  • Cambiar la URL del iframe con valor var aleatorio
  • Agregar encabezados Expira, Cache-Control y Pragma a la página web externa
  • Agregar encabezados Expira, Cache-Control y Pragma a la página web interna

No puedo hacer ningún truco de JavaScript porque estoy bloqueado por la política del mismo origen.

Me estoy quedando sin ideas. ¿Alguien sabe cómo evitar que el navegador almacene en caché el contenido iframed?

Actualización

Instalé Fiddler2 como Daniel sugirió para realizar otra prueba, y desafortunadamente, todavía estoy obteniendo los mismos resultados.

Esta es la prueba que realicé:

  1. La página exterior genera un número aleatorio usando Math.random() en JSP.
  2. La página exterior muestra un número aleatorio en la página web.
  3. La página externa llama a iframe, pasando un número aleatorio.
  4. La página interna muestra un número aleatorio.

Con esta prueba, puedo ver exactamente qué páginas se están actualizando y qué páginas están almacenadas en caché.

Prueba visual

Para una rápida prueba, cargo la página, navego a otra página y luego presiono "atrás."Aquí están los resultados:

Página original:

  • Página exterior: 0.21300034290246206
  • Página interior: 0.21300034290246206

Saliendo de la página, luego golpeando:

  • Página exterior: 0.4470929019483644
  • Página interior: 0.21300034290246206

Esto muestra que la página interior se está almacenando en caché, aunque la página exterior la esté llamando con un parámetro GET diferente en la URL. Por alguna razón, el navegador está ignorando el hecho de que el iframe está solicitando una nueva URL; simplemente carga la antigua.

Fiddler Test

Efectivamente, Fiddler confirma lo mismo.

(Cargo la página.)

Se llama Página exterior. HTML:

0.21300034290246206
<iframe src="http://ipv4.fiddler:1416/page1.aspx?var=0.21300034290246206" />

Http://ipv4.fiddler: 1416 / page1.aspx?se llama var=0.21300034290246206.

(Navego fuera de la página y luego vuelvo a golpear.)

Se llama Página exterior. HTML:

0.4470929019483644
<iframe src="http://ipv4.fiddler:1416/page1.aspx?var=0.4470929019483644" />

Http://ipv4.fiddler: 1416 / page1.aspx?se llama var=0.21300034290246206.

Bueno, a partir de esta prueba, parece que el navegador web no está almacenando en caché la página, sino que está almacenando en caché la URL del iframe y luego haciendo una nueva solicitud en esa URL almacenada en caché. Sin embargo, todavía estoy perplejo en cuanto a cómo resolver este problema.

¿Alguien tiene alguna idea sobre cómo evitar que el navegador web almacene en caché las URL de iframe?

Author: JR., 2010-04-15

13 answers

Haga que la URL del iframe apunte a una página de su sitio que actúe como proxy para recuperar y devolver el contenido real del iframe. Ahora ya no está vinculado por la política del mismo origen.

 1
Author: kmoser,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-06-29 16:50:00

Este es un error en Firefox:

Https://bugzilla.mozilla.org/show_bug.cgi?id=356558

Pruebe esta solución:

<iframe src="webpage2.html?var=xxx" id="theframe"></iframe>

<script>
var _theframe = document.getElementById("theframe");
_theframe.contentWindow.location.href = _theframe.src;
</script>
 45
Author: Caleb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-10-21 03:30:10

He sido capaz de solucionar este error estableciendo un atributo único name en el iframe - por cualquier razón, esto parece destruir la caché. Puede usar cualquier dato dinámico que tenga como atributo name, o simplemente el tiempo actual de ms o ns en cualquier lenguaje de plantillas que esté utilizando. Esta es una solución más agradable que las anteriores porque no requiere directamente JS.

En mi caso particular, el iframe se está construyendo a través de JS (pero podría hacer lo mismo a través de PHP, Ruby, lo que sea), así que simplemente uso Date.now():

return '<iframe src="' + src + '" name="' + Date.now() + '" />';

Esto corrige el error en mis pruebas; probablemente porque el window.name en la ventana interna cambia.

 26
Author: STRML,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-04 08:47:29

Es un error en Firefox 3.5.

Echa un vistazo.. https://bugzilla.mozilla.org/show_bug.cgi?id=279048

 3
Author: renga,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-23 06:03:10

Para que el iframe cargue siempre contenido nuevo, agregue la marca de tiempo Unix actual al final de los parámetros GET. El navegador lo ve como una solicitud 'diferente' y buscará nuevo contenido.

En Javascript, podría verse como:

frames['my_iframe'].location.href='load_iframe_content.php?group_ID=' + group_ID + '&timestamp=' + timestamp;
 3
Author: Division Six,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-12 21:36:50

Después de probar todo lo demás (excepto usar un proxy para el contenido de iframe), encontré una manera de evitar el almacenamiento en caché de contenido de iframe, desde el mismo dominio :

Use .htaccess y una regla de reescritura y cambie el atributo iframe src.

RewriteRule test/([0-9]+)/([a-zA-Z0-9]+).html$ /test/index.php?idEntity=$1&token=$2 [QSA]

La forma en que uso esto es que la URL del iframe termina mirando de esta manera: example.com/test/54/e3116491e90e05700880bf8b269a8cc7.html

Donde [token] es un valor generado aleatoriamente. Esta URL impide el almacenamiento en caché de iframe, ya que el token nunca es el mismo, y el iframe piensa es una página web totalmente diferente ya que una sola actualización carga una URL totalmente diferente :

example.com/test/54/e3116491e90e05700880bf8b269a8cc7.html
example.com/test/54/d2cc21be7cdcb5a1f989272706de1913.html

Ambos conducen a la misma página.

Puede acceder a sus parámetros de url ocultos con $_SERVER["QUERY_STRING"]

 3
Author: Jeff Noel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-22 17:41:56

Establecí el atributo iframe src más adelante en mi aplicación. Para deshacerse del contenido en caché dentro de iframe al inicio de la aplicación simplemente hago:

myIframe.src = "";

... en algún lugar al principio del código js (por ejemplo en jquery hand () handler)

Gracias a http://www.freshsupercool.com/2008/07/10/firefox-caching-iframe-data /

 2
Author: janekw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-18 09:10:48

He encontrado este problema en la última Chrome, así como la última Safari en el Mac OS X a partir de Mar 17, 2016. Ninguna de las correcciones anteriores funcionó para mí, incluida la asignación de src para vaciar y luego volver a algún sitio, o agregar un parámetro "name" con nombre aleatorio, o agregar un número aleatorio al final de la URL después del hash, o asignar la ventana de contenido href al src después de asignar el src.

En mi caso, fue porque estaba usando Javascript para actualizar el IFRAME, y solo cambiar el hash en la URL.

La solución en mi caso fue que creé una URL provisional que tenía un meta redireccionamiento de 0 segundos a esa otra página. Sucede tan rápido que apenas noto el flash de la pantalla. Además, hice que el color de fondo de la página provisional sea el mismo que el de la otra página, por lo que se nota aún menos.

 2
Author: Volomike,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-17 19:51:10

También tuve este problema en 2016 con iOS Safari. Lo que parecía funcionar para mí era dar un parámetro GET al iframe src y un valor para él como este

<iframe width="60%" src="../other/url?cachebust=1" allowfullscreen></iframe>

 0
Author: Lauri Kääriäinen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-06 13:16:43

Como ha dicho, el problema aquí no es iframe content caching, sino iframe url caching.

A partir de septiembre de 2018, parece que el problema todavía se produce en Chrome, pero no en Firefox.

He intentado muchas cosas (agregar un parámetro GET cambiante, borrar la url del iframe en onbeforeunload, detectar un "reload from cache" usando una cookie, configurar varios encabezados de respuesta) y aquí están las únicas dos soluciones que funcionaron desde mí:

1- Manera fácil: crear su iframe dinámicamente desde javascript

Por ejemplo:

const iframe = document.createElement('iframe')
iframe.id = ...
...
iframe.src = myIFrameUrl 
document.body.appendChild(iframe)

2- forma Enrevesada

Del lado del servidor, como se explica aquí, deshabilite el almacenamiento en caché del contenido para el contenido que sirve para el iframe O para la página padre (cualquiera de los dos lo hará).

Y

Establezca la url del iframe desde javascript con un parámetro de búsqueda adicional, como este:

const url = myIFrameUrl + '?timestamp=' + new Date().getTime()
document.getElementById('my-iframe-id').src = url

(versión simplificada, cuidado con otros parámetros de búsqueda)

 0
Author: steph643,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-25 22:18:22

¿Ha instalado Fiddler2 ?

Le permitirá ver exactamente lo que se está solicitando, lo que se está enviando de vuelta, etc. No parece plausible que el navegador realmente golpee su caché para diferentes URL.

 -1
Author: Daniel Earwicker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-04-15 18:43:00

¿Ha intentado agregar las diversas opciones de encabezado HTTP para no-cache a la página iframe?

 -1
Author: Chris Webb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-10-06 09:57:54

Si desea que realmente se vuelva loco, podría implementar el nombre de la página como una url dinámica que siempre se resuelve en la misma página, en lugar de la opción querystring?

Suponiendo que esté en una oficina, compruebe si hay algún almacenamiento en caché a nivel de red. Créeme, es una posibilidad. Su gente de TI podrá decirle si hay alguna infraestructura de red alrededor del almacenamiento en caché HTTP, aunque como esto solo sucede para el iframe, es poco probable.

 -1
Author: Chris Webb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-10-07 10:43:03