科技改變生活 · 科技引領未來
付費的Safari廣告插件失效了?最近迷上了抖音上一些港劇剪輯,于是想著能不能在網上找一些完整版的劇集用來下飯。一番搜索后,輕松地找到。然而在PC上瀏覽的時候,界面非常的清爽(后來發現上默認開啟的uBlock插件的過濾)。可是當我從手機上瀏
付費的Safari廣告插件失效了?
最近迷上了抖音上一些港劇剪輯,于是想著能不能在網上找一些完整版的劇集用來下飯。一番搜索后,輕松地找到。然而在PC上瀏覽的時候,界面非常的清爽(后來發現上默認開啟的uBlock插件的過濾)。可是當我從手機上瀏覽的時候,卻發現一些令人分神的廣告。手機上看視角是這樣:
Safari開啟廣告插件無法屏蔽廣告
由于ios15系列版本更加強化了對Safari瀏覽器應用內容過濾插件的功能,所以我自然想到用付費買來的廣告助手來屏蔽這令人分神的廣告。屏蔽的原理很簡單,就是刪除對應的html元素。但有意思的是,屢試不爽的廣告助手居然"失手"了!除了廣告的位置,其他位置的元素都可以識別到,然后屏蔽掉。
探索廣告插件失效的原因
這廣告究竟有何神通,可以繞過廣告屏蔽。于是我在PC上打開相同的網址。通過查看廣告位置的元素發現,這個圖標的位置是由多個元素組成的,而且使用的都是非標準html標簽;這可能是手機上廣告屏蔽助手無法嗅探到這個元素的原因之一!
更有意思的是,我發現廣告的位置,有腳本在定時操作DOM上的元素,一旦屏蔽了或刪除其中的某一個元素,不一會相同的標簽又被追加了回來,甚至會定期換一個標簽名字。通過控制臺數算了一下,一張廣告圖的位置居然有40個元素來填充。
但是仔細觀察這些標簽的屬性,由于并非標準的html標簽;那么這些標簽是如何共同渲染成一張圖片的呢?通過查看標簽的屬性發現,這40個元素的確計算出了各自的位置;最重要的線索是,通過下面的style部分可以看到,DOM中有一條相關的語句,用來填充這些標簽。
這里簡單地分析這條樣式語句,可能為了不容易被image的url溯源,這里通過base64編碼了廣告圖片,然后通過css選擇器,將圖片填充到了40個元素里面。#WRdrzip ~ UpPYfLi 這個css選擇器的含義為 "選擇前面是id=WRdrzip標簽的每個UpPYfLi標簽"
通過搜索這個樣式,發現是在head標簽中。但如果直接查看網頁的html代碼,定然不會有這些明顯的操作。現在看閃爍的DOM標簽,一定是通過某個js腳本來動態操作DOM的。那能不能追溯下是哪個js腳本在操作這個DOM元素呢?這里有一個小技巧,可以通過設置DOM斷點,來查看哪個js在動態操作某個元素。
這里根據這個標簽的行為,選擇監聽body元素的修改事件。通過斷點逐步調試,可以非常容易的看到,是這個動態引入的js腳本在定時操作當前的DOM。里面的邏輯包含了計算每個元素的位置和屬性,添加元素點擊的統計,以及定時刷新的功能。
解決屏蔽失效問題
通過上面分析,我把這個js腳本的域名填充到了IOS過濾插件里面,廣告就消失了。不得不感嘆,現在的低俗廣告頁對技術都這么有追求,開始這么卷么?
如果你覺得看完本文有收獲,歡迎點贊+關注吧~
劉原