js、css、html压缩与混淆:页面加速防止被抄袭

2021年8月19日07:15:25 发表评论 150 views

背景

前段时间针对某件大事件,我们用之前的一个老原生html项目,涂涂改改快速做了一个h5,由于时间紧迫直接上线了

结果没想到。。。。第二天就被某大公司抄袭了。。。调了点颜色、改了些文案就直接抄袭并上线了。。。连我们变量名都没改。。。

后来我们快速对项目代码进行了压缩和混淆,才避免了后续迭代没有被抄袭。。。

整件事说起来又气又搞笑。。。

经过这件事,我汇总了一下js、css、html压缩与混淆,增加页面加载速度的同时,还能防止页面被抄袭

js混淆

js混淆,其实就是将你的js代码弄的晦涩难懂,达到了防抄袭的效果

业界比较常用的是javascript-obfuscator这个库

const JO = require("javascript-obfuscator");
const code = `
        function add(first, second) { return first + second; }; 
        var v = add(1,2); 
        console.log(v);
`;
const result = JO.obfuscate(code,
    {
      compact: false,
      controlFlowFlattening: true,
      controlFlowFlatteningThreshold: 1,
      numbersToExpressions: true,
      simplify: true,
      shuffleStringArray: true,
      splitStrings: true,
      stringArrayThreshold: 1,
    }
  );
console.log("混淆结果:", result.getObfuscatedCode())

这段代码就是将一段简单的加法运算代码进行了混淆,最后结果是

js、css、html压缩与混淆:页面加速防止被抄袭

分析一下你会发现,其实多了一个字典,所有方法变量,都有存在字典中,调用时先调用字典还原方法名变量再执行

js压缩

压缩以前用的最多的是uglifyjs,现在用的比较多的是terser

const { minify } = require("terser");
const code = `
        function add(first, second) { return first + second; }; 
        var v = add(1,2); 
        console.log(v);
`;
const result = await minify(code);
console.log("压缩结果:", result.code)

压缩后结果如下:

function add(d,n){return d+n}var v=add(1,2);console.log(v);

将所有参数都变成了一个字符,所有能缩减的空间都去掉了,转化成一行代码,最大限度节省代码体积

css压缩

css压缩,我用的clean-css,当然业界也有很多优秀的css处理插件比如PostCSS,但这里我简单介绍一下clean-css的用法

    const CleanCSS = require('clean-css');
    const input = `
        a { 
            font-weight:bold; 
        }
        .vb {
            border: 1px silid red;
        }
    `;
    const options = { /* options */ };
    const output = new CleanCSS(options).minify(code);
    console.log("压缩结果:", output.styles)

压缩后的结果如下:

a{font-weight:700}.vb{border:1px silid red}

html压缩

现在业界最常用的html压缩插件是html-minifier,功能很强大,还能压缩html中的js和css,直接上代码

我们压缩一段有html、js、css的代码

js、css、html压缩与混淆:页面加速防止被抄袭

执行压缩的代码如下:

const htmlMinify = require("html-minifier").minify
const result = htmlMinify(htmlCode, {
        minifyCSS: true,// 压缩css
        minifyJS: true,// 压缩js
        collapseWhitespace: true,// 删除html里的空格 达到html的压缩
        removeAttributeQuotes: true,// 尽可能删除html标签里的双引号 达到html的压缩
        removeComments: true, //删除html中的注释
        removeCommentsFromCDATA: true, //从脚本和样式删除的注释
    });
console.log("压缩结果:", result)

压缩结果如下:

<html><head><style>a{font-weight:700}.vb{border:1px silid red}</style></head><body><div class=foreword>小蝌蚪,嘻嘻</div><script type=text/javascript>function add(d,n){return d+n}var v=add(1,2);console.log(v)</script></body></html>

通过设置对应的配置项minifyCSS和minifyJS,我们直接把html、js、css一起进行了压缩,非常方便

唯一遗憾的是,好像html-minifier不支持js的混淆,所以js的混淆我直接抽出来单独做了

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: