it-swarm.asia

Mencegah caching iframe di browser

Bagaimana Anda mencegah Firefox dan Safari dari caching konten iframe?

Saya memiliki halaman web sederhana dengan iframe ke halaman di situs lain. Baik halaman luar dan halaman dalam memiliki header respons HTTP untuk mencegah caching. Ketika saya mengklik tombol "kembali" di browser, halaman luar berfungsi dengan baik, tapi apa pun itu, browser selalu mengambil cache dari halaman yang dibuka. IE berfungsi dengan baik, tetapi Firefox dan Safari memberi saya masalah.

Halaman web saya terlihat seperti ini:

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

Variabel var selalu berubah. Terlepas dari kenyataan bahwa URL iframe telah berubah (dan dengan demikian, browser harus membuat permintaan baru ke halaman itu), browser hanya mengambil konten yang di-cache.

Saya telah memeriksa permintaan dan tanggapan HTTP bolak-balik, dan saya perhatikan bahwa meskipun halaman luar berisi <iframe src="webpage2.html?var=222" />, browser masih akan mengambil webpage2.html?var=111.

Inilah yang saya coba sejauh ini:

  • Mengubah URL iframe dengan nilai var acak
  • Menambahkan Kedaluwarsa, Kontrol Cache, dan header Pragma ke halaman web luar
  • Menambahkan Kedaluwarsa, Kontrol Cache, dan header Pragma ke halaman web bagian dalam

Saya tidak dapat melakukan trik JavaScript karena saya diblokir oleh kebijakan Origin-sama. 

Saya kehabisan ide. Apakah ada yang tahu cara menghentikan browser dari caching konten yang dibingkai?

Memperbarui

Saya menginstal Fiddler2 seperti yang disarankan Daniel untuk melakukan tes lain, dan sayangnya, saya masih mendapatkan hasil yang sama.

Ini adalah tes yang saya lakukan:

  1. Halaman luar menghasilkan nomor acak menggunakan Math.random() di JSP.
  2. Halaman luar menampilkan nomor acak di halaman web.
  3. Halaman luar memanggil iframe, lewat nomor acak.
  4. Halaman dalam menampilkan nomor acak.

Dengan tes ini, saya dapat melihat halaman mana yang sedang diperbarui, dan halaman mana yang di-cache.

Tes Visual

Untuk pengujian cepat, saya memuat halaman, menavigasi ke halaman lain, dan kemudian tekan "kembali." Inilah hasilnya:

Halaman Asli:

  • Halaman Luar: 0.21300034290246206
  • Halaman Dalam: 0.21300034290246206

Keluar halaman, lalu tekan kembali:

  • Halaman luar: 0.4470929019483644
  • Halaman dalam: 0.21300034290246206

Ini menunjukkan bahwa halaman dalam sedang di-cache, meskipun halaman luar memanggilnya dengan parameter GET yang berbeda di URL. Untuk beberapa alasan, browser mengabaikan fakta bahwa iframe meminta URL baru; itu hanya memuat yang lama.

Tes Fiddler

Benar saja, Fiddler mengkonfirmasi hal yang sama.

(Saya memuat halaman.)

Halaman luar disebut. HTML:

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

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

(Saya menavigasi menjauh dari halaman dan kemudian tekan kembali.)

Halaman luar disebut. HTML:

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

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

Nah, dari tes ini, tampaknya seolah-olah browser web tidak melakukan caching halaman, tapi itu caching URL iframe dan kemudian membuat permintaan baru pada URL yang di-cache itu. Namun, saya masih bingung bagaimana mengatasi masalah ini.

Adakah yang punya ide tentang cara menghentikan browser web dari caching URL iframe?

76
JR.

Buat URL titik iframe ke halaman di situs Anda yang bertindak sebagai proxy untuk mengambil dan mengembalikan konten iframe yang sebenarnya. Sekarang Anda tidak lagi terikat oleh kebijakan Origin-sama (EDIT: tidak mencegah masalah caching iframe).

0
kmoser

Ini adalah bug di Firefox:

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

Coba solusi ini:

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

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

Saya telah dapat mengatasi bug ini dengan menetapkan atribut name yang unik pada iframe - untuk alasan apa pun, ini sepertinya akan menghancurkan cache. Anda dapat menggunakan data dinamis apa pun yang Anda miliki sebagai atribut name - atau cukup waktu ms atau ns saat ini dalam bahasa templating apa pun yang Anda gunakan. Ini adalah solusi yang lebih bagus daripada yang di atas karena tidak secara langsung memerlukan JS.

Dalam kasus khusus saya, iframe sedang dibangun melalui JS (tetapi Anda bisa melakukan hal yang sama melalui PHP, Ruby, apa pun), jadi saya cukup menggunakan Date.now():

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

Ini memperbaiki bug dalam pengujian saya; mungkin karena window.name di jendela dalam berubah.

27
STRML

Ini adalah bug di Firefox 3.5.

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

3
renga

Setelah mencoba yang lainnya (kecuali menggunakan proxy untuk konten iframe), saya menemukan cara untuk mencegah caching konten iframe, dari domain yang sama:

Gunakan .htaccess dan aturan penulisan ulang dan ubah atribut iframe src.

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

Cara saya menggunakan ini adalah bahwa URL iframe akhirnya terlihat seperti ini: example.com/test/54/e3116491e90e05700880bf8b269a8cc7.html 

Di mana [token] adalah nilai yang dihasilkan secara acak. URL ini mencegah caching iframe karena token tidak pernah sama, dan iframe berpikir itu adalah halaman web yang sama sekali berbeda karena satu penyegaran memuat URL yang sama sekali berbeda: 

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

keduanya mengarah ke halaman yang sama.

Anda dapat mengakses parameter url tersembunyi Anda dengan $_SERVER["QUERY_STRING"]

3
Jeff Noel

Seperti yang Anda katakan, masalah di sini bukanlah iframe caching konten, tetapi iframe caching url.

Pada September 2018, tampaknya masalah masih terjadi di Chrome tetapi tidak di Firefox.

Saya sudah mencoba banyak hal (menambahkan parameter GET yang berubah, membersihkan urr iframe di onbeununun, mendeteksi "reload from cache" menggunakan cookie, menyiapkan berbagai header respons) dan berikut ini adalah dua solusi yang bekerja dari saya:

1- Cara mudah: buat iframe Anda secara dinamis dari javascript

Sebagai contoh:

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

2- Cara berbelit-belit

Sisi server, seperti yang dijelaskan di sini , nonaktifkan cache konten untuk konten yang Anda layani untuk iframe ATAU untuk halaman induk (keduanya akan dilakukan).

DAN

Setel url iframe dari javascript dengan param pencarian tambahan yang berubah, seperti ini:

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

(versi yang disederhanakan, waspadalah terhadap params pencarian lainnya)

3
steph643

Untuk mendapatkan iframe agar selalu memuat konten baru, tambahkan cap waktu Unix saat ini ke akhir parameter GET. Browser kemudian melihatnya sebagai permintaan 'berbeda' dan akan mencari konten baru.

Dalam Javascript, ini mungkin terlihat seperti:

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

Saya menetapkan atribut iframe src nanti di aplikasi saya. Untuk menghilangkan konten yang di-cache di dalam iframe di awal aplikasi, saya cukup lakukan:

myIframe.src = "";

... di suatu tempat di awal kode js (misalnya di jquery $ () handler)

Terima kasih kepada http://www.freshsupercool.com/2008/07/10/firefox-caching-iframe-data/

2
janekw

Saya menemukan masalah ini di Chrome terbaru serta Safari terbaru di Mac OS X pada 17 Maret 2016. Tidak ada perbaikan di atas yang berfungsi untuk saya, termasuk menugaskan src untuk mengosongkan lalu kembali ke beberapa situs, atau menambahkan beberapa parameter "nama" yang dinamai secara acak, atau menambahkan nomor acak di akhir URL setelah hash, atau menetapkan jendela konten href ke src setelah menetapkan src.

Dalam kasus saya, itu karena saya menggunakan Javascript untuk memperbarui IFRAME, dan hanya mengganti hash di URL.

Solusi dalam kasus saya adalah bahwa saya membuat URL sementara yang memiliki meta redirect 0 detik ke halaman lain. Ini terjadi sangat cepat sehingga saya hampir tidak melihat layar flash. Selain itu, saya membuat warna latar belakang halaman sementara sama dengan halaman lainnya, dan Anda semakin menyadarinya.

2
Volomike

Saya juga punya masalah ini pada 2016 dengan iOS Safari. Apa yang tampaknya bekerja untuk saya adalah Memberikan parameter GET ke iframe src dan nilai untuk itu seperti ini 

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

0