it-swarm-pt.tech

Impedindo o armazenamento em cache do iframe no navegador

Como você evita que o Firefox e o Safari armazenem em cache o conteúdo do iframe?

Eu tenho uma página da Web simples com um iframe para uma página em um site diferente. Tanto a página externa quanto a página interna têm cabeçalhos de resposta HTTP para impedir o armazenamento em cache. Quando eu clico no botão "voltar" no navegador, a página externa funciona corretamente, mas não importa o que, o navegador sempre recupera um cache da página iframed. IE funciona muito bem, mas o Firefox e o Safari estão me dando problemas.

Minha página da Web é algo como isto:

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

A variável var sempre muda. Apesar do fato de que a URL do iframe foi alterada (e, portanto, o navegador deve fazer uma nova solicitação para essa página), o navegador apenas busca o conteúdo em cache.

Eu examinei as solicitações e respostas HTTP indo e voltando, e notei que mesmo que a página externa contenha <iframe src="webpage2.html?var=222" />, o navegador ainda buscará webpage2.html?var=111.

Aqui está o que eu tentei até agora:

  • Alterando o URL do iframe com o valor do var aleatório
  • Adicionando os cabeçalhos Expires, Cache-Control e Pragma à página da Web externa
  • Adicionando os cabeçalhos Expires, Cache-Control e Pragma à página da Web interna

Não consigo fazer nenhum truque de JavaScript porque sou bloqueado pela mesma política de origem. 

Estou ficando sem ideias. Alguém sabe como impedir que o navegador armazene o conteúdo em iframed?

Atualizar

Eu instalei o Fiddler2 quando Daniel sugeriu realizar outro teste e, infelizmente, ainda estou obtendo os mesmos resultados.

Este é o teste que realizei:

  1. A página externa gera um número aleatório usando Math.random() no JSP.
  2. A página exterior exibe o número aleatório na página da web.
  3. A página exterior chama iframe, passando em um número aleatório.
  4. Página interna exibe o número aleatório.

Com esse teste, posso ver exatamente quais páginas estão atualizando e quais páginas estão armazenadas em cache.

Teste Visual

Para um teste rápido, eu carrego a página, navegue para outra página e pressione "voltar". Aqui estão os resultados:

Página original:

  • Página exterior: 0.21300034290246206
  • Página Interna: 0.21300034290246206

Deixando a página e depois voltando:

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

Isso mostra que a página interna está sendo armazenada em cache, mesmo que a página externa esteja chamando-a com um parâmetro GET diferente na URL. Por algum motivo, o navegador está ignorando o fato de que o iframe está solicitando um novo URL. simplesmente carrega o antigo.

Teste do violinista

Com certeza, o Fiddler confirma a mesma coisa.

(Eu carrego a página)

A página exterior é chamada. HTML:

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

http: //ipv4.fiddler: 1416/page1.aspx? var = 0.21300034290246206 é chamado.

(Eu saio da página e depois bato de volta.)

A página exterior é chamada. HTML:

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

http: //ipv4.fiddler: 1416/page1.aspx? var = 0.21300034290246206 é chamado.

Bem, a partir desse teste, parece que o navegador da Web não está armazenando em cache a página, mas está armazenando em cache a URL do iframe e, em seguida, fazendo uma nova solicitação nesse URL em cache. No entanto, ainda estou perplexo sobre como resolver esse problema.

Alguém tem alguma idéia sobre como impedir que o navegador da Web faça o cache de URLs iframe?

76
JR.

Faça com que o URL do iframe aponte para uma página em seu site que atua como um proxy para recuperar e retornar o conteúdo real do iframe. Agora você não está mais limitado pela mesma política de Origem (EDIT: não impede o problema de armazenamento em cache do iframe).

0
kmoser

Este é um bug no Firefox:

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

Tente esta solução alternativa:

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

<script>
var _theframe = document.getElementById("theframe");
_theframe.contentWindow.location.href = _theframe.src;
</script>
46
Caleb

Eu tenho sido capaz de contornar esse bug, definindo um atributo único name no iframe - por qualquer motivo, isso parece quebrar o cache. Você pode usar qualquer dado dinâmico que você tenha como atributo name - ou simplesmente o tempo atual ms ou ns em qualquer linguagem de template que você esteja usando. Esta é uma solução melhor do que as acima, porque não exige diretamente JS.

No meu caso particular, o iframe está sendo construído via JS (mas você poderia fazer o mesmo via PHP, Ruby, qualquer coisa), então eu simplesmente uso Date.now():

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

Isso corrige o bug no meu teste; provavelmente porque o window.name na janela interna é alterado.

27
STRML

É um bug no Firefox 3.5.

Dê uma olhada .. https://bugzilla.mozilla.org/show_bug.cgi?id=279048

3
renga

Depois de tentar todo o resto (exceto usando um proxy para o conteúdo do iframe), encontrei uma maneira de evitar o cache de conteúdo de iframe, do mesmo domínio:

Use .htaccess e uma regra de reconfiguração e altere o atributo iframe src.

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

A maneira como eu uso isso é que o URL do iframe acaba aparecendo assim: example.com/test/54/e3116491e90e05700880bf8b269a8cc7.html 

Onde [token] é um valor gerado aleatoriamente. Esse URL impede o armazenamento em cache de iframe, pois o token nunca é o mesmo, e o iframe acha que é uma página totalmente diferente, já que uma única atualização carrega um URL totalmente diferente: 

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

ambos levam à mesma página.

Você pode acessar seus parâmetros de URL ocultos com $_SERVER["QUERY_STRING"]

3
Jeff Noel

Como você disse, o problema aqui não é o armazenamento em cache de conteúdo iframe, mas iframe url cache.

Em setembro de 2018, parece que o problema ainda ocorre no Chrome, mas não no Firefox.

Eu tentei muitas coisas (adicionando um parâmetro GET variável, limpando o URL do iframe em onbeforeunload, detectando um "recarregamento do cache" usando um cookie, configurando vários cabeçalhos de resposta) e aqui estão as duas únicas soluções que funcionaram de mim:

1- Maneira fácil: crie seu iframe dinamicamente a partir do javascript

Por exemplo:

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

2- maneira complicada

Do lado do servidor, conforme explicado aqui , desativa o armazenamento em cache de conteúdo para o conteúdo que você serve para o iframe OU para a página pai (qualquer um servirá).

E

Defina o URL do iframe a partir do javascript com um parâmetro de pesquisa de alteração adicional, como este:

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

(versão simplificada, cuidado com outros parâmetros de pesquisa)

3
steph643

Para que o iframe sempre carregue conteúdo novo, adicione o carimbo de data/hora Unix atual ao final dos parâmetros GET. O navegador então a vê como uma solicitação 'diferente' e busca novo conteúdo.

Em Javascript, pode parecer:

frames['my_iframe'].location.href='load_iframe_content.php?group_ID=' + group_ID + '&timestamp=' + timestamp;
3
Division Six

Eu configurei o atributo iframe src posteriormente no meu aplicativo. Para se livrar do conteúdo em cache dentro de iframe no início do aplicativo eu simplesmente faço:

myIframe.src = "";

... em algum lugar no início do código js (por exemplo, no manipulador jquery $ ())

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

2
janekw

Eu encontrei este problema no Chrome mais recente, bem como no Safari mais recente no Mac OS X em 17 de março de 2016. Nenhuma das correções acima funcionou para mim, incluindo a atribuição de src para esvaziar e depois voltar para algum site ou adicionar alguns aleatoriamente chamado parâmetro "nome", ou adicionando um número aleatório no final da URL após o hash, ou atribuindo a janela de conteúdo href para o src depois de atribuir o src.

No meu caso, foi porque eu estava usando o Javascript para atualizar o IFRAME e apenas trocar o hash na URL.

A solução alternativa no meu caso foi que criei uma URL provisória que tinha um redirecionamento meta de 0 segundo para essa outra página. Acontece tão rápido que mal noto o flash da tela. Além disso, fiz com que a cor de fundo da página temporária fosse a mesma da outra página, e você percebe ainda menos.

2
Volomike

Eu também tive esse problema em 2016 com o iOS Safari. O que pareceu funcionar para mim foi Dando um parâmetro GET para o iframe src e um valor para ele assim 

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

0
Lauri Kääriäinen