Verhindern des Iframe-Caching im Browser

85

Wie verhindern Sie, dass Firefox und Safari Iframe-Inhalte zwischenspeichern?

Ich habe eine einfache Webseite mit einem Iframe zu einer Seite auf einer anderen Site. Sowohl die äußere als auch die innere Seite verfügen über HTTP-Antwortheader, um das Caching zu verhindern. Wenn ich im Browser auf die Schaltfläche "Zurück" klicke, funktioniert die äußere Seite ordnungsgemäß, aber egal was passiert, der Browser ruft immer einen Cache der iframed-Seite ab. IE funktioniert gut, aber Firefox und Safari machen mir Probleme.

Meine Webseite sieht ungefähr so ​​aus:

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

Die varVariable ändert sich immer. Trotz der Tatsache, dass sich die URL des Iframes geändert hat (und der Browser daher eine neue Anfrage an diese Seite stellen sollte), ruft der Browser nur den zwischengespeicherten Inhalt ab.

Ich habe die hin und her gehenden HTTP-Anforderungen und -Antworten untersucht und festgestellt, dass <iframe src="webpage2.html?var=222" />der Browser auch dann abruft, wenn die äußere Seite enthält webpage2.html?var=111.

Folgendes habe ich bisher versucht:

  • Ändern der iframe-URL mit zufälligem var-Wert
  • Hinzufügen von Expires-, Cache-Control- und Pragma-Headern zur äußeren Webseite
  • Hinzufügen von Expires-, Cache-Control- und Pragma-Headern zur inneren Webseite

Ich kann keine JavaScript-Tricks ausführen, da ich von derselben Richtlinie blockiert werde.

Mir gehen die Ideen aus. Weiß jemand, wie man den Browser daran hindert, den iframed-Inhalt zwischenzuspeichern?

Aktualisieren

Ich habe Fiddler2 installiert, als Daniel vorgeschlagen hat, einen weiteren Test durchzuführen, und leider erhalte ich immer noch die gleichen Ergebnisse.

Dies ist der Test, den ich durchgeführt habe:

  1. Die äußere Seite generiert eine Zufallszahl Math.random()in JSP.
  2. Die äußere Seite zeigt eine Zufallszahl auf der Webseite an.
  3. Die äußere Seite ruft iframe auf und übergibt eine Zufallszahl.
  4. Auf der Innenseite wird eine Zufallszahl angezeigt.

Mit diesem Test kann ich genau sehen, welche Seiten aktualisiert und welche Seiten zwischengespeichert werden.

Visueller Test

Für einen schnellen Test lade ich die Seite, navigiere zu einer anderen Seite und drücke dann "Zurück". Hier sind die Ergebnisse:

Originalseite:

  • Äußere Seite: 0.21300034290246206
  • Innere Seite: 0.21300034290246206

Seite verlassen, dann zurückschlagen:

  • Äußere Seite: 0.4470929019483644
  • Innere Seite: 0.21300034290246206

Dies zeigt, dass die innere Seite zwischengespeichert wird, obwohl die äußere Seite sie mit einem anderen GET-Parameter in der URL aufruft. Aus irgendeinem Grund ignoriert der Browser die Tatsache, dass der Iframe eine neue URL anfordert. es lädt einfach den alten.

Geigen-Test

Sicher genug, bestätigt Fiddler dasselbe.

(Ich lade die Seite.)

Die äußere Seite wird aufgerufen. HTML:

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

http: //ipv4.fiddler: 1416 / page1.aspx? var = 0.21300034290246206 wird aufgerufen.

(Ich navigiere von der Seite weg und drücke dann zurück.)

Die äußere Seite wird aufgerufen. HTML:

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

http: //ipv4.fiddler: 1416 / page1.aspx? var = 0.21300034290246206 wird aufgerufen.

Aus diesem Test geht hervor, dass der Webbrowser die Seite nicht zwischenspeichert, sondern die URL des Iframes zwischenspeichert und dann eine neue Anforderung für diese zwischengespeicherte URL stellt. Ich bin jedoch immer noch ratlos, wie ich dieses Problem lösen kann.

Hat jemand Ideen, wie der Webbrowser daran gehindert werden kann, Iframe-URLs zwischenzuspeichern?

browser caching iframe back-button JR.
quelle
11
+1 - Dein Schreiben fängt den Schmerz so gut ein.
Nickf
1
Vielen Dank für die sehr detaillierte Erklärung des Problems. Dies ist zu 100% genau das, was ich mit einer Site erlebe. Es ist sieben Jahre her und der Firefox-Fehlerbericht ist immer noch vorhanden.
Scuzzy

Antworten:

-3

Stellen Sie sicher, dass die URL des Iframes auf eine Seite auf Ihrer Site verweist, die als Proxy zum Abrufen und Zurückgeben des tatsächlichen Inhalts des Iframes fungiert. Jetzt sind Sie nicht mehr an die Richtlinie mit demselben Ursprung gebunden (BEARBEITEN: Verhindert das Problem des Iframe-Caching nicht).

kmoser
quelle
41
Dies verhindert nicht den Cache.
Baash05
@ baash05 Ich habe nie behauptet, dass es so ist; Ich sagte, es vermeidet die Politik der gleichen Herkunft.
kmoser
1
Richtig .. aber der Op-Titel lautet "Verhindern des Iframe-Caching im Browser" und wenn Ihre Antwort das Iframe-Caching im Browser nicht verhindert, ist dies keine wirkliche Antwort. Es ist schön zu wissen, aber immer noch kein guter Rat für jemanden, der das Caching verhindern möchte.
baash05
OP wollte das Caching lösen und die Richtlinie mit demselben Ursprung vermeiden. Eine teilweise Antwort ist besser als keine :)
kmoser
2
Toast fällt immer Marmelade Seite nach unten :)
Baash05
56

Dies ist ein Fehler in Firefox:

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

Versuchen Sie diese Problemumgehung:

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

<script>
var _theframe = document.getElementById("theframe");
_theframe.contentWindow.location.href = _theframe.src;
</script>
Caleb
quelle
3
Heute 27.2.2014 Ich bin so glücklich, diesen Thread gefunden zu haben, dass ich dachte, er könnte durch serverseitiges No-Caching gelöst werden. FF 27 haben immer noch diesen Fehler.
Robert
7
7.8.2014 - 8 Jahre später und immer noch nicht behoben.
Łukasz Zaroda
Dies gilt auch für das srcdoc-Attribut, so seltsam ... So großartig fand ich das.
Elundmark
2
Ich habe das gleiche Caching-Problem mit Chrome gefunden und die beiden Zeilen von JavaScript haben es behoben. Danke dir!
Thorn
2
Wow, hatte genau das gleiche Problem. War spezifisch für Firefox - funktionierte gut in IE, Chrome usw. Danke @caleb. Ich kann nicht glauben, dass das so lange gedauert hat.
Voodoo
32

Ich konnte diesen Fehler umgehen, indem ich ein eindeutiges nameAttribut für den Iframe festlegte - aus irgendeinem Grund scheint dies den Cache zu sprengen. Sie können alle dynamischen Daten verwenden, die Sie als nameAttribut haben - oder einfach die aktuelle ms- oder ns-Zeit in der von Ihnen verwendeten Vorlagensprache. Dies ist eine schönere Lösung als die oben genannten, da JS nicht direkt benötigt wird.

In meinem speziellen Fall wird der Iframe über JS erstellt (aber Sie können dasselbe auch über PHP, Ruby usw. tun), also verwende ich einfach Date.now():

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

Dies behebt den Fehler in meinen Tests; wahrscheinlich weil sich das window.nameim inneren fenster ändert.

STRML
quelle
2
Diese Antwort funktioniert für Chrome, Firefox und Safari ab Ende 2015.
Rovermicrover
12

Wie Sie sagten, geht es hier nicht um das Zwischenspeichern von Iframe-Inhalten , sondern um das Zwischenspeichern von Iframe-URLs .

Ab September 2018 scheint das Problem immer noch in Chrome, aber nicht in Firefox aufzutreten.

Ich habe viele Dinge ausprobiert (Hinzufügen eines sich ändernden GET-Parameters, Löschen der Iframe-URL in onbeforeunload, Erkennen eines "Neuladens aus dem Cache" mithilfe eines Cookies, Einrichten verschiedener Antwortheader) und hier sind die einzigen zwei Lösungen, die von mir aus funktioniert haben:

1- Einfacher Weg: Erstellen Sie Ihren Iframe dynamisch aus Javascript

Beispielsweise:

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

2- Gewundener Weg

Wie hier erläutert , deaktivieren Sie auf der Serverseite das Zwischenspeichern von Inhalten für den Inhalt, den Sie für den Iframe ODER für die übergeordnete Seite bereitstellen ( beides reicht aus).

UND

Stellen Sie die Iframe-URL aus Javascript mit einem zusätzlichen sich ändernden Suchparameter wie folgt ein:

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

(vereinfachte Version, Vorsicht vor anderen Suchparametern)

steph643
quelle
5

Nachdem ich alles andere ausprobiert hatte (außer die Verwendung eines Proxys für den Iframe-Inhalt), fand ich eine Möglichkeit, das Zwischenspeichern von Iframe-Inhalten aus derselben Domäne zu verhindern :

Verwenden Sie .htaccesseine Umschreiberegel und ändern Sie das iframe- srcAttribut.

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

Ich benutze dies so, dass die URL des Iframes am Ende so aussieht: example.com/test/54/e3116491e90e05700880bf8b269a8cc7.html

Wobei [Token] ein zufällig generierter Wert ist. Diese URL verhindert das Zwischenspeichern von Iframes, da das Token niemals dasselbe ist und der Iframe denkt, dass es sich um eine völlig andere Webseite handelt, da bei einer einzelnen Aktualisierung eine völlig andere URL geladen wird:

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

beide führen zur gleichen Seite.

Sie können mit auf Ihre versteckten URL-Parameter zugreifen $_SERVER["QUERY_STRING"]

Jeff Noel
quelle
1
Arbeitete für mich - Danke!
Quinn Finney
@ QuinnFinney Ich bin froh, dass dies jemand anderem nützlich war. Ich brauchte ein paar Tage, um dieses Problem zu lösen :)
Jeff Noel
Ja ich auch! hahaha
Quinn Finney
3

Fügen Sie den aktuellen Unix-Zeitstempel am Ende der GET-Parameter hinzu, damit der Iframe immer frischen Inhalt lädt. Der Browser sieht es dann als eine "andere" Anfrage und sucht nach neuen Inhalten.

In Javascript könnte es so aussehen:

frames['my_iframe'].location.href='load_iframe_content.php?group_ID=' + group_ID + '&timestamp=' + timestamp;
Abteilung Sechs
quelle
3

Ich habe dieses Problem in der neuesten Version von Chrome sowie in der neuesten Version von Safari unter Mac OS X vom 17. März 2016 gefunden. Keine der oben genannten Korrekturen hat bei mir funktioniert, einschließlich der Zuweisung von src zu leer und dann zurück zu einer Site oder zum Hinzufügen ein zufällig benannter "Name" -Parameter oder das Hinzufügen einer Zufallszahl am Ende der URL nach dem Hash oder das Zuweisen des Inhaltsfensters href zum src nach dem Zuweisen des src.

In meinem Fall lag es daran, dass ich Javascript zum Aktualisieren des IFRAME verwendet und nur den Hash in der URL gewechselt habe.

Die Problemumgehung in meinem Fall bestand darin, dass ich eine Zwischen-URL erstellt habe, die eine 0-Sekunden-Metaumleitung zu dieser anderen Seite hatte. Es geht so schnell, dass ich den Bildschirmblitz kaum bemerke. Außerdem habe ich die Hintergrundfarbe der Zwischenseite mit der der anderen Seite identisch gemacht, sodass Sie sie noch weniger bemerken.

Volomike
quelle
0

Ich hatte dieses Problem auch 2016 mit iOS Safari. Was für mich zu funktionieren schien, war, dem iframe src einen GET-Parameter und einen Wert dafür zu geben

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

Lauri Kääriäinen
quelle
-1

Haben Sie Fiddler2 installiert ?

Sie können genau sehen, was angefordert wird, was zurückgesendet wird usw. Es klingt nicht plausibel, dass der Browser seinen Cache für verschiedene URLs wirklich erreicht hat.

Daniel Earwicker
quelle
1
Danke für den Tipp zu Fiddler2. Jetzt weiß ich, dass der Browser den Iframe-Inhalt nicht zwischenspeichert. Es wird einfach die Iframe-URL zwischengespeichert. Ich bin jedoch immer noch ratlos und habe keine Ahnung, warum der Browser die Iframe-URL der neuen Seite ignoriert und einfach nur die alte URL verwendet.
JR.
-1

Wenn Sie wirklich verrückt werden möchten, können Sie den Seitennamen als dynamische URL implementieren, die immer auf dieselbe Seite aufgelöst wird, anstatt als Querystring-Option?

Angenommen, Sie befinden sich in einem Büro, überprüfen Sie, ob auf Netzwerkebene Caching stattfindet. Glauben Sie mir, es ist eine Möglichkeit. Ihre IT-Mitarbeiter können Ihnen mitteilen, ob es eine Netzwerkinfrastruktur rund um das HTTP-Caching gibt. Da dies jedoch nur für den Iframe geschieht, ist dies unwahrscheinlich.

Chris Webb
quelle
-2

Haben Sie versucht, der iframe-Seite die verschiedenen HTTP-Header-Optionen für No-Cache hinzuzufügen?

Chris Webb
quelle
Jep. Ich habe versucht, Direktiven ohne Cache sowohl in den HTTP-Headern als auch in den Meta-Tags auf jeder Seite zu verwenden.
JR.