科技改變生活 · 科技引領(lǐng)未來
付費(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個元素的確計(jì)算出了各自的位置;最重要的線索是,通過下面的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。里面的邏輯包含了計(jì)算每個元素的位置和屬性,添加元素點(diǎn)擊的統(tǒng)計(jì),以及定時刷新的功能。
解決屏蔽失效問題
通過上面分析,我把這個js腳本的域名填充到了IOS過濾插件里面,廣告就消失了。不得不感嘆,現(xiàn)在的低俗廣告頁對技術(shù)都這么有追求,開始這么卷么?
如果你覺得看完本文有收獲,歡迎點(diǎn)贊+關(guān)注吧~
劉原
版權(quán)所有 未經(jīng)許可不得轉(zhuǎn)載
增值電信業(yè)務(wù)經(jīng)營許可證備案號:遼ICP備14006349號
網(wǎng)站介紹 商務(wù)合作 免責(zé)聲明 - html - txt - xml