프로그래밍 방식으로 브라우저 캐시를 비우는 방법은 무엇입니까?


121

프로그래밍 방식으로 브라우저 캐시를 비우는 방법을 찾고 있습니다. 응용 프로그램이 기밀 데이터를 캐시하기 때문에이 작업을 수행하고 "로그 아웃"을 누르면 해당 데이터를 제거하고 싶습니다. 이것은 서버 또는 JavaScript를 통해 발생합니다. 물론, 외부 / 공용 컴퓨터에서 소프트웨어를 사용하는 것은 여전히 ​​권장하지 않습니다. 키 로거와 같은 위험이 소프트웨어 수준에서는 극복 할 수 없기 때문입니다.


3
어떤 브라우저? 또한 브라우저에 서버에서 캐시하지 않을 항목과 삭제를 시도하는 것도 살펴 봐야합니다.
Mech Software

캐싱 및 작동 방식에 대한이 자습서를 확인할 수도 있습니다. mnot.net/cache_docs의 커버 같은 제어 헤더 및 물건 캐시
scrappedcola

@MechSoftware 더 빠른 페이지로드를 위해 캐시하고 싶지만 로그 오프 한 후 지우고 싶습니다. 가능한 한 우수한 브라우저 지원이 바람직합니다.
Tower

2
@rFactor 아무도 웹 사이트에서 캐시를 제어 할 수있는 브라우저를 사용하지 않습니다.
NullUserException 2011

3
사실상 웹 사이트는 HTTP 헤더를 제어하기 때문에 캐시를 제어합니다.
Danubian Sailor 2014

답변:


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 사양의 일부로 구현 된 애플리케이션 캐시에 의존합니다. 또한 앱 캐시 매니페스트를 설정하려면 서버 구성이 필요합니다. 클라이언트 또는 서버 측 코드를 통해 '전통적인'브라우저 캐시를 지울 수있는 방법을 설명하지 않습니다. 이는 거의 불가능합니다.


이것은 HTML5 기능 일 뿐입니 까?
John Naegle 2013-06-26

그렇게 말하고 싶습니다. 또한 서버 구성 (앱 캐시 매니페스트 설정)이 필요하다고 생각합니다. 이 답변은 원래 질문에 대한 해결책을 제공하지만 클라이언트 또는 서버 측 코드를 통해 기존 브라우저 캐시를 지우는 것이 거의 불가능하다는 사실을 모호합니다.
Eric Fuller

이 방법은 캐시를 우회하고 콘텐츠를 업데이트하는 것처럼 보이지만 페이지가 다시로드되면 이전에 캐시 된 콘텐츠로 돌아갑니다.
Simpler

서비스 워커를 위해 더 이상 사용되지 않음 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
사용자를 괴롭히기 위해 웹 앱의 캐시를 지우는 이유는 무엇입니까? 캐시 된 개인 데이터의 흔적을 지우고 싶습니다. 브라우저에 캐시하지 않도록 지시하면 페이지가로드 될 때마다 메가 바이트의 클라이언트 측 데이터를 요청해야합니다.
Tower

27
누구도 그렇게하지 않을 것입니다. 왜냐하면 분명히 그것은 불가능할 것이기 때문입니다. 다른 오리진에서 스크립트를 실행할 수없는 것처럼 오리진에서 스크립트를 실행할 수 없다는 의미는 아닙니다. 원격 오리진에서 캐시를 지울 수 없다면 논리적이지만 코드를 실행중인 오리진의 캐시를 지울 수없는 이유는 무엇입니까? 그렇게하지 않을 이유가 없기 때문에 해결책이 있는지 찾고 있지만 불가능한 것 같습니다. 너무 궁금하다면 CSS, HTML, JS가 많이 컴파일 된 대용량 애플리케이션이 약 6MB로 컴파일되어 있다고 말할 수 있습니다.
Tower

4
@rFactor 너무 많이 waaaay입니다.
NullUserException 2011

14
구현에 관계없이 보안 문제가되는 방법을 설명해주세요. 이것은 안전하게 구현 될 수 있습니다.
Dan

22
어젯밤에 충분한 수면을 취하지 못했을 수 있습니다. 웹 앱이 캐시를 지울 수있을 때 ( 변경할없는 ) 보안 문제가 될 수있는 방법은 무엇 입니까? 어떻게 악용 할 수 있습니까?
Volker E.

19

html 자체를 사용하십시오. 사용할 수있는 한 가지 트릭이 있습니다. 트릭은 스크립트 태그의 파일 이름에 매개 변수 / 문자열을 추가하고 파일이 변경 될 때 변경하는 것입니다.

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

브라우저는 "?"뒤에 무엇이 오더라도 전체 문자열을 파일 경로로 해석합니다. 매개 변수입니다. 따라서 다음 번에 파일을 업데이트 할 때 웹 사이트의 스크립트 태그에서 번호 만 변경하면 (예 <script src="myfile.js?version=1.0.1"></script>) 각 사용자의 브라우저에서 파일이 변경된 것을보고 새 사본을 가져옵니다.


1
일부 서버 측 동적 언어를 사용하는 경우 파일의 ctime, (또는 mtime)에 액세스 할 수 있으면 해당 시간을 뒤에 추가 할 수 있습니다. 예를 들어 php, myfile.js?v=<?=filectime('myfile.js');?>에서 리소스에 대한 자동 업데이트 캐시가 있습니다.
Pierre-Antoine Guillaume

저는이 기술을 며칠 동안 사용했습니다. 그러나 오늘은 버전 부분을 변경 한 후에도 파일이 여전히 캐시에서 렌더링되고 있음을 알았습니다. 나는 크롬을 사용하고 있었다. 서버에서 파일을 삭제 한 후에도 표시되었습니다. 누구나 작동하지 않는 이유에 대한 정보가 있습니까?
Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

이 트릭은 작동합니다. stackoverflow.com/questions/1922910/…
Nevin

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 () 는 새로운 크롬, 파이어 폭스, 오페라에도 사용할 수 있습니다.


이 기능은 Internet Explorer 및 Safari 브라우저에서는 작동하지 않습니다. Microsoft Edge에서 작동하는지 확실하지 않습니다.
호기심 개발자

3

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>

물론 그것은 작동하지 않을 것입니다. 작동하게하려면 하나 또는 몇 줄을 추가해야합니다 .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.