FIS反广告拦截class混淆处理插件

目前反广告拦截主要采取了前端css动态混淆的方式，此插件结合smarty自动替换生成唯一混淆标识，尽可能保留原有开发习惯同时完成混淆工作。

功能

自动生成smarty混淆变量并自动将css inline到对应的页面。

使用方法

安装此插件并进行配置

执行npm install -g fis-prepackager-ad-mix 安装插件

fis.config.merge({
    modules: {
        //对tpl和css文件使用此插件
        fis-prepackager-ad-mix: 'ad-mix'
    }
});

注意：如果您已使用其他prepackager插件，请在已有地方添加ad-mix,逗号隔开

开发说明

在代码中使用如下标记使用混淆插件

• MIX_CLASS_ID : 标记需要混淆的变量
• {%$AD_MIX_INLINE%}: 标记page中自动inline的smarty变量和css的位置
• {%$AD_MIX_CLASS='css地址'%} : 标记业务逻辑中手动inline的css文件

使用效果

所有MIX_CLASS_ID会被替换成跟widget对应的唯一smarty模板变量，变量名称规则为$ad_mix_{模块名}_{widget名}，smarty生成的变量ID规则为3随机字母+uniqid前6位。

随机字母长度可配置，随机字母是编译时生成,重叠几率非常低，并且在预览时即可确定。

widget若存在-符号，变量名会被替换成下划线_。

默认情况下所有smarty变量和css会自动inline到page中标记位置，您可以在插件中配置不自动inline的css,或者只自动inline smarty变量。

插件配置项

• mix_id : 'MIX_CLASS_ID', //混淆标记，默认是MIX_CLASS_ID
• randomLength : 3, //混淆ID前缀随机字母长度，默认为3
• inline_type : 'all', //inline方式，all所有、smarty只变量、none不自动inline
• exclude : ["**.less",/ad2-test.*/] //正则过滤某些不自动inline的css

开发示例

如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>

编译之后：

//自动生成smarty随机变量
//此语句将编译插入到同步调用widget的page模板中
{%$ad_mix_home_ad=uniqid("sy")|truncate:9:"" scope="global"%} 

<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会自动嵌入到调用widget的页面中标记为{%$AD_MIX_INLINE%}的地方

page中：

由于情况众多，插件暂时不处理page中的代码，您需要进行一些手动操作。如对于页面中的js，您可以读取smarty变量将值传入到合适的位置：

F.context('ad_mix_home_ad','{%$ad_mix_home_ad%}');

改进点

• 支持异步加载widget的情况

• 一个widget下多个inline css的情况

• 自动识别page中使用的所有widget和css