付費(fèi)的Safari廣告插件失效了？最近迷上了抖音上一些港劇剪輯，于是想著能不能在網(wǎng)上找一些完整版的劇集用來下飯。一番搜索后，輕松地找到。然而在PC上瀏覽的時候，界面非常的清爽（后來發(fā)現(xiàn)上默認(rèn)開啟的uBlock插件的過濾）。可是當(dāng)我從手機(jī)上瀏

付費(fèi)的Safari廣告插件失效了？

最近迷上了抖音上一些港劇剪輯，于是想著能不能在網(wǎng)上找一些完整版的劇集用來下飯。一番搜索后，輕松地找到。然而在PC上瀏覽的時候，界面非常的清爽（后來發(fā)現(xiàn)上默認(rèn)開啟的uBlock插件的過濾）。可是當(dāng)我從手機(jī)上瀏覽的時候，卻發(fā)現(xiàn)一些令人分神的廣告。手機(jī)上看視角是這樣：

Safari開啟廣告插件無法屏蔽廣告

由于ios15系列版本更加強(qiáng)化了對Safari瀏覽器應(yīng)用內(nèi)容過濾插件的功能，所以我自然想到用付費(fèi)買來的廣告助手來屏蔽這令人分神的廣告。屏蔽的原理很簡單，就是刪除對應(yīng)的html元素。但有意思的是，屢試不爽的廣告助手居然"失手"了！除了廣告的位置，其他位置的元素都可以識別到，然后屏蔽掉。

探索廣告插件失效的原因

這廣告究竟有何神通，可以繞過廣告屏蔽。于是我在PC上打開相同的網(wǎng)址。通過查看廣告位置的元素發(fā)現(xiàn)，這個圖標(biāo)的位置是由多個元素組成的，而且使用的都是非標(biāo)準(zhǔn)html標(biāo)簽；這可能是手機(jī)上廣告屏蔽助手無法嗅探到這個元素的原因之一！

更有意思的是，我發(fā)現(xiàn)廣告的位置，有腳本在定時操作DOM上的元素，一旦屏蔽了或刪除其中的某一個元素，不一會相同的標(biāo)簽又被追加了回來，甚至?xí)ㄆ趽Q一個標(biāo)簽名字。通過控制臺數(shù)算了一下，一張廣告圖的位置居然有40個元素來填充。

但是仔細(xì)觀察這些標(biāo)簽的屬性，由于并非標(biāo)準(zhǔn)的html標(biāo)簽；那么這些標(biāo)簽是如何共同渲染成一張圖片的呢？通過查看標(biāo)簽的屬性發(fā)現(xiàn)，這40個元素的確計算出了各自的位置；最重要的線索是，通過下面的style部分可以看到，DOM中有一條相關(guān)的語句，用來填充這些標(biāo)簽。

這里簡單地分析這條樣式語句，可能為了不容易被image的url溯源，這里通過base64編碼了廣告圖片，然后通過css選擇器，將圖片填充到了40個元素里面。#WRdrzip ~ UpPYfLi 這個css選擇器的含義為 "選擇前面是id=WRdrzip標(biāo)簽的每個UpPYfLi標(biāo)簽"

通過搜索這個樣式，發(fā)現(xiàn)是在head標(biāo)簽中。但如果直接查看網(wǎng)頁的html代碼，定然不會有這些明顯的操作。現(xiàn)在看閃爍的DOM標(biāo)簽，一定是通過某個js腳本來動態(tài)操作DOM的。那能不能追溯下是哪個js腳本在操作這個DOM元素呢？這里有一個小技巧，可以通過設(shè)置DOM斷點(diǎn)，來查看哪個js在動態(tài)操作某個元素。

這里根據(jù)這個標(biāo)簽的行為，選擇監(jiān)聽body元素的修改事件。通過斷點(diǎn)逐步調(diào)試，可以非常容易的看到，是這個動態(tài)引入的js腳本在定時操作當(dāng)前的DOM。里面的邏輯包含了計算每個元素的位置和屬性，添加元素點(diǎn)擊的統(tǒng)計，以及定時刷新的功能。

解決屏蔽失效問題

通過上面分析，我把這個js腳本的域名填充到了IOS過濾插件里面，廣告就消失了。不得不感嘆，現(xiàn)在的低俗廣告頁對技術(shù)都這么有追求，開始這么卷么?

如果你覺得看完本文有收獲，歡迎點(diǎn)贊+關(guān)注吧~