用js屏蔽被http劫持的浮動廣告實(shí)現(xiàn)方法
最近發(fā)現(xiàn)網(wǎng)站經(jīng)常在右下角彈出一個浮動廣告,開始的時候以為只是瀏覽器的廣告。
后來越來越多同事反映在家里不同瀏覽器也會出現(xiàn)廣告。然后深入檢查了下,發(fā)現(xiàn)網(wǎng)站竟然被劫持了。
然后百度了一大堆資料,什么http劫持、dns劫持、運(yùn)營商劫持之類的,確定真的是中招了??磮D:
真是偷梁換柱啊,被插入廣告代碼了。真是無良奸商,什么都做得出。
然并卵,最重要的解決辦法是啥?然后把問題扔給了運(yùn)維的同事。
最終結(jié)果是解決不了。沒錯,就是這么的坑爹。除非采用https。網(wǎng)上那些什么打電話、發(fā)信投訴之類的貌似沒啥用。可能是運(yùn)維太爛了。反正結(jié)果就是沒結(jié)果。
然后,沒辦法啦。只能我們大前端自己想辦法屏蔽啦。然后開啟了研究劫持代碼之旅,
......過程省略了800字尋找過程。
最終發(fā)現(xiàn)了,被劫持的廣告會定義一個js全局變量_pushshowjs_ ,里面保存了一些劫持廣告的相關(guān)信息,然后創(chuàng)建一個id為_embed_v3_dc的div放廣告。并且每次都是一樣的,不會有變化。
根據(jù)劫持廣告的投放原理,最終使用了js屏蔽被劫持廣告的方法。
具體代碼如下:
;(function($,window,undefined){ var needClear=false, timeout; if(window._pushshowjs_){ console.log("adHttp"); needClear=true; } window._pushshowjs_={}; Object.freeze(window._pushshowjs_);//讓對象只讀, 防止屬性被直接修改 Object.defineProperty(window, '_pushshowjs_', { configurable: false,//防止屬性被重新定義 writable: false//防止屬性被重新賦值 }); if(needClear){ timeout=setInterval(function(){ if($("#_embed_v3_dc").length>0){ $("#_embed_v3_dc").remove(); console.log("http清除"); needClear=false; clearInterval(timeout); } },500); $(window).load(function(){ if(needClear){ setTimeout(function(){ clearInterval(timeout); console.log("清除"); },2000); } }); } }(jQuery,window));
代碼不多,就不詳細(xì)解析了(如果覺得代碼有問題,望指正)。簡單點(diǎn)說就是把劫持廣告必須的全局js變量_pushshowjs_設(shè)定為不可被修改,只讀。如果發(fā)現(xiàn)廣告就清除。
放了代碼,終于跟被劫持的廣告說88了。
為什么說是笨辦法?
因?yàn)檫@只是自欺欺人。其實(shí)劫持還是存在,并且被劫持了的js的加載順序有可能會發(fā)生變化而導(dǎo)致錯誤,理想的辦法還是要靠運(yùn)維跟運(yùn)營商去解決或使用https。
每個劫持的廣告邏輯應(yīng)該都差不多,但廣告代碼都會不同。所以我這個不一定會適用于其他的劫持廣告。這只是一個思路,沒辦法之中的辦法。
有大神有更好的解決辦法,望指教。
以上這篇用js屏蔽被http劫持的浮動廣告實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript獲取xml節(jié)點(diǎn)的最大值(實(shí)現(xiàn)代碼)
這篇文章主要介紹了利用javascript獲取xml節(jié)點(diǎn)的最大值。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12探究JavaScript原型數(shù)據(jù)共享與方法共享實(shí)現(xiàn)
這篇文章主要介紹了探究JavaScript原型數(shù)據(jù)共享與方法共享實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05前端如何用post的方式進(jìn)行eventSource請求
這篇文章主要給大家介紹了關(guān)于前端如何用post的方式進(jìn)行eventSource請求的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-04-04Bootstrap fileinput文件上傳預(yù)覽插件使用詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap fileinput文件上傳預(yù)覽插件的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05JavaScript實(shí)現(xiàn)簡單的日歷效果
本文給大家分享的是一個簡單的JavaScript制作的日歷模板,小伙伴們可以根據(jù)自己的需求,繼續(xù)補(bǔ)充,希望大家能夠喜歡2016-09-09