美国成人网站使用WebSocket绕过广告屏蔽插件

Posted 2021-04-25 前端之巅

引言

网络上的广告现在真的是无所不用其极。我们在上网过程中，稍不留神，随时随地都可能会碰上广告，于是，我们对广告屏蔽的需求，就应运而生。然而，古语云，道高一尺魔高一丈，有人设置广告屏蔽，就有人想办法绕过广告屏蔽。今天向大家介绍的这篇文章就分析了BugReplay是如何发现美国成人网站Pornhub使用WebSocket来绕过广告屏蔽插件的。

文章概述

该文的本意并非是如何绕开广告屏蔽机制，而是用户了解情况后，在如何反制广告商上缩短探索的时间。

该文重现了BugReplay的工程师发现美国成人网站是如何使用WebSocket绕过广告屏蔽插件的过程，视频演示可在此处（https://app.bugreplay.com/shared/report/938a04d2-546c-42e9-87d2-ec4f0f7a792f#/view）观看。 当构建BugReplay的原型时，BugReplay的工程师评估了Chrome捕捉和分析网络流量的不同方法。第一个就是看起来很有前途的chrome.webRequest API。

它的文档有如下的说明：

“使用chrome.webRequest API来观察和分析流量，并拦截、阻止或修改请求。”

这似乎正是BugReplay需要的。

在使用Chrome webRequest API进行实验后，该工程师很快意识到有一个大问题。它不允许用户分析任何WebSocket流量，而这个功能是用户真正需要的东西。

BugReplay发现2012年有一个相关的Bug报告：

“chrome.webRequest.onBeforeRequest不拦截WebSocket请求。”

在这份Bug报告中，用户抱怨未能阻止WebSockets，以致网站可以轻易的绕过广告屏蔽插件。如果WebSocket数据通过webRequest API对Chrome扩展不可见，没有一些重型攻击他们不能被屏蔽。

最初，理论上屏蔽广告似乎是有风险的。采用这种技术的网站的案例非常模糊。在2016年8月，一位来自拥有Pornhub.com（MindGeek）的公司的员工，开始反对Chrome API添加WebSocket屏蔽功能。依照Alexa的数据，Pornhub是互联网上第63个访问量最大的网站。BugReplay检查了几个MindGeek的网站，果不其然，他们发现，即使已经安装Adblock Plus插件，也能看到这些来自MindGeek所属的广告网络中的Pornhub广告，被标识位“垃圾广告”。

在下面的截图中，你可以在网页顶部看到一个横幅，表明该网站已发觉用户使用了广告屏蔽插件，并邀请用户订阅收费广告免费版的网站。在网页的右侧你能看到广告。

他们是如何做到的？

当用户访问Pornhub.com时，它会尝试检测您是否有广告屏蔽插件，如果检测到一个，它就打开一个WebSocket连接，作为传递广告的备份机制。

查看BugReplay浏览器记录，你可以看到多个网络触发请求，被AdBlock阻止了：它们在网络流量中被标记为“失败”，如果你单击详细信息中的一条，你能看到失败原因是：net::ERR_BLOCKED_BY_CLIENT. 这是Chrome阻止资源加载时报告的错误。

你可以在网络面板中单独找到WebSocket框架，或者只查看WebSocket创建请求。WebSocket连接的域名是：“ws://ws.adspayformy.site.” ，这不过是针对广告屏蔽插件的玩笑而已。

当WebSocket加载时，浏览器为每个可用于广告的点发送一个带有JSON编码有效载荷的帧。检出一个WebSocket框架，你可以在框架数据中看到广告数据被返回：

1. 在zone_13，javascript应放置广告。 

2. 在media_type的图像，让页面知晓用哪种元素来创建（大多数是视频广告，在这篇文章我选择了一张图像，因为这样相对温和）。 

3. 图像本身是base64编码的，因此可以使用data uri scheme来重建。 

4. 一个“img_type”（“image/jpeg”）通过data uri。

广告屏蔽插件主要是用webRequest API进行工作的，因此通过在WebSocket上利用base64编码来传输数据构建广告，是一个绕开广告屏蔽的相当聪明的方式。

下一步是什么？

2016年10月25日，在Chromium Tracker上，一名贡献者写了一个补丁，增加了使用webRequest API来阻止WebSockets的能力。如果这个补丁被接受，将会集成到Chrome stable版。

广告屏蔽插件作者可以选择在何时或何时推出最新版本的Chrome浏览器，以便让内容提供商（如Pornhub）了解他们在广告屏蔽战争中的下一步行动。

更新

自从BugReplay开始研究这个技术时，AdBlock Plus和uBlock Origin已经发布解决方法来阻止这种技术，而AdBlock和其他人还没有。

对于AdBlock Plus而言，包装器在发送/接收WebSocket消息之前执行虚拟Web请求。扩展将这些虚拟Web请求识别为表示WebSocket消息。如果应该阻止相应的WebSocket消息，它就拦截并阻止它们。然后WebSocket包装器基于虚拟web请求是否被阻止来决定允许/阻止WebSocket消息。

对于uBlock Origin来说，他们发布了一个解决方法，具有“使用CSP指令来屏蔽WebSocket的能力”。

前端之巅

查看本文链接版请移步：http://www.infoq.com/cn/news/2016/11/Pornhub-WebSocket?utm_source=infoq&utm_medium=popular_widget&utm_campaign=popular_content_list&utm_content=homepage

视野拓展

移动平台如何与AR/VR、视频、硬件创新等新技术相结合？Hybrid是否是移动技术的最佳形式？创业公司如何选择适合自己的移动架构？相约ArchSummit北京2016，与来自腾讯、阿里等移动技术专家们一起深入移动架构的选择与思考。ArchSummit 9折倒计时，点击“阅读原文”了解详情。

今日荐文

推荐语

王向维，京东商城三级列表页架构师。工作期间，完成了京东三级列表页由Node.js版本到nginx+Lua版本的变迁，并针对三级列表页前端即服务器端做了大量的优化工作。本文从优化原则、主要优化工作、细节优化工作、功能模块的实现等，详细讲解了三级列表页的优化工作。

精彩看点

此次的优化工作遵循以下四个原则：

• 首屏优先：精简和瘦身页面，首屏优先展示出来；

• 惰性交互：需用户交互的部分惰性加载；

• 惰性执行：能不执行的先别执行，惰性执行；

• 惰性滚屏：滚屏惰性加载。

长按二维码关注

        前  端  之  巅

        紧 跟 前 端 发 展
        共 享 一 线 技 术

        万 名 淀 粉 互 助

        共 登 前 端 之 巅