低成本打造一个带宽无限的网站(五)

简介: No.5

突破限制

由于 SW 非常强大,因此使用条件也是非常严格的,以免被恶意使用。

例如 SW 必须在 HTTPS 站点上使用。这本是件好事,彻底杜绝了中间人的隐患,但现在却成了一道门槛 —— 毕竟支持 HTTPS 并且域名可控的免费空间,那是极少的;同时这,还引发了另一个问题:由于 HTTPS 站点是禁止读取 HTTP 数据的,因此我们的节点也必须是 HTTPS 站点!

除此之外,SW 也得遵守同源策略。如果我们要读取第三方站点的数据,那么返回头里还得有这个字段:

Access-Control-Allow-Origin: *

这对于免费空间来说,也是个不小的要求。

免费空间,要同时满足上述两个条件,确实有些苛刻。好在 SW 能和页面交互,因此在代理网页资源时,可以往其中插入一个辅助脚本(上一篇曾讲解如何实现),这样就能把任务交给页面来实现。毕竟页面里有丰富的 DOM 功能,可玩出各种奇技淫巧。

页面代理

对于 不支持 ACAO、但支持 HTTPS 的站点,可通过页面代理实现 CORS。

我们通过 iframe 引入目标站点下的一个代理页面,由它来读取数据,然后将结果 postMessage 给父页面:

iframe.svg

若是追求更高性能的话,还可借助 MessageChannel,让 iframe 和 SW 直接通信,以减少一次消息中转:

iframe_ch.svg

只要目标站点能部署 html 资源,就可以用这个方案,读取站点下任意类型的资源!


需注意的是,该方案依赖页面。假如用户关闭了所有页面,然后通过地址栏访问资源 —— 这时 SW 虽能拦截请求,但由于没有可交互的页面,因此无法使用该方案。

不过,有个简单的办法可以解决这个问题:我们让 SW 先返回一个临时的过渡页面,用它来配合内容加载;完成后页面自动刷新,这时 SW 就能给出真正的内容了!

JSONP

对于 不支持 ACAO、但支持 HTTPS 的站点,还有种不依赖页面的办法 —— 我们将资源打包在脚本文件里,通过 JSONP 的方式直接在 SW 中加载。

jsonp.svg

当然这种方案缺陷十分明显:脚本是文本格式的,编码二进制资源会增加不少体积。

此外,Worker 中加载脚本的函数 importScripts 是同步阻塞的,因此会对程序带来很大影响。除非使用 Sub Worker(在 Worker 中嵌套 Worker),但目前很多浏览器包括 Chrome 都不支持,所以暂不考虑。

混合内容

对于 支持 ACAO、但不支持 HTTPS 的站点,这时就需要利用 混合内容Mixed Content)机制了。

虽然浏览器原则上不允许 HTTPS 页面引用 HTTP 资源,但对于风险较低的资源,例如图片、多媒体,仍然是允许的!

因此,我们可将原始数据作为像素,打包在图片里。页面通过设有 crossOrigin 属性的 Image 加载图片,然后绘制到 canvas 上,这样就能读取像素,从而得到原始数据了!

mixed.svg

演示:https://www.etherdream.com/FunnyScript/jszip/decode.html

关于数据编码成图片的细节,可参考《利用 canvas 实现数据压缩》。不过和文中不同的是,如今我们通过本地工具编码图片,因此最终结果还可以用 PNGoutzopflipng 等工具进行强力优化。

当然,数据打包成图片后,体积不可避免会有所增加。但反正带宽是免费的,有总比没有好:)


不过,踩混合内容的黄线,也是有一定代价的。例如 Chrome 浏览器,界面上的证书图标不再是绿色了,并且控制台里也会出现告警:

mixed-warn.png

对于这个问题,倒是有个简单的缓解策略:假如当前开着多个页面(Tab)的话,我们可以让 SW 选一个不可见的,由它来加载资源 —— 这样即使界面有变化,用户也不会立即看见了:)

Flash 代理

对于 既不支持 ACAO 又不支持 HTTPS 的破站点,只能用同样破旧的东西来配它 —— Flash。

尽管浏览器并不允许 HTTPS 页面加载 HTTP Flash,但我们可以 先加载一个 HTTPS Flash 作为跳板,然后通过它来加载 HTTP 的资源

因为插件内部是不受浏览器管控的,所以就能利用 Flash 宽松的限制,绕过混合内容策略!

flash.svg

只要目标站点能部署 xml 资源(用于存放 cross domain xml),我们就能读取该站点下任意类型的资源!


退一步,即使目标站点无法部署 xml 也没关系,能部署 swf 文件也可以。我们用这个 swf 作为目标站点的代理,这样就解决「网络通信」的同源策略了。

同时,再通过 AS 脚本开放自身权限:

Security.allowDomain('*');

这样,就能解决「模块交互」的同源策略了。

flash-agent.svg

这里用了两个 swf 做代理 —— 前者规避混合内容,后者规避同源策略,是不是很巧妙:)

有了这个办法,那些能上传 swf 的论坛,我们就能读取和它同站点的图片附件了!

不过比较尴尬的是,如今主流浏览器都已禁用 Flash,当初写的这些「奇技淫巧」也没什么卵用了。。。

总结

HTTPS ACAO 获取方式 信息载荷类型 依赖页面 主要缺陷
fetch() * × -
× 页面代理 * (html) 额外嵌入一个页面
× JSONP js × Worker 中会阻塞
× 图片像素 image 混合内容界面警告
× × Flash 代理 * (xml 或 swf) 很多浏览器已禁用

这里我们只是从 HTTPS 和 ACAO 两个条件进行探讨。现实中,当然还有更复杂的情况。

例如,一些图床同时支持 HTTPS 和 ACAO,但只能上传图片格式。对于这种情况,其实不依赖页面也是可以加载的 —— 我们可以直接在 SW 中 fetch 图片,然后用 JS 版的图像解码库,还原出像素里的数据。

更进一步,我们还可以检测图床是否会修改上传的原始文件。如果不修改的话,我们可以把数据藏在图片辅助信息里,甚至直接附加在文件末尾,这样直接截取即可,连解码都不需要了!

例如之前提到的案例:https://fanhtml5.github.io

总之,只要发挥想象,很多网站都可以利用起来,在我们宽带紧张的情况下,充当免费的后备节点:)

目录
相关文章
|
4月前
|
安全 定位技术 数据中心
什么是海外服务器,优势有哪些,延迟大概在多少
至于延迟,这主要取决于用户的地理位置和服务器的地理位置。一般来说,用户和服务器之间的距离越远,网络延迟就越大。对于跨洲访问,延迟可能会在几十到几百毫秒之间。但这也受到许多因素的影响,如网络路由、带宽等。
75 0
|
6月前
|
消息中间件 存储 容灾
AutoMQ 云上十倍成本节约的奥秘: SPOT 实例
AutoMQ Kafka 优化设计,充分利用云基础设施,尤其是成本低廉的Spot实例,实现公有云成本节约。尽管Spot实例的不确定性可能导致服务中断,AutoMQ通过Broker无状态化、快速弹性扩展和Serverless支持,以及应对Spot实例回收的优雅停机和容灾机制,确保了可靠的Kafka服务。混合使用按需实例以保证关键服务稳定,同时在面临Spot实例库存不足时,具备回退到按需实例的能力。AutoMQ Kafka通过创新技术在稳定性与成本之间找到了平衡,为用户提供灵活且经济高效的解决方案。
115 0
AutoMQ 云上十倍成本节约的奥秘: SPOT 实例
|
6月前
|
网络架构
【专栏】网络技术:网速和带宽的区别,带宽是网络的最大传输能力,而网速是实际传输速率,受网络拥堵、硬件性能等因素影响
【4月更文挑战第28天】本文探讨了网速和带宽的区别,带宽是网络的最大传输能力,而网速是实际传输速率,受网络拥堵、硬件性能等因素影响。两者关系可比喻为道路车道数与车辆速度。了解这些有助于优化网络体验,如选择合适带宽、升级硬件、使用有线连接、管理带宽占用和连接时机。理解二者差异能帮助我们更好地评估网络服务并提升上网效率。
189 1
|
弹性计算 运维 监控
阿里云万郁香:多样付费选择构筑成本最优的弹性体验
云上成本优化三部曲:云上资源归属拆解、确定资源需求及购买优先级、选择最佳的付费方式。
阿里云万郁香:多样付费选择构筑成本最优的弹性体验
|
负载均衡 算法 Serverless
函数计算助力石墨文档突破性能瓶颈,有效节省58%服务器成本
石墨文档 是中国第一款支持云端协作的企业办公服务软件(功能类比于Google docs、Quip等),可以实现多成员多终端的在线实时协作,同步响应速度达到毫秒级,是团队协作的最佳选择。 石墨文档还是一款具有中国式美感的科技产品,2015 年获得极客公园最佳互联网创新产品 50 强。
4924 5
|
存储 开发者
UPYUN 又拍云进行大幅度降价:数据量持续高速增长致成本降低
今天我们刚刚得到了SegmentFault 与开发者的好伙伴又拍云的官方消息,UPYUN(又拍云)进行了大幅度的价格调整。本次价格调整主要表现在存储空间和流量价格的全面下调,存储空间最高降价67%,流量最高降价40%。据了解,UPYUN本次进行价格调整的根本原因是过去一年UPYUN平台数据量持续高速增长令整体成本降低所致。
173 0
|
存储 边缘计算 缓存
如何降低 PB 级带宽成本?揭秘优酷“云边端”分发网络
2019 年,整个互联网的绝大部分流量来自于视频服务,优酷,每日承载了上亿用户的几十 亿的视频观看,每日消耗的互联网流量高达 Pb 级别。在如此高并发高流量的项目中,如何在保 障用户体验的前提条件下,有效的提升服务器以及带宽的利用效率,实现消峰填谷,降低服务 器和带宽成本,成为我们技术人的工作重心。
如何降低 PB 级带宽成本?揭秘优酷“云边端”分发网络
|
物联网
挑战设备接入量,节省最高92%资费
2020年3月31日前,设备接入达到指定量级,即可获得1.5-0.8折折扣,物联网卡和物联网平台设备接入服务劲省92%资费。
26731 0
挑战设备接入量,节省最高92%资费
|
弹性计算 负载均衡 固态存储
业务系统的带宽能力
业务系统的整体带宽能力,取决于公网带宽、网卡速率以及磁盘吞吐量,本文量化分析阿里云上部署,可能存在的瓶颈,以及提供参考建议
1176 0
业务系统的带宽能力