Hum
2017年09月27日
iOS 上内容拦截器双雄 | Best Of
| 本文为付费栏目文章，您已订阅，可阅读全文 |
在 2015 年苹果推出 iOS 9 时带来了一项小小的新技术，这项新技术在 WWDC 之后的技术演讲上只用了 20 多分钟就说完了。
几个月后 iOS 9 正式发布，Marco Arment 随即推出了一款利用这个新技术的工具 Peace 登上了美区付费总榜榜首，成为那个时期 iOS 圈儿最大的热点之一（彼时排名第二的 Crystal、第五的 Purify 同样是同样作用的工具）：
图片来自 The Verge
时至今日，此类工具在日区势头依然劲猛，是付费榜前十的常客。这类工具，就是内容拦截类工具（Content Blocker）。
然而在日区付费榜里混迹的并不是这类工具中的佼佼者。因为这个技术并不复杂，所以浑水摸鱼的作品不计其数，也因为多是浑水摸鱼，长期坚持更新与开发的工具也就能逐渐在落潮时凸显出来。
Safari 的内容拦截技术
内容拦截类工具在智能设备上存在已久，对于用户来说，最显而易见的是它能使阅读体验提升。特别是在移动设备的小屏幕上，它能够最大程度上让小屏幕显示出更多对于用户来说有意义的信息。
去掉 The Verge 网页中的分享条
除此之外，它也可以：
- ……
而不管是 iOS 还是 macOS，使用了苹果内容拦截技术的工具还有这两个优势：
- 从技术上杜绝追踪用户行为；
- 比此前的屏蔽工具加载网页的速度更快。
Marco Arment 推文
iOS 上的内容拦截器双雄
1Blocker 和 Adguard
前面已经提到，iOS 上的内容拦截器多是摸鱼，这么说也许有点严重，但实际上大多数这样的工具只是导入了一个屏蔽列表。苹果在 API 中提供了用户自定义的可能，这些工具却非常「不思进取」，很多用户只是觉得广告少多了好神奇，却不知道自己本来可以做得更多。
音乐流媒体是不管曲库有多么丰富，只要我听的歌没有就毫无意义。同样，屏蔽广告也是如此，不论预设的规则如何丰富，如果我常浏览的网页里面有东西屏蔽不到，那预设的规则对我来说也就意义不大。
注：
- 1Blocker iOS 版想要解锁完整功能需要支付内购 ¥30，本文按照解锁内购后的功能进行介绍；
- Adguard 的免费版即可做到完整的自定义功能；
- Adguard 的付费版的增加功能需要通过代理来实现（后面会有解释）。
设计
在设计上 1Blocker 要胜于 Adguard。
主界面对比
1Blocker 的界面与大多数内容拦截器一样，进来就是开关，对新手很友好，初级用户只要把需要的打开。而当你需要复杂的高级功能，你可以下划到自定义的区域，开始摸索添加自定义的规则。
1Blocker 每个可以自定义的地方都会给你提示语法，让你知道你在这里可以做什么：
自定义规则区对比
而 Adguard 在这个方面做得可以说是简陋，特别是自定义规则界面，Adguard 做成了纯文本的形式，也没有语法提示，只告诉我们用换行来区分不同的规则。这会让新手摸不到头脑，上手难度也就随之增加。
默认的屏蔽功能对比
1Blocker 将可以屏蔽的内容分为了诸多类别，每一个类别里的每一个被屏蔽项对用户来说都是透明的，用户可以选择打开或关闭任何一个被屏蔽的项目。你可以通过搜索框来搜索具体的规则进行调整。
1Blocker 界面
Adguard 在这里的方式则是内置了多个过滤器列表，来让我们选择。当我们选择了一个过滤器列表，我们无法看到其中具体被屏蔽的项目，当然也就没办法针对其中具体的规则进行开关。
Adguard 界面
因为屏蔽的都是广告，能否自定义我个人觉得问题不大，但是还是希望能直接看到规则中的每一个条目，这样更有利于参考制作自己专属的屏蔽列表。
自定义屏蔽
自定义屏蔽是这类工具的一个拔高之处，也是真正值得讨论的地方。
苹果在介绍内容拦截 API 的时候提到，它所做的事很简单，一是屏蔽访问，二是隐藏页面元素。
屏蔽访问
屏蔽访问非常容易理解，它就是直接不让网页加载这个链接下的内容。比如你加了一条 baidu.com 的规则，或者按正则表达式，在 1Blocker 里写规范一点是 http://www \.baidu\.com/，你就无法打开百度了。
1Blocker 中的规则与结果
但是百度里的广告，要怎么屏蔽呢？要靠隐藏页面元素，这才是内容拦截器最狠的地方。
重点！屏蔽页面元素
1Blocker 和 Adguard 在屏蔽页面元素上的造诣才是它们真正成为同类工具中佼佼者的原因，在这一点上 Adguard 的实现方式更为出众。
它具体的操作步骤如下：
第一步：在 Share Sheet 中找到 Adguard 并打开，选择 拦截此页面上的元素。
第二步：选择你想隐藏的部分，选不中没关系，可以按加减号来选择屏蔽范围。
第三步：范围确定后轻触 Adguard 图标，Adguard 会自动添加这条规则并自动刷新，大功告成。
步骤图示
此外，操作栏中有一个「眼睛」的图标，这是用来让你预览屏蔽效果的。
那么为什么说 Adguard 的体验更好呢，因为 Adguard 在这个位置实现的是在当前网页下直接对要屏蔽的元素进行选择，而 1Blocker 的方式却非常蠢。
1Blocker 的方式是，在浏览器中再生成一个浏览器框架，在这个新的浏览器中打开网页未经广告过滤的原网页，来让我们选择其中要屏蔽的元素。这不仅需要把不必要加载的广告加载回来，还会因为 1Blocker 浏览器框架本身的不成熟导致网页永远读取不完。除此之外，遇到需要登录的站点，比如微博或者 Instagram 的网页，通过 1Blocker 的浏览器框架我们根本没办法进入到登录后的界面，因为当我们选择元素的时候，我们不是点击它，而是要屏蔽它。
总之，1Blocker 也支持屏蔽页内元素，但体验着实非常差，我写这篇文章的时候一度想把「双雄」改为「翘楚」，抛掉 1Blocker 只留下 Adguard，但因为下一条原因动摇了。
同步
在内容拦截器里最重要的部分，Adguard 的体验是完胜其它竞争者的。但紧接着，在下一个关键需求上，Adguard 的体验却急转直下，那就是它的规则不能同步……
当一个工具允许自定义规则，它下一步应该做的就是支持同步这个规则。否则多设备的情况下体验将会不再一致。
这时候 1Blocker 的强力就体现出来了，它是目前唯一做到 iOS 与 macOS 全平台同步规则的，使用了苹果提供的内容拦截 API 的工具，这大概也是 John Gruber 说用了 1Blocker 以后再也不考虑其它的内容拦截工具的原因了。
John Gruber 推文
关于屏蔽其它应用内的内容
在拦截内容方面，还有一个更进一步的需求，是屏蔽应用内的内容。首先我们要知道的是，苹果官方提供的 API 里是无法满足这个需求的。苹果提供的 API 只能解决 Safari 中的问题，这也是为什么 1Blocker 不支持 macOS 上的 Chrome。
要做到屏蔽其它应用内的内容，在目前的 iOS 上只有一个办法，就是通过代理工具，自定义规则，来屏蔽其它应用内的内容。
但是这么做首先有风险，即如果这个证书不是你自己制定的规则，而是你下载的什么不明不白的工具里提供的证书，那你所有的访问请求都会被记录。有的垃圾网站使用的登录技术过于落后，这个代理提供商就可以直接获取你的账户密码，而如果你没有一个好的使用密码的习惯，所有账户都用一个密码，那就非常严重了。
除了风险问题，还有和科学上网冲突的问题。iOS 不会让你同时挂两种代理，那么科学上网用的代理和拦截内容的代理就只能二选一。
在 iOS 上，只有一类工具可以兼顾两个需求，那就是 Sxxge 这类的网页调试工具。它们不仅可以翻墙，同时可以做到对链接的屏蔽（这是内容屏蔽工具两个功能里的第一个），所以早已有很多人在网上分享自用的规则。
除此之外，这类工具在内容屏蔽上还有一个特长——它可以记录我们的访问请求。正是由于这个特性，我们才可以获取启动广告这样根本没办法获取链接的内容的链接。
因为这篇文章不是主要介绍此类工具的，就不再多赘言。总之，一款主打内容拦截的工具，它是不可能仅通过苹果提供的内容拦截 API 就拦截应用内的广告的，它必然会通过代理服务的方式，这样就会带来安全上的风险。我做调查的时候看到一些国产工具，里面竟然还在分享各个视频网站的会员 ID，这样的服务你敢信？
1Blocker 特写
推荐 1Blocker 这个工具，除了它功能出色之外，还有一个原因，就是对这个独立开发团队的认可。
首先，这个工具被非常多的权威媒体和值得信赖的人推荐，这让这个工具到了一种无法辜负信任的高度。它如果坑了，就把它官网上列出的为它背过书的人和机构都坑了。因此这个团队也在官网郑重表了态，他们说「We（我们）」：
- Don’t make deals with advertisers. 不与广告商做交易。
- Don’t and technically can’t track our users. 不会，技术上也不可能追踪我们的用户。
- Have no customer data to sell. 没有用户资料拿去卖。
- Bootstrapped and self-funded. No investors. 自给自足，没有投资人。
我倒并不是说完全相信那些机构/人的背书和这些承诺，也不是在这里背书然后鼓励大家去相信这些。这些都是看过功能之后的一些态度上的问题，我只是个人觉得，这里是 1Blocker 值得书写的一点。
在 1Blocker 的官网上还有一个表格，横向比较了当红内容拦截工具，因为其它的都不能拿来比，所以我只截取了 1Blocker 和 Adguard 的部分来为大家解释一下：
1Blocker 官网的功能对比表格（部分）
图里 Adguard Pro 可以被坐实的地方只有它不支持 iCloud Sync，像第一行「不监控和记录用户的浏览行为」，1Blocker 也没有证据，所以用了「may be」这样的词。第二行的「自定义规则」，1Blocker 说 Adguard 「Very limited」，实际上我倒觉得 Adguard 的自定义规则更强。
我的选择——合用两者，一主一辅
这两个工具之间的选择让我想起了我在 nPlayer 与 Infuse 上的纠结：Infuse 各方面的用户体验都做得很到位，但在核心功能——解码流畅度这个问题上完败给 nPlayer。
1Blocker 也一样，在各方面体验上都要优于 Adguard，但唯独在屏蔽页面元素这一步体验逊色于 Adguard。
但好在这两者可以一起用，而且 Adguard 屏蔽页面元素的功能是免费的，所以不至于陷入二选一的困境，以 1Blocker 为主，需要屏蔽元素时用一下 Adguard，再把语法添加到 1Blocker 就行了，毕竟 1Blocker 可以同步语法到其它设备，包括 1Blocker for Mac。
如果你也打算这么用，需要注意一个简单的语法区别：
Adguard 中屏蔽元素的规则，一般是这个格式：网页链接 + 两到三个 # + CSS/HTML。比如我们刚才屏蔽的百度广告，它的规则是这样的：baidu.com###results > div.ec_wise_ad:first-child > div.ec_ad_results。
我们把这个规则搬到 1Blocker 的时候，它的做法是：
- 先修改代码，掐头去尾，只剩：#results > div.ec_wise_ad
- 再把这串代码粘贴到下图中 1Blocker 的 CSS SELECTOR 里
- 然后选择 Hide only for paticular domains（只针对特定网站隐藏）
- 最后在 DOMAINS 填上要隐藏这个元素的网站即可，在这个例子里，就是 baidu.com
左 Adguard，右 1Blocker
当然，如果你只有一个设备，或者不觉得同步规则麻烦，在 iOS 完全可以只用 Adguard 的免费版来做到 1Blocker 做的事。
不管选择哪一种方案，从今天起，你就是网页内容的主宰。
你有在浏览器中使用内容拦截器的习惯吗？网页广告有没有对你造成什么困扰？
参与本周话题讨论，将有机会获得奖品，奖品详见周一的预告文章。
上一期
下一期
精选评论（4） 我的评论
