type
category
status
summary
tags
password
slug
创建时间
Aug 7, 2023 04:43 PM
上次编辑时间
Jul 2, 2024 05:52 AM
icon
Date
这篇文章主要讨论了如何使用Adguard的自定义规则来屏蔽梦璃网站的广告。由于广告的dom元素无法准确定位,且Adguard插件生成的基于css选择器的拦截规则并不好用,提出了一个新的方法:利用广告中的a标签中都有一个固定的属性rel值为nofollow来进行广告屏蔽。
1. 梦璃网站广告现状
梦璃网站存在着很多的广告,如网站页眉页脚、文章的开头和结尾部分和评论区部分都存在较大的广告,因各种原因我决定将其屏蔽
不要纠结于为什么屏蔽,你纠结这个的话,那你为什么会看到这篇文章呢
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7b259eb5-fc31-4542-9e44-a300f8d631a6%2FUntitled.png?table=block&id=6b38a730-805e-4303-8f7a-04caa895e1ad&t=6b38a730-805e-4303-8f7a-04caa895e1ad&width=1164&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fffe6bde9-1ca1-42c8-b048-acc62de185aa%2FUntitled.png?table=block&id=6e0278ba-f781-4279-a680-1636b8b92de7&t=6e0278ba-f781-4279-a680-1636b8b92de7&width=1565&cache=v2)
2. 问题分析
通过F12打开开发者工具后,选择元素可以发现,其广告的dom元素无法准确的定位,是采取了随机class的方式
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fab455910-6040-46ad-a98e-6b55126143d4%2FUntitled.png?table=block&id=19ffeb9f-69ce-4100-ab2e-003f3fa61074&t=19ffeb9f-69ce-4100-ab2e-003f3fa61074&width=1475&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fbac1526e-08cb-48a7-ae07-281df768ad2b%2FUntitled.png?table=block&id=63218976-0bbf-4540-aa3c-8ec2271cf2d7&t=63218976-0bbf-4540-aa3c-8ec2271cf2d7&width=1498&cache=v2)
但分析其class样式可知,其实又为伪随机,但不确定其是否会变化,所以常规的class定位元素屏蔽方式并不合适
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0f5b5c5c-1474-4555-87e4-fab7849da222%2FUntitled.png?table=block&id=1998b517-09a6-4fe8-b44e-62363c56a1a1&t=1998b517-09a6-4fe8-b44e-62363c56a1a1&width=494&cache=v2)
与其同时,也还有Adguard插件生成的基于css选择器的拦截规则,但就实际尝试而言这并不好用,因为其结果是与DOM树结构高度绑定的,且因为不同页面的DOM结构不一样,而其广告结构类似,很容易导致在其他页面误杀,Adguard插件生成的结果其实并没有针对广告拦截做太多的优化,其用了两个不普遍性的筛选规则,一个是文章的ID,还一个是前面提到的随机生成的class
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F983867d3-7c36-4842-a206-8b096bb78266%2FUntitled.png?table=block&id=9b6b62dd-fccf-4aa8-a4e2-093a7fe57dc3&t=9b6b62dd-fccf-4aa8-a4e2-093a7fe57dc3&width=1840&cache=v2)
要避免这种情况,要不就针对URL路径本身在进行二次限制或通过其他方式,但那样终究复杂度会过高
3. 解决方案
所以只能通过其他方式进行拦截,不过可以注意到,其广告中的a标签中都有一个固定的属性rel值为nofollow
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9bd251e3-9d0c-4e39-a1fd-9286655a1518%2FUntitled.png?table=block&id=cf1ac246-604e-425b-bcd0-be0db084bf7f&t=cf1ac246-604e-425b-bcd0-be0db084bf7f&width=1840&cache=v2)
nofollow 链接属性由 Google 于 2005 年引入,用于处理用来欺骗系统的垃圾链接。一般来说,nofollow 链接属性应用于非自然链接以及网站所有者不想与链接的目标 URL 关联时。 简单来说就是因为这个链接是通往广告的,它并不希望这个link被搜索引擎收录,所以他的广告属性中都有此属性
所以我们可以针对其广告写如下的规则
moeli-desu.com##div > a[rel="nofollow"]
规则解释
在
moeli-desu.com
域名下的 <div>
元素内,选择具有 rel
属性值为 nofollow
的 <a>
元素,并进行屏蔽(隐藏)操作。这个规则将会选择
moeli-desu.com
域名下的所有 <div>
元素中具有 rel="nofollow"
属性的 <a>
元素,并尝试将其屏蔽掉,从而达到过滤的目的。参考
- 广告屏蔽采用网页修改的方式并不是上策,最通用最佳的方式还是进行url拦截,不过根据我对于其的分析其广告url与正常图片url并无法区分,最多只能定向拦截具体图片,但这样反而更不是一个可以长久的方案
主要参考
欢迎在底部评论区分享您的想法和经验,让我们一起共同探讨,共同进步!
- 作者:Qi Xing - 七行
- 链接:https://blog.qixing1217.top/article/d5e797e4-3e1a-4cc7-bc06-fbfd02e3ae80
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。