站长如何屏蔽流氓宽带商在你的页面里面强行插入的广告代码
如果屏蔽页面上的广告?对于普通用户来说,使用AdBlock插件是最佳选择(针对火狐浏览器和谷歌浏览器用户,不知道IE浏览器容易如何处理这样的问题)。
没有人喜欢广告,但在互联网上,绝大多数网站的主要来源只有广告,如果没有广告收入,这些网站基本上都会倒闭。
为了在投放放过和不骚扰用户之间取得平衡,很多站长是很有克制在页面上投放少量的广告。但站长们的这些良苦用心往往会被一些流氓宽带商的恶意行为给粉碎了。几乎所有的宽带商(联通宽带、电信宽带、移动宽带、长城宽带、方正宽带等)都会在用户使用它们的宽带服务浏览网页时,在这些网页的页面上强行嵌入自己的广告服务。
以大家熟知的36kr网站为例子来说明这个问题。我使用的是方正宽带,当用户访问36kr网站的页面时,正常情况下,36kr网站的页面是没有放置广告的,更不会在页面的右下角弹出广告。但当使用方正宽带访问36kr网站时,你就会发现页面右下角有广告弹出。
我们使用火狐浏览器的代码调试窗口,发现,在页面的尾部无端多出来很多iframe
和嵌入有广告代码的div
。很显然,这些代码并不是36kr放置的。它是宽带商捕捉用户浏览的网页,擅自非法的这些页面上添加自己的广告服务代码。这些代码能给宽带商带来一笔额外的收入。
对于站长来说,这些广告很讨厌,用户会认为这些都是网站站长投放的。站长背了黑锅,而且没得到任何好处,更重要的,影响了在用户心中的形象,流失了用户。
站长应该维权,但站长是弱势群体,维权路上很难成功。那么,我们只能自己想办法,我们可以通过技术的手段,在页面代码里做一些改动,阻拦或屏蔽这些宽带商非法嵌入的代码。
我发现,宽带商非法嵌入的广告代码通常是两种形式,一种是在页面尾部加入数个iframe
,iframe
里的内容是宽带商承揽的广告;另外一种形式是直接嵌入div
,div
里嵌入一些html代码和js,最终呈现的内容还是宽带商承揽的广告。
但无论是iframe
还是div
,这些HTML广告代码都有相同的特征。
首先说说iframe
形式,这些iframe
在页面文档中的位置一定都是 body
元素的直接子元素,用CSS 选择器可以这样表示:
body > iframe{....}
以我个人的经验,一般正常的页面里很少有使用iframe
的,即使有,也很少有将iframe
直接放到body
元素下的。所以,对于这些流氓宽带商非法嵌入的iframe
,我们可以通过下面的CSS进行屏蔽:
body > iframe{ opacity:0; display:none; }
把这段代码放入页面里,这非法嵌入的广告iframe
,虽然存在,但完全看不见。
对于第二种情况,也就是div
形式的广告,我发现这些div
通常会放置在页面的最后,也就是页面里正常HTML元素的最后一个的后面。如果我们的页面里最后一个元素是:
<div id='last-div'></div>
,则就要其后非法插入的广告代码的CSS选择可以是这样:
div#last-div ~ div {。。。。}
,只要能捕捉目标,我们就能消灭它们,隐藏这些非法入侵者的代码很简单,跟上面消灭iframe
的方式一样:
div#last-div ~ div { display: none; opacity:0; }
将上面这这种代码一起放到页面里的CSS文件里,黑心的宽带商非法插入的广告就无法显示,我只是小范围的测试了一下,效果很好,但很有可能还有更多没有考虑到的情况。如果你知道这种方法有遗漏的地方,或者有更好的方法,请告诉我,在下面留言,或发邮件给我,谢谢。
人才啊!
这个可以有
难的是分析这些广告的共性
上https吧
插了很多script。铁通宽带的script会hack你的正常元素。考虑给外源脚本用白名单过滤?
表示没有看见过呢
见过宽带商的dns拦截,这样的植入广告确实也够黑的…
文中的方法虽然可以隐藏广告显示,但不知这些广告会对页面的加载带来多大的影响.
如果站内自己也有投放同类型的广告,就很难作区分对待了
规范好自己的网站架构,一般会知道自己该页面会有哪些元素,在加载的时候就把这些BODY直属下的元素显示就可以了。其他的全隐藏!
真流氓!!!!我给宽带运营商打电话他们不承认!!!靠
好流氓呀
还是有广告出现,我同事在手机上看到的广告,我在电脑上看不知道就不知道有广告页面中的代码了
非常感谢你的代码。iframe屏蔽代码非常好用,但是我发现有#document的代码输出的,是咋回事呢?看到帮我邮件回复下,非常感谢博主。
人才啊,公司两个网站移动端被联通搞的。。。哎,排查了半天是引用div+js文件,直接用你的div#id名搞定,感谢感谢!
博主你好,这个方法很好但是我发现有个缺陷,就是当我们把这些元素隐藏了之后他还会占据文档流,该怎么解决这个问题呢,用js可以吗?请分享您的心得。
要是div没有id呢?这样该怎么屏蔽?比如这样的
建议HTTPS + CSP 一起使用。
文中说的2种方法治标不治本,而且不好维护,第二种方法可能会影响某些需要动态创建元素的组件。