Jak programowo opróżnić pamięć podręczną przeglądarki?

Szukam sposobu na programowe opróżnienie pamięci podręcznej przeglądarki. Robię to, ponieważ aplikacja przechowuje poufne dane i chciałbym je usunąć po naciśnięciu "wyloguj". Może się to zdarzyć za pośrednictwem serwera lub JavaScript. Oczywiście korzystanie z oprogramowania na obcym / publicznym komputerze jest nadal odradzane, ponieważ istnieje więcej niebezpieczeństw, takich jak rejestratory kluczy, których po prostu nie można pokonać na poziomie oprogramowania.

Jest możliwe, możesz po prostu użyć jQuery, aby zastąpić „metatag”, który odwołuje się do stanu pamięci podręcznej, za pomocą modułu / przycisku obsługi zdarzeń, a następnie odświeżyć, łatwo,

$('.button').click(function() {
    $.ajax({
        url: "",
        context: document.body,
        success: function(s,x){

            $('html[manifest=saveappoffline.appcache]').attr('content', '');
                $(this).html(s);
        }
    }); 
});

UWAGA: To rozwiązanie opiera się na pamięci podręcznej aplikacji, która jest zaimplementowana jako część specyfikacji HTML 5. Wymaga również konfiguracji serwera w celu skonfigurowania manifestu pamięci podręcznej aplikacji. Nie opisuje metody, za pomocą której można wyczyścić „tradycyjną” pamięć podręczną przeglądarki za pomocą kodu po stronie klienta lub serwera, co jest prawie niemożliwe do zrobienia.

W żaden sposób przeglądarka nie pozwoli Ci wyczyścić pamięci podręcznej. Gdyby to było możliwe, byłby to ogromny problem z bezpieczeństwem. To może być bardzo łatwo nadużywane - w chwili, gdy przeglądarka obsługuje taką „funkcję”, będzie to moment, w którym odinstaluję ją z mojego komputera.

Co można zrobić, to powiedzieć, że nie buforować stronę, przesyłając odpowiednie nagłówki lub używając następujących tagów meta:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

Możesz także rozważyć wyłączenie autouzupełniania pól formularza, chociaż obawiam się, że istnieje standardowy sposób ( zobacz to pytanie ).

Niezależnie od tego, chciałbym zwrócić uwagę, że jeśli pracujesz z wrażliwymi danymi, powinieneś używać SSL. Jeśli nie używasz SSL, każdy, kto ma dostęp do sieci, może podsłuchiwać ruch sieciowy i łatwo zobaczyć, co widzi Twój użytkownik.

Używanie SSL sprawia, że ​​niektóre przeglądarki nie używają buforowania, chyba że wyraźnie nakazano. Zobacz to pytanie .

użyj samego html. Jest jedna sztuczka, której można użyć: sztuczka polega na dołączeniu parametru / ciągu do nazwy pliku w tagu skryptu i zmianie go, gdy dokonujesz zmian w pliku.

<script src="myfile.js?version=1.0.0"></script>

Przeglądarka interpretuje cały ciąg jako ścieżkę do pliku, nawet jeśli znajduje się on po znaku „?” są parametrami. Więc teraz dzieje się tak, że następnym razem, gdy zaktualizujesz plik, po prostu zmień numer w tagu skryptu na swojej stronie internetowej (przykład <script src="myfile.js?version=1.0.1"></script>), a przeglądarka każdego użytkownika zobaczy, że plik się zmienił i pobierze nową kopię.

Najlepszym pomysłem jest wygenerowanie pliku js z nazwą + trochę skrótu z wersją, jeśli musisz wyczyścić pamięć podręczną, po prostu wygeneruj nowe pliki z nowym hashem, spowoduje to, że przeglądarka załaduje nowe pliki

Początkowo próbowałem różnych metod programistycznych w moim html, JS, aby wyczyścić pamięć podręczną przeglądarki. W najnowszym Chrome nic nie działa.

W końcu otrzymałem .htaccess:

<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

Przetestowano w Chrome, Firefox, Opera

Źródła: https://wp-mix.com/disable-caching-htaccess/

location.reload (true); ciężko przeładuje bieżącą stronę, ignorując pamięć podręczną.
Cache.delete () może być również używany w nowych przeglądarkach Chrome, Firefox i Opera.

W przeglądarce Chrome powinieneś to zrobić za pomocą rozszerzenia do testów porównawczych. Musisz uruchomić Chrome za pomocą następujących przełączników:

./chrome --enable-benchmarking --enable-net-benchmarking 

W konsoli Chrome możesz teraz wykonać następujące czynności:

chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();

Jak widać z powyższych poleceń, nie tylko czyści pamięć podręczną przeglądarki, ale także czyści pamięć podręczną DNS i zamyka połączenia sieciowe. Są świetne, gdy wykonujesz testy porównawcze czasu ładowania strony. Oczywiście nie musisz używać ich wszystkich, jeśli nie są potrzebne (np. ClearCache () powinno wystarczyć, jeśli chcesz wyczyścić tylko pamięć podręczną i nie przejmujesz się pamięcią podręczną DNS i połączeniami).

Możesz teraz używać Cache.delete ()

Przykład:

let id = "your-cache-id";
// you can find the id by going to 
// application>storage>cache storage 
// (minus the page url at the end)
// in your chrome developer console 

caches.open(id)
.then(cache => cache.keys()
  .then(keys => {
    for (let key of keys) {
      cache.delete(key)
    }
  }));

Działa na Chrome 40+, Firefox 39+, Opera 27+ i Edge.

Wyobraź sobie, że .jspliki są umieszczone w/my-site/some/path/ui/js/myfile.js

Więc normalnie tag script wyglądałby tak:

<script src="/my-site/some/path/ui/js/myfile.js"></script>

Teraz zmień to na:

<script src="/my-site/some/path/ui-1111111111/js/myfile.js"></script>

Teraz oczywiście to nie zadziała. Aby to działało, musisz dodać jedną lub kilka linii do swojego .htaccess . Ważna linia to: (cały .htaccess na dole)

RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]

Więc to, co to robi, to rodzaj usuwania 1111111111ze ścieżki i łączy do właściwej ścieżki.

Więc teraz, jeśli wprowadzisz zmiany, wystarczy zmienić liczbę 1111111111na dowolną liczbę. Jakkolwiek dołączasz swoje pliki, możesz ustawić tę liczbę za pomocą sygnatury czasowej, kiedy plik js był ostatnio modyfikowany. Więc pamięć podręczna będzie działać normalnie, jeśli liczba się nie zmieni. Jeśli się zmieni, będzie obsługiwał nowy plik (TAK ZAWSZE), ponieważ przeglądarka otrzymuje kompletny nowy adres URL i po prostu uważa, że ​​plik jest tak nowy, że musi go pobrać.

Można użyć do tego CSS, faviconsi co kiedykolwiek dostaje buforowane. W przypadku CSS po prostu użyj w ten sposób

<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">

I to zadziała! Prosty w aktualizacji, prosty w utrzymaniu.

Obiecany pełny .htaccess

Jeśli nie masz jeszcze .htaccess, jest to minimum, które musisz tam mieć:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>