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


121

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


3
どのブラウザ?また、サーバーからキャッシュしないことと消去しようとすることをブラウザに指示することも検討する必要があります。
Mech Software

また、キャッシングに関するこのチュートリアルとその仕組みを確認することもできます。mnot.net/cache_docsのカバーは、そのような制御ヘッダとかキャッシュ
scrappedcola

@MechSoftwareページの読み込みを高速化するためにキャッシュしたいのですが、ログオフ後にキャッシュをクリアしたいです。できればブラウザのサポートはできる限り良いものにしてください。
タワー

2
@rFactor Webサイトのキャッシュを制御できるブラウザを使用する人はいません。
NullUserException

3
デファクトWebサイトはHTTPヘッダーを制御するため、キャッシュを制御できます。
ダヌビアンセーラー

回答:


38

可能です。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マニフェストをセットアップするためのサーバー構成も必要です。クライアント側またはサーバー側のコードを介して「従来の」ブラウザキャッシュをクリアできる方法については説明していません。これは、ほとんど不可能です。


これはHTML5機能だけですか?
John Naegle 2013年

私もそう思いますし、サーバーの構成も必要です(アプリキャッシュマニフェストをセットアップするため)。この回答は元の質問に対する解決策を提供しますが、クライアント側またはサーバー側のコードを介して従来のブラウザーのキャッシュをクリアすることはほぼ不可能であるという事実を覆い隠します。
エリックフラー

このメソッドはキャッシュをバイパスしてコンテンツを更新するようですが、ページがリロードされると、以前にキャッシュされたコンテンツに戻ります。
2014

サービス労働者のために廃止developer.mozilla.org/en-US/docs/Web/HTML/...
nadav

2
サービスワーカーはiPhoneでは機能しないため、そこでアプリキャッシュを使用する必要があります
tony

159

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

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

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

また、フォームフィールドのオートコンプリートをオフにすることを検討することもできますが、標準的な方法があります(この質問を参照してください)。

いずれにしても、機密データを扱う場合はSSLを使用する必要があることを指摘しておきます。SSLを使用していない場合は、ネットワークにアクセスできる人なら誰でもネットワークトラフィックを傍受して、ユーザーが表示している内容を簡単に確認できます。

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


8
ユーザーを困らせるためにWebアプリのキャッシュをクリアするのはなぜですか?キャッシュされた個人データの痕跡をクリアするためにそれをしたいです。キャッシュしないようにブラウザーに指示した場合、ページが読み込まれるたびにメガバイトのクライアント側データを要求する必要がありますが、どちらも望んでいません。
タワー

27
明らかにそれは不可能であるため、誰もそうしません。別のオリジンでスクリプトを実行できないのと同じように、オリジンでスクリプトを実行できないわけではありません。リモートオリジンのキャッシュをクリアできない場合、それは当然ですが、コードを実行しているオリジンのキャッシュをクリアできないのはなぜですか?そうしない理由はないので、解決策があるかどうかを探していますが、それは不可能のようです。気になる方は、CSS、HTML、JSを6 MBにコンパイルした大量のアプリケーションがあることをお伝えします。
タワー

4
@rFactorそれはwaaaay多すぎる。
NullUserException

14
実装に関係なく、これがセキュリティの問題になる理由を説明してください。これは安全に実装できます。
Dan

22
たぶん私は昨夜十分な睡眠をとれなかったかもしれません。Webアプリがキャッシュをクリア(変更ではなく)できるとしたら、それはどのようにセキュリティ上の問題でしょうか?どうやってそれを利用できますか?
Volker E.

19

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

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

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


1
サーバーサイドの動的言語を使用している場合、ファイルのctime(またはmtime)にアクセスできる場合は、その時間を追加することができます。たとえば、php 、、myfile.js?v=<?=filectime('myfile.js');?>およびそこには、リソースの自動更新キャッシュがあります。
Pierre-Antoine Guillaume

このテクニックを何日も使っていました。しかし、今日気付いたのですが、バージョン部分を変更した後でも、ファイルはキャッシュからレンダリングされたままです。Chromeを使っていました。サーバーからファイルを削除した後でも表示されていました。誰もがそれがうまくいかないかもしれない理由を何か持っていますか?
TᴀʀᴇǫMᴀʜᴍᴏᴏᴅ

このトリックは機能します、stackoverflow.com
questions

9

最良のアイデアは、名前付きのjsファイル生成とバージョン付きのハッシュを作成することです。キャッシュをクリアする必要がある場合は、新しいハッシュで新しいファイルを生成するだけで、ブラウザが新しいファイルをロードします。


5

最初に、ブラウザーのキャッシュをクリアするために、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/


4

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


この機能は、Internet ExplorerおよびSafariブラウザでは機能しません。Microsoft Edgeと連携するかどうかは不明です。
好奇心旺盛な開発者

3

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

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

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

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

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


2

//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 >


3
この回答がどのように機能するか、多くの既存の回答よりも優れているかは不明です。これは非常にあなたが次のようにだけでなく、ショーは、なぜそれが動作することを文書化を支援しているアプローチ内容の説明と改善することができた
Vlad274

認められていますが、これはブラウザのキャッシュをクリアしませんが、パラメータを追加するだけで、指定されたページのリンクをキャッシュバストするようです。
Dan Chase

1

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で動作します。


0

.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>

もちろん、これはうまくいきません。これを機能させるには、1行または数行を行に追加する必要があります.htaccess 。重要な行は次のとおりです(.htaccess全体が下部にあります)。

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

つまり、これは1111111111、パスからを削除し、正しいパスにリンクすることです。

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

これを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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.