首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML5离线缓存技术

原理和环境 如上面提到的HTML5的离线存储是基于一个新建的.appcache文件的,通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。...之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。 就像cookie一样,html5的离线存储也需要服务器环境。...链接: http://pan.baidu.com/s/1jG86UV0 密码: ja9h 解析清单 在开始之前要先了解下manifest(即.appcache文件),上面的解析清单要怎么写。...更新缓存 一旦应用被缓存,它就会保持缓存直到发生下列情况: 用户清空浏览器缓存 manifest 文件被修改 由程序来更新应用缓存 Demo case/ |-- index.html | |...注意事项 站点离线存储的容量限制是5M 如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用老的缓存 引用manifest的html必须与manifest

3.7K70

HTML5离线缓存攻击测试

正常访问页面如下图所示,在离线时也能够正常刷新出来。 ? 攻击者由安装有XAMPP服务器的桥接虚拟机表示,IP为192.168.1.154。...攻击者可以访问本目录的demo_html.appcache获得缓存文件,在同名文件加入自己的恶意代码(这里是弹出hacked对话框),利用DNS欺骗、中间人等方式,这里将HOSTS文件更改为192.168.1.154...通过两次更新manifest文件,让用户缓存恶意页面并使其manifest文件与合法网站保持一致,如图所示。 ?...通过Wireshark抓包可以看到,浏览器仅仅请求了demo_html.appcache,离线缓存攻击成功。注意在实验时需要排除浏览器本身缓存的影响,仅仅刷新页面会收到服务器返回的304响应。...由于时间有限,并没有用爬虫去找使用了HTML5离线缓存的网站,仅仅做了这种攻击的验证实验,若有大家可以推荐几个来测试。 主页htm: <!

1.7K90
您找到你想要的搜索结果了吗?
是的
没有找到

html5离线缓存manifest详解

HTML5引入了应用程序缓存(Application Cache),通过创建manifest文件可以轻松地创建Web应用的离线版本,使Web应用可以在没有网络的时候任然可以访问。...Manifest的优点离线浏览 – 用户可在应用离线时使用它们提升速度 – 已缓存资源加载得更快减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。...通过离线存储,我们可以通过把需要离线存储在本地的文件列在一个manifest配置文件中,这样即使在离线的情况下,用户也可以正常使用App。怎么用首先来讲解下离线存储的使用方法,说起来也很简单。...浏览器怎么解析manifest那么浏览器是怎么离线的资源进行管理和加载的呢?这里需要分两种情况来讨论。.../en-US/docs/Web/HTML/Using_the_application_cachehttp://diveintohtml5.info/offline.html转载本站文章《html5离线缓存

1.8K30

HTML5离线缓存攻击测试(二)

经过昨天的测试,发现使用离线缓存的网站会被攻击。但是,不使用离线缓存的网站就真的不会受到这样的攻击么?...(很郁闷相同的操作为啥有时候结果不一样,不过大部分还是造成了离线缓存攻击的效果。)...再次请求时抓包如下图,发现请求appcache文件后,尽管百度返回了302的错误页,但是浏览器没有跳转,仍然保持了离线缓存的页面,实现了缓存中毒的效果。...不知道使用https进行离线缓存攻击会不会成功。 ? 除了百度和支付宝,还用网易的126.com做了实验。...个人认为,对于类似百度网站这样的服务器设置,会导致缓存攻击成功,感觉是浏览器实现时的一个bug。如果支付宝https能被离线缓存攻击,那么危害性还是很大的。

2K60

http缓存离线缓存

If-Unmodified-Since:不会响应412的情况 last-Modified值匹配成功 服务器需要响应2XX或412之外的状态码 请求发送过来的时间格式不对 二、浏览器离线缓存 实现离线缓存的步骤...: 创建一个缓存文件,如:main.appcache,建议文件以.appcache结尾 在web服务器上添加mine-type标识头,如:text/cache-manifest html文件引入此内容,...如下代码: ... main.appcache值说明 CACHE MANIFEST # 首次下载后需要缓存的文件 # 禁止缓存的文件 network: # 回退文件(页面无法访问时回退的页面) fallback...,浏览器直接清理缓存是无效的 6.3 修改main.appcache文件任何内容,都会导致离线缓存重新加载,包含注释信 6.4 引入main.appcache文件的html文件,会直接被离线缓存 6.5

1.5K70

iOS离线缓存

,首先从沙盒加载缓存的数据,或者当app未联网的时候,从沙盒中加载之前缓存的旧数据。...离线数据的方法选择 plist文件 Document路径 数据库 由于保存的是大批量数据,且会不停的刷新新数据,因此应该选择数据库来存储。使用数据库可以快速地进行数据的读取操作。...1.设计思路 如下图,说明了离线缓存的流程: ?...离线缓存 当第一次打开app的时候,把从服务器获取到的数据保存到沙盒中; 当下一次进入app的时候,首先从沙盒中找,如果沙盒中保存了之前的数据,则显示沙盒中的数据; 如果没有网络,直接加载保存到沙盒中的数据...示例 下面使用一个示例程序来介绍离线缓存。示例程序用到的框架有FMDB,SDWebImage,AFNetworking,数据是由聚合数据提供的开放API。

1.6K20

android离线缓存技术

离线缓存是指在有网络的状态下将从服务器获取的网络数据,如Json 数据缓存到本地,在断网的状态下启动APP时读取本地缓存数据显示在界面上,常用的APP(网易新闻、知乎等等)都是支持离线缓存的,这样带来了更好的用户体验...如果能够在调用网络接口后自动缓存返回的Json数据,下次在断网状态下调用这个接口获取到缓存的Json数据的话,那该多好呢?Volley做到了这一点。...,Volley只缓存了接口路径,并没有缓存接口的传入参数,因此如果做分页查询的话,使用此方法是不妥的。 ...2.在测试过程中,依然发现有的时候获取不到缓存数据,有的时候却可以获取到。对获取缓存的代码延迟加载能够有效解决这个问题。 ...3.如果考虑到缓存的过期策略,可以使用更好的ASimpleCache框架辅助开发。对缓存有更高要求的APP,依然应该使用文件缓存或数据库缓存。 源代码下载

2K90

iOS---数据离线缓存

离线缓存 为了用户的体验,不需要每次打开App都加载新数据,或者重新请求数据,因此需要把每次浏览的数据保存起来,当下次打开软件时,首先从沙盒中加载数据;或者当软件未联网时,也只能从沙盒中加载旧数据。...离线数据的方法选择 1.plist文件 2.Document路径 3.数据库 由于保存的是大批量数据,且会不停的刷新新数据,因此应该选择数据库来存储。...离线缓存的思路 当第一次打开应用程序时,把界面加载好的数据保存到沙盒中 当下一次进入应用程序时,首先从沙盒中找 如果没有网络,直接加载上次保存的数据,或者没有比较新的数据也从沙盒中加载数据。...需要缓存的数据如何保存 sqlite3 框架FMDB 操作数据库的工具类 static FMDatabase *_db; + (void)initialize { // 1.打开数据库...INSERT INTO t_status(status, idstr) VALUES (%@, %@);", statusData, status[@"idstr"]]; } } 从数据库中取出缓存数据

1.1K120

PWA之离线缓存(一)

离线缓存 :通过Service Worker使得 Web App 也可以做到像 Native App 那样可以离线使用、消息推送的功能。...> 如图html文件中,可以在文件末尾插入如上代码来注册service worker。...如果都缓存成功,那么OK,service worker安装成功。 这里缓存资源时, 定义了一个缓存名字static-v1 , 打开这个缓存,将图片文件添加进去。...离线资源更新 1、如果业务的静态资源更新了, 需要修改sw.js文件,一个B的修改都会引起浏览器的重新下载sw文件, 然后触发install , 装载新的离线资源。...我们做资源缓存, 发布文件后不能要求用户一定刷新页面, 如果停留在一个页面较长时间, 但仍然想使用新的缓存资源,该怎么做呢?

1.7K21

关于离线缓存Application Cache 使用 manifest文件缓存

这样,HTML文档加载后,就会根据manifest.appcache的内容来缓存资源文件,在下次访问相同页面的时候,会直接使用缓存的资源文件来进行加速 缓存和加载机制 在第一次访问时,浏览器加载完...如果所有资源文件都被成功下载,浏览器将会把这些资源文件以及引用manifest文件的HTML文档移动到永久离线缓存中 满满的都是坑 一些小坑 需要注意的是manifest文件放在服务器上,MIME类型必须是...manifest文件的HTML文档一并被移动到永久离线缓存中。...),浏览器将直接从本地离线缓存中获取资源文件。...,但依旧会从网络上加载,而iframe的解答方法也是2011~2012年左右提出的,后来就没有相关文章了,估计已经彻底失效了 Application主要是为了构建离线缓存,使得页面在离线模式下也能浏览。

2.4K20

HTML5离线存储原理

前言 使用HTML5,通过创建cache manifest文件,可轻松创建web应用的离线版本;HTML5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有网络时进行访问。...应用程序缓存为应用带来三个优势 离线浏览—用户可在离线时使用 速度—已经缓存的资源加载的更快 减少服务器负载—浏览器将只从服务器下载更改过的资源 原理和环境 如上面提到的HTML5的离线存储是基于一个新建的...之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。 就像cookie一样,html5的离线存储也需要服务器环境。...解析清单 在开始之前要先了解下 manifest(即.appcache文件),上面的解析清单要怎么写。 manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。...这种状态下.所有不在相关Cache区域出现的url都默认使用HTTP相关缓存头策略 下面的 NETWORK 小节规定文件 “login.asp” 永远不会被缓存,且离线时是不可用的: NETWORK

2.8K50

H5的离线缓存技术

离线存储可以将站点的一些文件存储在本地,它是浏览器自己的一种机制,将需要的文件缓存下来在没有网络的时候可以访问到缓存的对应的站点页面,包括html,js,css,img等等文件在有网络的时候,浏览器也会优先使用已离线存储的文件...HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源;把需要离线存储在本地的文件列在一个manifest配置文件中。...Manifest 的特点 离线浏览:即当网络断开时,可以继续访问你的页面。 访问速度快:将文件缓存到本地,不需每次都从网络上请求。...创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个cache.manifest的文件,然后给index.htmlhtml标签添加如下属性即可: <html lang...html5中引入了js操作离线缓存的方法,可以通过js代码手动更新本地缓存

42120

使用ZBlog搭建网站 怎么选择HTML静态缓存插件

ZBlog应用中心有十几款生成HTML静态文件(以下简称“纯静态插件”)和静态缓存的插件,生成静态文件后,减少数据库的查询次数,提高ZBlog的访问速度和性能,给服务器或者虚拟主机减轻负担。...纯静态插件和静态缓存插件的区别 纯静态插件   网页通过链接在网站的对应目录生成HTML静态文件。   ...例如:http://域名/zblog.html,在网站主目录生成zblog.html的网页文件。   ...静态缓存插件   所有网页都在指定目录(例如插件的所在目录)生成HTML静态文件,而不会像纯静态插件在网站主目录生成HTML静态网页文件和创建不同的子目录。 什么网站可以使用静态插件?...如果网站首页也需要静态,网站的默认文件优先级,html放在第一个。 这个价位的纯静态插件只有这一款,暂时就推荐这一款,价格超过65元建议选择静态缓存插件,功能更多。

1.6K20

HTML5离线存储——manifest简介

本文作者:IMWeb json 原文出处:IMWeb社区 未经同意,禁止转载 离线存储的作用 1、用户可离线访问应用,这对于无法随时保持联网状态的移动终端用户来说尤其重要 2、用户访问本地的缓存文件...从图中可以看出主流浏览器均支持应用程序缓存, 除了IE 如何用 如需启用应用程序缓存,在文档的 标签中包含 manifest 属性: <!...:不缓存的文件,无论缓存中存在与否,均从新获取 NETWORK: uncached.js uncached.css # 注释:获取不到资源时的备选路径,如index.html访问失败,则返回404页面...FALLBACK: index.html 404.html 1、 CACHE MANIFEST 写在manifest文件开头 2、#号开头的是注释,一般会在第二行写个版本号,用来在缓存的文件更新时,更改...更新缓存 ? 在线的情况下,浏览器发现html头部有manifest属性,会请求manifest文件,如果是第一次访问应用,浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。

1.9K20

HTML5离线存储——manifest简介

离线存储的作用 1、用户可离线访问应用,这对于无法随时保持联网状态的移动终端用户来说尤其重要 2、用户访问本地的缓存文件,通常意味着更快的访问速度 3、仅仅加载被修改过的资源,避免同一资源对服务器多次的请求...从图中可以看出主流浏览器均支持应用程序缓存, 除了IE 如何用 如需启用应用程序缓存,在文档的 标签中包含 manifest 属性: <!...:不缓存的文件,无论缓存中存在与否,均从新获取 NETWORK: uncached.js uncached.css # 注释:获取不到资源时的备选路径,如index.html访问失败,则返回404页面...FALLBACK: index.html 404.html 1、 CACHE MANIFEST 写在manifest文件开头 2、#号开头的是注释,一般会在第二行写个版本号,用来在缓存的文件更新时,更改...更新缓存 ? 在线的情况下,浏览器发现html头部有manifest属性,会请求manifest文件,如果是第一次访问应用,浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。

3.6K50

缓存HTML5缓存的那些事

解决请求头常带存储信息的问题; 解决关系型存储的问题; 跨浏览器平台问题; ##HTML5存储形式 本地存储——localstorage \sessionstorage 离线缓存——application...> 离线缓存——application Cache 何为离线缓存 它是能让web应用在离线的情况下继续使用,通过一个叫manifest的文件指明需要缓存的资源;你可以通过navigator.online...,无法单独更新某个文件; 对于链接的参数变化的敏感的,任何一个参数的修改都会被重新缓存,例如:index.html和index.html?...v=1会被认为是不同文件,分别缓存; app cache适用场景 单地址页面 对实时性要求不要的业务 离线web应用 总结 在实际应用中,我们需要根据业务的需要来采取相应的缓存措施,如上所述,html5...关于HTML5缓存我们就介绍到这里。 参考 HTML5之IndexedDB使用详解

33550
领券