广告屏蔽

网页页面上的广告是一个事实,当然当广告的量比较大的时候,会对用户获取网站信息造成一定的影响,广告屏蔽插件和自带广告屏蔽功能的浏览器也就应运而生。例如广告终结者Adblock Plus,但广告屏蔽越来越严苛,网站0广告显示; 手机上的UC浏览器、百度、QQ、猎豹等各个浏览器对广告均存在一定的屏蔽现象。

屏蔽手法

广告终结者等广告屏蔽插件中都可以自定义屏蔽规则,以此可以推断广告的屏蔽引擎主要从广告相关的请求拦截和元素隐藏两个方面进行。

请求拦截

请求拦截主要针对以下类型请求的URL地址进行规则匹配判断,当URL匹配时,即中断该请求,达到广告拦截的目的。

  1. script —— 脚本,script标签加载;
  2. stylesheet —— 样式,link标签加载;
  3. image —— 图片,img标签或背景样式所载入;
  4. xmlhttprequest —— XMLHttpRequest对象;
  5. object —— 由浏览器插件处理的内容,例如FlashJava
  6. object-subrequest —— 插件的请求,比如Flash
  7. subdocument —— 内嵌的页面,通过iframeframe方式内嵌。

元素隐藏

将广告元素的特征抽象出规律,通过CSS选择器匹配隐藏。

应对策略

既然网页被针对性的写出了广告屏蔽规则,那么说明网站中必然存在一定的有效内容。把握广告的量度,遵循基本的产品原则是解决广告屏蔽问题的基本前提。

技术上不存在银弹;只能道高一尺,魔高一丈。

基本技术解决原则

  1. 选择无法被插件监听的请求类型,比如WebSocket(针对请求拦截);
  2. 选择无法被插件区分的请求地址,比如将请求和正常内容的请求地址用同一种规则混合在一起;
  3. 元素属性去特征化,删除元素的属性。
  4. 元素位置去特征化,HTML结构加盐。

技术方案

请求方案选择

网页中肯定会出现图片,将广告信息用图片封装,请求地址URL混入在正文图片中。

元素方案选择

  1. 使用img元素,用生成的Canvas作为内容来源,加盐img用小于1像素的随机base64内容(缺点:Canvas的排版需要用脚本定制成本高,base64内容在文档是一个典型被识别特征);
  2. 使用自定义元素,通过class属性定义样式,图片通过css中背景图设置,文字直接作为文本内容,自定义元素名和css类名随机化即可(缺点:not选择器可以一网打尽);
  3. 使用iframe元素,通过脚本操作iframe文档内容,加盐结构用小于0.01的随机数做高度值,iframe内部脚本通过pushState操作src去特征化。

综上:iframe是一个较合适的元素。

代码实现

上面方案应该存在漏洞,大家帮我挑挑错吧。

参考资料

  1. 《互联网广告管理暂行办法》
  2. 一文读懂《互联网广告管理暂行办法》中的关键问题
  3. 广告终结者规则
  4. 广告终结者规则语法
  5. 撰写 Adblock Plus 过滤规则
  6. EasyList
  7. Dynamic filtering: rule syntax
  8. uc不会再屏蔽某网盟的广告了(原来如此)
  9. UC9.0也可以自己添加广告过滤规则了
  10. UC 11.2.1.888 For Android 广告拦截 内测重磅来袭!
  11. 广告问题集中吐槽营