javascript - 使用 CSRF token 缓存请求时如何减少服务 worker 缓存大小

Question

我有一个 service worker 正在缓存来自浏览器的请求，因此该页面可以离线工作。但是，每次用户注销并重新登录时，都会生成一个新的 CSRF token ，并且所有以前缓存的数据都没有用，因为请求包含 CSRF token 作为查询字符串的一部分。这需要再次重新缓存所有相同的数据，因此我们在缓存中留下了数据的多个副本，由于不同的 CSRF token ，每个副本仅具有不同的请求 URL。

我首先查询网络，然后在网络不可用时故障转移到缓存。

我应该如何处理与 CSRF token 相关的这些响应的缓存？在执行 cache.put() 和 cache.match() 函数之前，我应该从 event.request 值中手动删除 CSRF token 吗？这甚至被允许吗？通过修改请求 URL，似乎仍然可以返回该请求之前缓存的值，即使用户已注销并重新登录也是如此，这将是所需的行为。

此外，如何在不从缓存中清除所有条目的情况下删除所有与当前 CSRF token 不匹配的缓存请求？

这是相关的 Service Worker 代码:

self.addEventListener('fetch', function(event) 
// 'fetch' event lister: if the network is UP, fetch the data across the network and cache the result.
// If network is unavailable, attempt to fetch from cache.
{
    // Send a response, first by trying the network, then by looking in cache.  If both fail, an error occurs.
    event.respondWith(
        // Try to fetch the request from the network:       
        fetch(event.request)
            // If successful, cache a clone of the response, then return it.
            .then(function(response)
            {
                var r = response.clone();

                caches.open('offline-cache')
                    .then(function(cache)
                    {
                        cache.put(event.request, r);
                    })
                    .catch(function(error)
                    {
                        console.log("Unable to cache item: ", error);
                    });

                return response;
            })
            // If network fails, try to pull the item from cache.
            .catch(function(error)
            {
                // Open the cache
                return caches.open('offline-cache')
                    // When cache is open, attempt to match with desired request
                    .then(function(cache)
                    {
                        // Try to match:
                        return cache.match(event.request)
                        // If successful, return the match.  Errors bubble up to the main event.
                            .then(function(response)
                            {
                                return response;
                            });
                    })
                    .catch(function(error)
                    {
                        console.log("Cached entry not found. Error.");
                    });
            })
    ); // END event.respondWith
});

Answer 1

如果要缓存的资源对于所有请求/用户都是相同的，并且可以通过删除某些 URL 参数(或完全删除查询字符串)来识别，您的代码可以生成一个缓存键 URL 并使用该字符串而不是 为 Fetch 和 Cache API 的方法请求对象:

// Returns URL string used for caching that excludes authentication-specific URL params, etc
function getCacheKeyUrl(request) {
  // Strip query string from URL
  return request.url.replace(/\?.*/,'');
}

self.addEventListener('fetch', event => {
  const cacheKeyUrl = getCacheKeyUrl(event.request);

  ...
});

然后可以使用fetch(cacheKeyUrl), cache.put(cacheKeyUrl, r), cache.match(cacheKeyUrl)等在您的代码中。