资讯专栏INFORMATION COLUMN

【译】给 Service Worker 开后门

高璐 / 1522人阅读

摘要:轻轻那么一点,华盛顿邮报的应用就出来了,还能够通过自定义元素安装。可是我去看浏览器地址栏的时候并不是华盛顿邮报。

本文转载自:众成翻译
译者:文蔺
链接:http://www.zcfy.cc/article/826
原文:https://medium.com/@adactio/backdoor-service-workers-86d241d79996#.bfuq4cdih

在渐进式 Web App 开发峰会(Progressive Web App dev Summit)上展示的时候,我花了差不多 20 分钟讲了这样一点:

Alex,你昨天演讲展示了华盛顿邮报(Washington Post)的 AMP (——译者注:Accelerated Mobile Pages Project) demo。轻轻那么一点,华盛顿邮报的 AMP 应用就出来了,还能够通过自定义元素安装 Service Worker。可是我去看浏览器地址栏的时候……并不是华盛顿邮报。只是 AMP 的 CDN 而已。所以我和 AMP 团队的 Paul Backaus 聊了聊,他解释说那是一个 iframe,使用 iframe 能安装其他地方的 Service Worker。

Alex 和 Emily 解释说,嗯,这就是 iframe 的工作方式。当你仔细想想,其实还是挺有意义的,毕竟一个 iframe 和任何其他的浏览器窗口没什么不一样的。尽管如此,这还是会让人觉得有点违反最小惊奇原则。

让我们假设,你遵循了我这并不当真的建议,去创建一个渐进式的 Web 应用商店,其首页可能有最新的十到二十个渐进式 Web App。你也可以同样地使用十到二十个 iframe,以便给浏览页面的用户“预安装”( pre-install )这些网站。

理论扯够了。现在来点实际操作……

假设你从未访问过我写的书的网站,html5forwebdesigners.com(如果你访问过,又还想跟着我把实验进行下去,那么你得打开浏览器设置然后删除这个域下面存的所有东西)。

也许你曾不经意间访问过我的个人网站adactio.com。主页下面有个小广告,上面写着“Read my book”,链接指向html5forwebdesigners.com。我在链接后面加了这样两行标记:

 

该隐藏的 iframe 会拉取带有一个 script 元素的空页面。





HTML5 For Web Designers


 

这样就注册了我的书籍网站的 Service Worker,然后就开始下载所有离线渲染整个网站所需的资源。

搞定了。从未访问过 html5forwebdesigners.com 这个域名,但网站已经在你的设备上预加载过了,一切仅仅因为你访问过 adactio.com。

一些注意事项:

我不得不降低 html5forwebdesigners.com 的内容安全策略(Content Security Policy),以允许能通过 iframe 将其嵌入 adactio.com:

Header always set Access-Control-Allow-Origin: “https://adactio.com"

若你的浏览器设置选择了“禁止第三方 cookie 及 网站数据”(“Block third-party cookies and site data”),通过 iframe 调用的 Service Worker 是不会被安装的:

Uncaught (in promise) DOMException: Failed to register a ServiceWorker: The user denied permission to use Service Worker.

我在本文中的示例相对来说是无害的。不过,可以难想象一些更加极端的情形。想象有一家出版商,有 50 种出版物,每本书有一个网站。每个网站都可能有一个空页面,等待着通过 iframe 被其他 49 个网站嵌入。你只需要访问其中一个页面,就会有 50 个Service Workers 在后台运转起来缓存资源。

这就有了“公地悲剧”的潜在可能。希望我们能清楚的知道,如何去使用这力量。

千万别让广告狗们知道哦!(直译:千万别给广告行业知道这。)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80002.html

相关文章

  • []集群调度架构的变革 (三)

    摘要:最近的分布式调度器运动应该是起始于,虽然底层的概念多样随机性选择第一次出现实在年。分布式调度器很难进行一个全局调度如公平策略或严格的优先级控制,因为没有中央控制。 全分布式架构 将分化做的更彻底,调度器间没有任何协调,并且使用许多独立的调度器来处理进入的负载,就像图 1d里面展示的。每个调度器只与他们的本地数据,通常是集群的过期数据工作。任务可以提交给任何调度器,每个调度器又会将任...

    yeooo 评论0 收藏0
  • []理解Service Workers

    摘要:而一个文件名表明将只捕获在下的请求。包含请求主体其被包含在对象中。该方法将首先缓存响应但随后在后台网络请求。被用来提供响应针对请求。一旦这个异步操作完成后操作将终止。 翻译:jsdt原文标题:Understanding Service Workers原文链接:http://blog.88mph.io/2017/07/...声明:转载请指明出处。 在网络早期,很难想象在用户离线的时候一个...

    luxixing 评论0 收藏0
  • []关于缓存的那些风流事儿

    摘要:于是,让继续前行通过,从而在网络栈这片神奇的土地里继续寻找她需要的资源。而一旦进入网络栈,最容易找到资源的地方就是缓存缓存有时候也被他的朋友成为磁盘缓存和之前遇到过的缓存不太一样。 原文链接 最近大家针对preload、HTTP/2 push和ServiceWorker的浏览器缓存实现展开了激烈的讨论,而这也引起了很多人的疑惑。 鉴于此,我想讲个故事来让大家了解一个请求如何完成他的使命...

    Eric 评论0 收藏0
  • []介绍一下渐进式 Web App(离线) - Part 1

    摘要:基本上是使用现代技术构建的网站但是体验上却像一个移动,在年,谷歌工程师和创造了。此后谷歌就一直致力于让能给用户像原生一般的体验。检查谷歌浏览器的和现在重载你的并且打开,到选项去查看面板,确保这个选项是勾选的。 Web开发多年来有了显著的发展。它允许开发人员部署网站或Web应用程序并在数分钟内为全球数百万人服务。只需一个浏览器,用户可以输入URL就可以访问Web应用程序了。随着 Prog...

    Wildcard 评论0 收藏0
  • []介绍一下渐进式 Web App(离线) - Part 1

    摘要:基本上是使用现代技术构建的网站但是体验上却像一个移动,在年,谷歌工程师和创造了。此后谷歌就一直致力于让能给用户像原生一般的体验。检查谷歌浏览器的和现在重载你的并且打开,到选项去查看面板,确保这个选项是勾选的。 Web开发多年来有了显著的发展。它允许开发人员部署网站或Web应用程序并在数分钟内为全球数百万人服务。只需一个浏览器,用户可以输入URL就可以访问Web应用程序了。随着 Prog...

    gaara 评论0 收藏0

发表评论

0条评论

高璐

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<