Cách buộc trình duyệt web KHÔNG lưu trữ hình ảnh

Lý lịch

Tôi đang viết và sử dụng một công cụ quản lý nội dung dựa trên CGI (Perl) rất đơn giản cho hai trang web pro-bono. Nó cung cấp cho người quản trị trang web các biểu mẫu HTML cho các sự kiện trong đó họ điền vào các trường (ngày, địa điểm, tiêu đề, mô tả, liên kết, v.v.) và lưu nó. Trên mẫu đó tôi cho phép quản trị viên tải lên một hình ảnh liên quan đến sự kiện. Trên trang HTML hiển thị biểu mẫu, tôi cũng đang hiển thị bản xem trước của hình ảnh được tải lên (thẻ HTML img).

Vấn đề

Vấn đề xảy ra khi quản trị viên muốn thay đổi hình ảnh. Anh ta chỉ cần nhấn nút "duyệt", chọn một hình ảnh mới và nhấn ok. Và điều này hoạt động tốt.

Khi hình ảnh được tải lên, CGI back-end của tôi xử lý việc tải lên và tải lại biểu mẫu đúng cách.

Vấn đề là hình ảnh hiển thị không được làm mới. Hình ảnh cũ vẫn được hiển thị, mặc dù cơ sở dữ liệu giữ đúng hình ảnh. Tôi đã thu hẹp nó xuống thực tế là HÌNH ẢNH ĐƯỢC BẮT ĐẦU trong trình duyệt web. Nếu quản trị viên nhấn nút RELOAD trong Firefox / Explorer / Safari, mọi thứ sẽ được làm mới tốt và hình ảnh mới sẽ xuất hiện.

Giải pháp của tôi - Không hoạt động

Tôi đang cố gắng kiểm soát bộ đệm bằng cách viết một lệnh hết hạn HTTP với một ngày rất xa trong quá khứ.

Expires: Mon, 15 Sep 2003 1:00:00 GMT

Hãy nhớ rằng tôi đứng về phía hành chính và tôi không thực sự quan tâm nếu các trang mất nhiều thời gian hơn để tải vì chúng luôn hết hạn.

Nhưng, điều này cũng không hoạt động.

Ghi chú

Khi tải lên một hình ảnh, tên tệp của nó không được lưu trong cơ sở dữ liệu. Nó được đổi tên thành Image.jpg (đơn giản là mọi thứ khi sử dụng nó). Khi thay thế hình ảnh hiện tại bằng một hình ảnh mới, tên cũng không thay đổi. Chỉ cần nội dung của tập tin hình ảnh thay đổi.

Máy chủ web được cung cấp bởi dịch vụ lưu trữ / ISP. Nó sử dụng Apache.

Câu hỏi

Có cách nào để buộc trình duyệt web KHÔNG lưu trữ những thứ từ trang này, thậm chí không phải hình ảnh không?

Tôi đang tung hứng với tùy chọn thực sự "lưu tên tệp" với cơ sở dữ liệu. Bằng cách này, nếu hình ảnh bị thay đổi, src của thẻ IMG cũng sẽ thay đổi. Tuy nhiên, điều này đòi hỏi rất nhiều thay đổi trên toàn trang web và tôi không làm điều đó nếu tôi có giải pháp tốt hơn. Ngoài ra, điều này sẽ vẫn không hoạt động nếu hình ảnh mới được tải lên có cùng tên (giả sử hình ảnh được photoshop một chút và tải lên lại).

Armin Ronacher có ý tưởng chính xác. Vấn đề là chuỗi ngẫu nhiên có thể va chạm. Tôi sẽ dùng:

<img src="picture.jpg?1222259157.415" alt="">

Trong đó "1222259157.415" là thời gian hiện tại trên máy chủ.
Tạo thời gian bằng Javascript bằng performance.now()hoặc bằng Python vớitime.time()

Khắc phục đơn giản: Đính kèm một chuỗi truy vấn ngẫu nhiên vào hình ảnh:

<img src="foo.cgi?random=323527528432525.24234" alt="">

RFC HTTP nói gì:

Cache-Control: no-cache

Nhưng nó không hoạt động tốt :)

Tôi sử dụng hàm thời gian sửa đổi tệp của PHP , ví dụ:

echo <img  src='Images/image.png?" . filemtime('Images/image.png') . "'  />";

Nếu bạn thay đổi hình ảnh thì hình ảnh mới sẽ được sử dụng thay vì hình ảnh được lưu trong bộ nhớ cache, do có dấu thời gian được sửa đổi khác nhau.

Tôi sẽ dùng:

<img src="picture.jpg?20130910043254">

trong đó "20130910043254" là thời gian sửa đổi của tệp.

Khi tải lên một hình ảnh, tên tệp của nó không được lưu trong cơ sở dữ liệu. Nó được đổi tên thành Image.jpg (đơn giản là mọi thứ khi sử dụng nó). Khi thay thế hình ảnh hiện tại bằng một hình ảnh mới, tên cũng không thay đổi. Chỉ cần nội dung của tập tin hình ảnh thay đổi.

Tôi nghĩ có hai loại giải pháp đơn giản: 1) những giải pháp đầu tiên xuất hiện (giải pháp đơn giản, vì chúng dễ đưa ra), 2) những giải pháp mà bạn kết thúc sau khi nghĩ ra mọi thứ (vì chúng dễ sử dụng). Rõ ràng, bạn sẽ không luôn có lợi nếu bạn chọn suy nghĩ mọi chuyện. Nhưng các lựa chọn thứ hai là khá thấp, tôi tin. Chỉ cần nghĩ tại sao phplà phổ biến;)

sử dụng Class = "NO-CACHE"

mẫu html:

<div>
    <img class="NO-CACHE" src="images/img1.jpg" />
    <img class="NO-CACHE" src="images/imgLogo.jpg" />
</div>

jQuery:

    $(document).ready(function ()
    {           
        $('.NO-CACHE').attr('src',function () { return $(this).attr('src') + "?a=" + Math.random() });
    });

javascript:

var nods = document.getElementsByClassName('NO-CACHE');
for (var i = 0; i < nods.length; i++)
{
    nods[i].attributes['src'].value += "?a=" + Math.random();
}

Kết quả: src = "hình ảnh / img1.jpg" => src = "hình ảnh / img1.jpg? A = 0,08749723793943926"

Bạn có thể viết một tập lệnh proxy để phục vụ hình ảnh - mặc dù vậy công việc đó hơi nhiều. Một cái gì đó thích điều này:

HTML:

<img src="image.php?img=imageFile.jpg&some-random-number-262376" />

Kịch bản:

// PHP
if( isset( $_GET['img'] ) && is_file( IMG_PATH . $_GET['img'] ) ) {

  // read contents
  $f = open( IMG_PATH . $_GET['img'] );
  $img = $f.read();
  $f.close();

  // no-cache headers - complete set
  // these copied from [php.net/header][1], tested myself - works
  header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Some time in the past
  header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
  header("Cache-Control: no-store, no-cache, must-revalidate"); 
  header("Cache-Control: post-check=0, pre-check=0", false); 
  header("Pragma: no-cache"); 

  // image related headers
  header('Accept-Ranges: bytes');
  header('Content-Length: '.strlen( $img )); // How many bytes we're going to send
  header('Content-Type: image/jpeg'); // or image/png etc

  // actual image
  echo $img;
  exit();
}

Trên thực tế, hoặc các tiêu đề không có bộ đệm hoặc số ngẫu nhiên tại src hình ảnh là đủ, nhưng vì chúng tôi muốn là bằng chứng đạn ..

Tôi là một Trình giải mã MỚI, nhưng đây là những gì tôi nghĩ ra, để ngăn Trình duyệt lưu vào bộ nhớ cache và giữ các lượt xem webcam của tôi:

<meta Http-Equiv="Cache" content="no-cache">
<meta Http-Equiv="Pragma-Control" content="no-cache">
<meta Http-Equiv="Cache-directive" Content="no-cache">
<meta Http-Equiv="Pragma-directive" Content="no-cache">
<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">

Không chắc chắn những gì hoạt động trên Trình duyệt nào, nhưng nó hoạt động với một số: IE: Hoạt động khi trang web được làm mới và khi trang web được xem lại (không cần làm mới). CHROME: Chỉ hoạt động khi trang web được làm mới (ngay cả sau khi xem lại). SAFARI và iPad: Không hoạt động, tôi phải xóa Lịch sử & Dữ liệu Web.

Bất kỳ ý tưởng nào trên SAFARI / iPad?

Khi tải lên một hình ảnh, tên tệp của nó không được lưu trong cơ sở dữ liệu. Nó được đổi tên thành Image.jpg (đơn giản là mọi thứ khi sử dụng nó).

Thay đổi điều này và bạn đã khắc phục vấn đề của mình. Tôi sử dụng dấu thời gian, như với các giải pháp được đề xuất ở trên: Image- <timestamp> .jpg

Có lẽ, bất kỳ vấn đề nào bạn đang tránh bằng cách giữ cùng tên tệp cho hình ảnh đều có thể khắc phục được, nhưng bạn không nói chúng là gì.

Tôi đã kiểm tra tất cả các câu trả lời trên web và câu trả lời hay nhất dường như là: (thực ra không phải vậy)

<img src="image.png?cache=none">

lúc đầu

Tuy nhiên, nếu bạn thêm cache = none tham số (đó là từ "none" tĩnh), thì nó không ảnh hưởng gì, trình duyệt vẫn tải từ bộ đệm.

Giải pháp cho vấn đề này là:

<img src="image.png?nocache=<?php echo time(); ?>">

về cơ bản bạn thêm dấu thời gian unix để làm cho tham số động và không có bộ đệm, nó hoạt động.

Tuy nhiên, vấn đề của tôi có một chút khác biệt: Tôi đang tải hình ảnh biểu đồ php được tạo ra và kiểm soát trang với các tham số $ _GET. Tôi muốn hình ảnh được đọc từ bộ đệm khi tham số URL GET giữ nguyên và không lưu bộ đệm khi tham số GET thay đổi.

Để giải quyết vấn đề này, tôi cần băm $ _GET nhưng vì nó là mảng nên đây là giải pháp:

$chart_hash = md5(implode('-', $_GET));
echo "<img src='/images/mychart.png?hash=$chart_hash'>";

Chỉnh sửa :

Mặc dù giải pháp trên chỉ hoạt động tốt, đôi khi bạn muốn phục vụ phiên bản được lưu trong bộ nhớ cache UNTIL, tệp được thay đổi. (với giải pháp trên, nó hoàn toàn vô hiệu hóa bộ đệm cho hình ảnh đó) Vì vậy, để phục vụ hình ảnh được lưu trong bộ nhớ cache từ trình duyệt UNTIL, có một sự thay đổi trong việc sử dụng tệp hình ảnh:

echo "<img src='/images/mychart.png?hash=" . filemtime('mychart.png') . "'>";

filemtime () được thời gian sửa đổi tập tin.

Vấn đề của bạn là mặc dù có Expires:tiêu đề, trình duyệt của bạn đang sử dụng lại bản sao trong bộ nhớ của hình ảnh từ trước khi nó được cập nhật, thay vì thậm chí kiểm tra bộ đệm của nó.

Tôi đã gặp tình huống rất giống khi tải lên hình ảnh sản phẩm trong phần phụ trợ quản trị viên cho một trang web giống như cửa hàng và trong trường hợp của tôi, tôi đã quyết định lựa chọn tốt nhất là sử dụng javascript để buộc làm mới hình ảnh, mà không sử dụng bất kỳ kỹ thuật sửa đổi URL nào mà người khác sử dụng đã được đề cập ở đây. Thay vào đó, tôi đặt URL hình ảnh vào một IFRAME ẩn, được gọi location.reload(true)trên cửa sổ của IFRAME và sau đó thay thế hình ảnh của tôi trên trang. Điều này buộc phải làm mới hình ảnh, không chỉ trên trang tôi đang truy cập mà còn trên bất kỳ trang nào tôi truy cập - mà không có máy khách hoặc máy chủ nào phải nhớ bất kỳ tham số chuỗi truy vấn hoặc đoạn mã URL nào.

Tôi đã đăng một số mã để làm điều này trong câu trả lời của tôi ở đây .

Thêm dấu thời gian <img src="picture.jpg?t=<?php echo time();?>">

sẽ luôn cung cấp cho tệp của bạn một số ngẫu nhiên ở cuối và dừng bộ đệm đó

Với khả năng có các proxy minh bạch hoạt động kém ở giữa bạn và khách hàng, cách duy nhất để hoàn toàn đảm bảo rằng hình ảnh sẽ không được lưu trong bộ nhớ cache là cung cấp cho chúng một uri duy nhất, giống như gắn thẻ dấu thời gian dưới dạng chuỗi truy vấn hoặc là một phần của con đường.

Nếu dấu thời gian đó tương ứng với thời gian cập nhật cuối cùng của hình ảnh, thì bạn có thể lưu trữ bộ đệm khi bạn cần và phục vụ hình ảnh mới vào đúng thời điểm.

Tôi giả sử câu hỏi ban đầu liên quan đến hình ảnh được lưu trữ với một số thông tin văn bản. Vì vậy, nếu bạn có quyền truy cập vào ngữ cảnh văn bản khi tạo src = ... url, hãy xem xét lưu trữ / sử dụng CRC32 của byte hình ảnh thay vì dấu ngẫu nhiên hoặc dấu thời gian vô nghĩa. Sau đó, nếu trang có nhiều hình ảnh được hiển thị, chỉ những hình ảnh được cập nhật mới được tải lại. Cuối cùng, nếu không thể lưu trữ CRC, nó có thể được tính toán và gắn vào url khi chạy.

Theo quan điểm của tôi, vô hiệu hóa bộ nhớ đệm hình ảnh là một ý tưởng tồi. Ở tất cả.

Vấn đề gốc ở đây là - làm thế nào để buộc trình duyệt cập nhật hình ảnh, khi nó đã được cập nhật ở phía máy chủ.

Một lần nữa, theo quan điểm cá nhân của tôi, giải pháp tốt nhất là vô hiệu hóa truy cập trực tiếp vào hình ảnh. Thay vào đó truy cập hình ảnh thông qua bộ lọc / máy chủ phía máy chủ / các công cụ / dịch vụ tương tự khác.

Trong trường hợp của tôi, đó là một dịch vụ nghỉ ngơi, trả về hình ảnh và đính kèm ETag. Dịch vụ giữ băm của tất cả các tệp, nếu tệp bị thay đổi, băm được cập nhật. Nó hoạt động hoàn hảo trong tất cả các trình duyệt hiện đại. Vâng, nó cần có thời gian để thực hiện nó, nhưng nó là giá trị nó.

Ngoại lệ duy nhất - là favicon. Vì một số lý do, nó không hoạt động. Tôi không thể buộc trình duyệt cập nhật bộ đệm từ phía máy chủ. ETags, Cache Control, Hết hạn, tiêu đề thực dụng, không có gì giúp được.

Trong trường hợp này, việc thêm một số tham số ngẫu nhiên / phiên bản vào url, có vẻ như, là giải pháp duy nhất.

Tốt nhất, bạn nên thêm một nút / keybinding / menu cho mỗi trang web với tùy chọn để đồng bộ hóa nội dung.

Để làm như vậy, bạn sẽ theo dõi các tài nguyên có thể cần được đồng bộ hóa và sử dụng xhr để thăm dò hình ảnh bằng chuỗi truy vấn động hoặc tạo hình ảnh khi chạy với src bằng chuỗi truy vấn động. Sau đó, sử dụng cơ chế phát sóng để thông báo cho tất cả các thành phần của các trang web đang sử dụng tài nguyên để cập nhật để sử dụng tài nguyên với chuỗi truy vấn động được gắn vào url của nó.

Một ví dụ ngây thơ trông như thế này:

Thông thường, hình ảnh được hiển thị và lưu vào bộ nhớ cache, nhưng nếu người dùng nhấn nút, một yêu cầu xhr được gửi đến tài nguyên với chuỗi truy vấn thời gian được nối với nó; vì thời gian có thể được coi là khác nhau trên mỗi lần nhấn, nên nó sẽ đảm bảo rằng trình duyệt sẽ bỏ qua bộ đệm vì nó không thể biết liệu tài nguyên có được tạo động ở phía máy chủ hay không dựa trên truy vấn hoặc nếu đó là tĩnh tài nguyên mà bỏ qua truy vấn.

Kết quả là bạn có thể tránh việc tất cả người dùng của bạn bắn phá bạn bằng các yêu cầu tài nguyên mọi lúc, nhưng đồng thời, cho phép người dùng cập nhật tài nguyên của họ nếu họ nghi ngờ rằng họ không đồng bộ.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="mobile-web-app-capable" content="yes" />        
    <title>Resource Synchronization Test</title>
    <script>
function sync() {
    var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {            
            var images = document.getElementsByClassName("depends-on-resource");

            for (var i = 0; i < images.length; ++i) {
                var image = images[i];
                if (image.getAttribute('data-resource-name') == 'resource.bmp') {
                    image.src = 'resource.bmp?i=' + new Date().getTime();                
                }
            }
        }
    }
    xhr.open('GET', 'resource.bmp', true);
    xhr.send();
}
    </script>
  </head>
  <body>
    <img class="depends-on-resource" data-resource-name="resource.bmp" src="resource.bmp"></img>
    <button onclick="sync()">sync</button>
  </body>
</html>

Tôi đã tạo một tập lệnh PHP tự động thêm dấu thời gian cho tất cả các hình ảnh trong trang HTML. Bạn chỉ cần đưa tập lệnh này vào các trang của bạn. Thưởng thức!

http://alv90.altervista.org/how-to-force-the-browser-not-to-cache-images/

Bạn phải sử dụng một tên tệp duy nhất. Như thế này

<img src="cars.png?1287361287" alt="">

Nhưng kỹ thuật này có nghĩa là sử dụng máy chủ cao và lãng phí băng thông. Thay vào đó, bạn nên sử dụng số phiên bản hoặc ngày. Thí dụ:

<img src="cars.png?2020-02-18" alt="">

Nhưng bạn muốn nó không bao giờ phục vụ hình ảnh từ bộ nhớ cache. Đối với điều này, nếu trang không sử dụng bộ đệm trang , có thể với phía PHP hoặc máy chủ.

<img src="cars.png?<?php echo time();?>" alt="">

Tuy nhiên, nó vẫn không hiệu quả. Lý do: Bộ đệm của trình duyệt ... Phương pháp cuối cùng nhưng hiệu quả nhất là JAVASCRIPT bản địa. Mã đơn giản này tìm thấy tất cả các hình ảnh với lớp "NO-CACHE" và làm cho hình ảnh gần như duy nhất. Đặt cái này giữa các thẻ script.

var items = document.querySelectorAll("img.NO-CACHE");
for (var i = items.length; i--;) {
    var img = items[i];
    img.src = img.src + '?' + Date.now();
}

SỬ DỤNG

<img class="NO-CACHE" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="">

KẾT QUẢ Thích cái này

https://example.com/image.png?1582018163634