fis-postprocessor-ad-mix
v0.0.2
Published
广告class混淆插件
Downloads
4
Readme
FIS反广告拦截class混淆处理插件
目前反广告拦截主要采取了前端css动态混淆的方式,此插件结合smarty自动替换生成唯一混淆标识,尽可能保留原有开发习惯同时完成混淆工作。
使用方法
安装此插件并进行配置
执行npm install -g fis-postprocessor-ad-mix
安装插件
配置插件,注意将需要inline到页面中的css代码设置不发布:
fis.config.merge({
modules: {
//对tpl和css文件使用此插件
postprocessor: {
tpl: 'ad-mix',
css: 'ad-mix'
}
},
roadmap : {
path : [
{
//所有widget下的inline广告css不发布,注意确定一个特定命名规则
reg : 'widget/**.inline.less',
release : false
}
]
}
});
标记需要替换的变量,inline广告css到页面中
注意:默认认为widget中所有MIX_CLASS_ID
是需要被替换的变量,替换生成的smarty变量名称规则为$ad_mix_{模块名}_{widget名},smarty生成的变量ID规则为2随机字符+uniqid前6位
。
如widget中:
//home/widget/ad/ad.tpl
<div class="MIX_CLASS_ID">
<h1><a href="/test?MIX_CLASS_ID" data-MIX_CLASS_ID >广告链接1</a></h1>
</div>
编译之后:
{%$ad_mix_home_ad=uniqid("sy")|truncate:8:"" scope="global"%} //自动生成smarty随机变量
<div class="{%$ad_mix_home_ad%}">
<h1><a href="/test?{%$ad_mix_home_ad%}" data-{%$ad_mix_home_ad%} >广告链接1</a></h1>
</div>
css中:
//home/widget/ad/ad.inline.less
.MIX_CLASS_ID {
font-size: 14px;
min-height: 22px;
.icon-adv {
width: 81px;
height:22px;
display: inline-block;
margin-right: 7px;
background-position: 0 -100px;
}
}
编译后:
.{%$ad_mix_home_ad%} {
font-size: 14px;
min-height: 22px;
}
.{%$ad_mix_home_ad%} .icon-adv {
width: 81px;
height: 22px;
display: inline-block;
margin-right: 7px;
background-position: 0 -100px;
}
注
:此css仅在页面中inline使用,需如上所说在fis-conf里面设置不发布
page中:
由于情况众多,插件暂时不处理page中的代码,您需要进行一些手动操作。如对于页面中的js,您可以读取smarty变量将值传入到合适的位置:
F.context('ad_mix_home_ad','{%$ad_mix_home_ad%}');
对于inline的广告css,您在想要的位置inline css代码
<style type="text/css">
@import url('/widget/ad/ad.inline.less?__inline');
@import url('...其他css...');
</style>
改进点
- 自动设置广告inline css不发布
- 自动扫描page用的widget,将inline css嵌入到指定位置
- 支持异步加载widget的情况