使用CSRF令牌缓存请求时,如何减少服务工作者缓存的大小

瑞安·格里格斯(Ryan Griggs)

我有一个服务人员正在缓存来自浏览器的请求,因此该页面可以脱机工作。但是,每次用户注销并重新登录时,都会生成一个新的CSRF令牌,并且由于请求将CSRF令牌作为查询字符串的一部分,因此所有以前缓存的数据均无用。这就需要再次重新缓存所有相同的数据,因此我们在缓存中留有多个数据副本,由于CSRF令牌不同,每个副本都具有不同的请求URL。

我先查询网络,然后在网络不可用时进行故障转移以缓存。

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

另外,如何在不清除缓存中所有条目的情况下删除所有与当前CSRF令牌不匹配的缓存请求?

这是相关的服务人员代码:

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
});
克里斯

如果要缓存的资源对于所有请求/用户都是相同的,并且可以通过删除某些URL参数(或完全删除查询字符串)来标识,则您的代码可以生成缓存键URL,并使用该String代替Request对象来进行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)等在你的代码。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何卸载服务工作者?

Javascript服务工作者:从缓存中获取资源,但也进行更新

如何列出服务工作者已经存储在浏览器缓存中的博客帖子?

是否可以修改服务工作者缓存响应标头?

服务工作者和客户端请求“缓存控制”:“无缓存”

使Web应用程序脱机-应用程序缓存或服务工作者哪个更好?

WebView:以编程方式清除服务工作者缓存

服务工作者不会从缓存中返回文件

具有SSL证书缓存的服务工作者

PWA服务工作者缓存/更新预期行为

将服务工作者保存在缓存中有意义吗?

根据年龄删除服务工作者缓存中的条目

注销时如何清除服务工作者缓存?

延迟加载或预加载Angular模块并使用服务工作者来缓存结果?

如何根据服务工作者中的某些标志缓存响应

在服务工作者中服务之前,可以编辑缓存的index.html吗?

通常,服务工作者应预缓存哪些文件?

如何防止服务工作者删除缓存,PWA

如何由服务工作者更新缓存的资源

服务工作者查询缓存算法是否允许表达式匹配URL路径?

检查服务工作者缓存中是否存在URL

服务工作者缓存文件但不离线加载

使用工作箱和服务器端呈现的 SPA 缓存服务工作者

如何使用服务工作者预缓存名称在每次部署时都会更改的资产?

服务工作者从磁盘缓存中缓存资源

服务工作者在反应中缓存的路由

服务工作者缓存与 VuexPersistence

角度缓存 - 我们应该使用服务工作者吗?

服务工作者缓存破坏谷歌地图 api