web-dev-qa-db-ja.com

プログラムでブラウザのキャッシュを空にする方法は？

プログラムでブラウザのキャッシュを空にする方法を探しています。アプリケーションが機密データをキャッシュし、「ログアウト」を押したときにそれらを削除したいため、これを行っています。これは、サーバーまたはJavaScriptを介して発生します。もちろん、ソフトウェアレベルで敗北させることのできないキーロガーなどの危険性があるため、外国/公共のコンピューターでソフトウェアを使用することはお勧めできません。

javascripthtml5cachingbrowser
101
Tower

キャッシュステータスを参照する「メタタグ」をイベントハンドラー/ボタンに置​​き換えるだけでjQueryを使用することができます。その後、簡単に更新し、

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

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

注：このソリューションは、HTML 5仕様の一部として実装されているアプリケーションキャッシュに依存しています。また、App Cacheマニフェストをセットアップするためのサーバー構成も必要です。クライアント側またはサーバー側のコードを介して「従来の」ブラウザキャッシュをクリアできる方法については説明していませんが、これはほとんど不可能です。

35
Zeal Murapa

ブラウザがキャッシュをクリアできるようにする方法はありません。それが可能であれば、それは大きなセキュリティ問題になります。これは非常に簡単に悪用される可能性があります-ブラウザがそのような「機能」をサポートする瞬間は、コンピューターからアンインストールする瞬間になります。

適切なヘッダーを送信するか、これらのメタタグを使用して、ページをキャッシュしないようにcanすることです。

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

フォームフィールドでオートコンプリートをオフにすることも検討してください。標準的な方法があるのではないかと心配しています（ この質問を参照 ）。

とにかく、機密データを扱う場合はSSLを使用する必要があることを指摘したいと思います。 SSLを使用していない場合、ネットワークにアクセスできる人はだれでもネットワークトラフィックを傍受して、ユーザーが見ているものを簡単に見ることができます。

SSLを使用すると、明示的に指示されない限り、一部のブラウザーはキャッシュを使用しませんnot。 この質問 を参照してください。

137
NullUserException

html自体を使用します。使用できるトリックが1つあります。トリックは、スクリプトタグ内のファイル名にパラメーター/文字列を追加し、ファイルの変更時に変更することです。

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

ブラウザは、「？」の後に何が来ても、文字列全体をファイルパスとして解釈しますパラメータです。そのため、次にファイルを更新するときに、Webサイト上のスクリプトタグの番号を変更するだけで（例<script src="myfile.js?version=1.0.1"></script>）、各ユーザーのブラウザーでファイルが変更され、新しいコピーを取得することになります。

13
Joish

キャッシュをクリアする必要がある場合、新しいハッシュで新しいファイルを生成するだけで、ブラウザがトリガーされて新しいファイルがロードされます

7
Admiral Duck

Chromeでは、ベンチマーク拡張機能を使用してこれを行うことができます。次のスイッチを使用してChromeを起動する必要があります。

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

Chromeのコンソールでは、次のことができるようになりました。

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

上記のコマンドからわかるように、ブラウザのキャッシュをクリアするだけでなく、DNSキャッシュもクリアしてネットワーク接続を閉じます。これらは、ページの読み込み時間のベンチマークを行うときに最適です。明らかに、不要な場合はすべてを使用する必要はありません（たとえば、キャッシュのみをクリアする必要があり、DNSキャッシュと接続を気にしない場合はclearCache（）で十分です）。

3
kakhkAtion

location.reload（true）;キャッシュを無視して、現在のページをハードリロードします。
Cache.delete（） は、新しいchrome、firefox、operaにも使用できます。

3
Jay Shah

最初は、ブラウザキャッシュをクリアするために、html、JSでさまざまなプログラムによるアプローチを試みました。最新のChromeでは何も動作しません。

最後に、.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>

Chrome、Firefox、Operaでテスト済み

リファレンス： https://wp-mix.com/disable-caching-htaccess/

3
rajagopalx

Cache.delete（） を使用できるようになりました

例：

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)
    }
  }));

Chrome 40以降、Firefox 39以降、Opera 27以降、Edgeで動作します。

1
r.delic
//The code below should be put in the "js" folder with the name "clear-browser-cache.js"

(function () {
    var process_scripts = false;
    var rep = /.*\?.*/,
    links = document.getElementsByTagName('link'),
    scripts = document.getElementsByTagName('script');
    var value = document.getElementsByName('clear-browser-cache');
    for (var i = 0; i < value.length; i++) {
        var val = value[i],
            outerHTML = val.outerHTML;
        var check = /.*value="true".*/;
        if (check.test(outerHTML)) {
            process_scripts = true;
        }
    }
    for (var i = 0; i < links.length; i++) {
        var link = links[i],
        href = link.href;
        if (rep.test(href)) {
            link.href = href + '&' + Date.now();
        }
        else {
            link.href = href + '?' + Date.now();
        }
    }
    if (process_scripts) {
        for (var i = 0; i < scripts.length; i++) {
            var script = scripts[i],
            src = script.src;
            if (src !== "") {
                if (rep.test(src)) {
                    script.src = src + '&' + Date.now();
                }
                else {
                    script.src = src + '?' + Date.now();
                }
            }
        }
    }
})();
At the end of the tah head, place the line at the code below

    < script name="clear-browser-cache" src='js/clear-browser-cache.js' value="true" >< /script >
1
haimirick

.jsファイルが/my-site/some/path/ui/js/myfile.jsに配置されていると想像してください

したがって、通常、スクリプトタグは次のようになります。

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

次のように変更します。

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

もちろん、それはうまくいきません。動作させるには、.htaccessに1行または数行を追加する必要があります。重要な行は次のとおりです（.htaccess全体を下に）

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

そのため、これは、パスから1111111111を削除し、正しいパスにリンクします。

そのため、変更を加えた場合は、番号1111111111を必要な番号に変更するだけです。また、ファイルを含める場合、jsファイルが最後に変更されたときのタイムスタンプを介してその番号を設定できます。したがって、数値が変わらない場合、キャッシュは正常に機能します。ブラウザが完全な新しいURLを取得し、そのファイルが非常に新しいと信じているため、変更した場合、新しいファイルを提供します（常にYES）。

これは、CSS、favicons、およびキャッシュされるものに使用できます。 CSSの場合は、次のように使用します

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

そして、それは動作します！更新が簡単で、保守が簡単です。

約束された完全な.htaccess

.htaccessがまだない場合は、これが必要です。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

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