fis-postprocessor-ad-mix

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规则为3随机字母+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:9:"" 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的情况