Service_Worker XSS
0x00 简介
Service Worker 是 Chrome 团队提出和力推的一个 WEB API,用于给 web 应用提供高级的可持续的后台处理能力。该 WEB API 标准起草于 2013 年,于 2014 年纳入 W3C WEB 标准草案,当前还在草案阶段。
Service Worker 最主要的特点是:在页面中注册并安装成功后,运行于浏览器后台,不受页面刷新的影响,可以监听和截拦作用域范围内所有页面的 HTTP 请求。
基于 Service Worker API 的特性,结合 Fetch API、Cache API、Push API、postMessage API 和 Notification API,可以在基于浏览器的 web 应用中实现如离线缓存、消息推送、静默更新等 native 应用常见的功能,以给 web 应用提供更好更丰富的使用体验。
注:下面例子主要是在chrome浏览器上测试
0x01 特点
- 网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用
localhost
) - 运行于浏览器后台,可以控制打开的作用域范围下所有的页面请求
- 单独的作用域范围,单独的运行环境和执行线程
- 不能操作页面 DOM。但可以通过事件机制来处理
0x02 生命周期
install -> installed -> actvating -> Active -> Activated -> Redundant
特别说明,进入 Redundant (废弃)状态的原因可能为这几种:
- 安装(install)失败
- 激活(activating)失败
- 新版本的 Service Worker 替换了它并成为激活状态
0x03 使用
0x03.1注册
下面是Service Worker的注册,注册了“/sw/tesw.js”
<html> <head> <script> const SERVICE_WORKER_API = 'serviceWorker'; const SERVICE_WORKER_FILE_PATH = '/sw/tesw.js'; const isSupportServiceWorker = () => SERVICE_WORKER_API in navigator; if (isSupportServiceWorker()) { navigator .serviceWorker .register(SERVICE_WORKER_FILE_PATH) .then(() => console.log('Load service worker Success.')); } else { console.info('Browser not support Service Worker.'); } </script> </head> </html>
主要的就是这一句:navigator.serviceWorker.register(SERVICE_WORKER_FILE_PATH)
注册成功后,我们可以查看注册的,如图:
上图tesw.js就是注册的Service Worker
注意:
navigator.serviceWorker.register(SERVICE_WORKER_FILE_PATH,{scope:"/"})
Service Worker 的注册路径决定了其 scope
默认作用范围。示例中 tesw.js
是在 /sw/
路径下,这使得该 Service Worker 默认只会收到 /sw/
路径下的 fetch 事件。如果存放在网站的根路径下,则将会收到该网站的所有 fetch 事件。
如果希望改变它的作用域,可在第二个参数设置 scope 范围。示例中将其改为了根目录,即对整个站点生效。
另外应意识到这一点:Service Worker 没有页面作用域的概念,作用域范围内的所有页面请求都会被当前激活的 Service Worker 所监控。
0x3.2 安装
前面注册了Service Worker,具体的逻辑在tesw.js里面,代码如下
//监控install事件 self.addEventListener('install', function(event){ console.log("install") }) //监控activate事件 self.addEventListener('activate', function(event){ console.log("activate") }) //监控fetch事件 self.addEventListener('fetch', function(event){ event.respondWith(new Response('<script>alert(document.domain)</script>', {headers: {'Content-Type': "text/html"}})) })
我们这里添加了监控install、activate、fetch事件,可以看到Service Worker的部分生命周期。
install事件:当前脚本被安装时,会触发 install
事件;
fetch事件:当浏览器发起请求时,会触发 fetch
事件;相当于代理器的作用,详细操作可学习 Fetch API
0x04 安全问题
从上面的例子可以看到,注册的service worker造成了一个xss,如果注册了个恶意的service worker,那后果是相当的。
参考资料:
网站渐进式增强体验(PWA)改造:Service Worker应用详解
参考资料中还有很多知识点可以学习,我主要是学习xss这个,当然还有很多利用方式啦,一起学习。