프로그래밍 방식으로 브라우저 캐시를 비우는 방법을 찾고 있습니다. 응용 프로그램이 기밀 데이터를 캐시하기 때문에이 작업을 수행하고 "로그 아웃"을 누르면 해당 데이터를 제거하고 싶습니다. 이것은 서버 또는 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 사양의 일부로 구현 된 애플리케이션 캐시에 의존합니다. 또한 앱 캐시 매니페스트를 설정하려면 서버 구성이 필요합니다. 클라이언트 또는 서버 측 코드를 통해 '전통적인'브라우저 캐시를 지울 수있는 방법을 설명하지 않습니다. 이는 거의 불가능합니다.
없다 방법 브라우저는 캐시를 지우 드릴 것입니다. 가능하다면 큰 보안 문제가 될 것입니다. 이것은 매우 쉽게 악용 될 수 있습니다. 브라우저가 이러한 "기능"을 지원하는 순간 컴퓨터에서 제거하는 순간입니다.
당신이 할 수있는 일은 적절한 헤더를 보내거나 다음 메타 태그를 사용하여 페이지를 캐시하지 않도록 지시하는 것입니다.
<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 자체를 사용하십시오. 사용할 수있는 한 가지 트릭이 있습니다. 트릭은 스크립트 태그의 파일 이름에 매개 변수 / 문자열을 추가하고 파일이 변경 될 때 변경하는 것입니다.
<script src="myfile.js?version=1.0.0"></script>
브라우저는 "?"뒤에 무엇이 오더라도 전체 문자열을 파일 경로로 해석합니다. 매개 변수입니다. 따라서 다음 번에 파일을 업데이트 할 때 웹 사이트의 스크립트 태그에서 번호 만 변경하면 (예 <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에서는 벤치마킹 확장 프로그램을 사용하여이 작업을 수행 할 수 있습니다. 다음 스위치로 크롬을 시작해야합니다.
./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>
물론 그것은 작동하지 않을 것입니다. 작동하게하려면 하나 또는 몇 줄을 추가해야합니다 .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>