プログラムでブラウザーのキャッシュを空にする方法を探しています。これは、アプリケーションが機密データをキャッシュし、「ログアウト」を押したときにそれらを削除したいためです。これは、サーバーまたはJavaScriptを介して行われます。もちろん、キーロガーのようにソフトウェアレベルで打ち負かすことができないより多くの危険があるので、外国/公共のコンピューターでソフトウェアを使用することはまだお勧めできません。
プログラムでブラウザーのキャッシュを空にする方法を探しています。これは、アプリケーションが機密データをキャッシュし、「ログアウト」を押したときにそれらを削除したいためです。これは、サーバーまたはJavaScriptを介して行われます。もちろん、キーロガーのようにソフトウェアレベルで打ち負かすことができないより多くの危険があるので、外国/公共のコンピューターでソフトウェアを使用することはまだお勧めできません。
回答:
可能です。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マニフェストをセットアップするためのサーバー構成も必要です。クライアント側またはサーバー側のコードを介して「従来の」ブラウザキャッシュをクリアできる方法については説明していません。これは、ほとんど不可能です。
ブラウザがキャッシュをクリアする方法はありません。それが可能なら、それは大きなセキュリティ問題になるでしょう。これは非常に簡単に悪用される可能性があります。ブラウザがそのような「機能」をサポートする分は、コンピュータからアンインストールする分になります。
適切なヘッダーを送信するか、次のメタタグを使用して、ページをキャッシュしないようにすることができます。
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
また、フォームフィールドのオートコンプリートをオフにすることを検討することもできますが、標準的な方法があります(この質問を参照してください)。
いずれにしても、機密データを扱う場合はSSLを使用する必要があることを指摘しておきます。SSLを使用していない場合は、ネットワークにアクセスできる人なら誰でもネットワークトラフィックを傍受して、ユーザーが表示している内容を簡単に確認できます。
また、SSLを使用すると、明示的に指示されない限り、一部のブラウザーはキャッシュを使用しなくなります。この質問を参照してください。
html自体を使用します。使用できるトリックが1つあります。トリックは、スクリプトタグのファイル名にパラメーター/文字列を追加し、ファイルの変更時に変更します。
<script src="myfile.js?version=1.0.0"></script>
ブラウザは、「?」の後に何があっても、文字列全体をファイルパスとして解釈します。パラメータです。つまり、次にファイルを更新するときに、Webサイトのスクリプトタグの番号を変更するだけで(例<script src="myfile.js?version=1.0.1"></script>
)、各ユーザーのブラウザでファイルが変更されたことがわかり、新しいコピーが取得されます。
ctime
(またはmtime
)にアクセスできる場合は、その時間を追加することができます。たとえば、php 、、myfile.js?v=<?=filectime('myfile.js');?>
およびそこには、リソースの自動更新キャッシュがあります。
最初に、ブラウザーのキャッシュをクリアするために、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でテスト済み
location.reload(true); キャッシュを無視して、現在のページをハードリロードします。
Cache.delete()は、新しいchrome、firefox、operaにも使用できます。
Chromeでは、ベンチマーク拡張機能を使用してこれを実行できるはずです。次のスイッチでChromeを起動する必要があります。
./chrome --enable-benchmarking --enable-net-benchmarking
Chromeのコンソールで、次のことができるようになりました。
chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();
上記のコマンドからわかるように、ブラウザのキャッシュをクリアするだけでなく、DNSキャッシュもクリアしてネットワーク接続を閉じます。これらは、ページの読み込み時間のベンチマークを行うときに最適です。明らかに、必要がなければすべてを使用する必要はありません(たとえば、キャッシュのみをクリアする必要があり、DNSキャッシュと接続を気にしない場合は、clearCache()で十分です)。
//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 >
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で動作します。
.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>