jscsshtml压缩与混淆汇总

Posted SegmentFault

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jscsshtml压缩与混淆汇总相关的知识,希望对你有一定的参考价值。

作者:第一名的小蝌蚪
来源:SegmentFault 思否社区

背景

前段时间针对某件大事件,我们用之前的一个老原生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压缩

压缩以前用的最多的是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的混淆我直接抽出来单独做了

结尾

通过抄袭的这件事,反射出了我们团队上线流程的不规范
但对于被其他团队抄袭这种行为,也只能在这里道德谴责一下,发发牢骚
就当是吃一堑长一智吧,嘻嘻


点击左下角阅读原文,到  SegmentFault 思否社区  和文章作者展开更多互动和交流,扫描下方” 二维码 “或在“ 公众号后台 回复“  入群  ”即可加入我们的 技术交流群 ,收获更多的技术文章~

- END -

以上是关于jscsshtml压缩与混淆汇总的主要内容,如果未能解决你的问题,请参考以下文章

web优化汇总 简

append() 在这个代码片段中是如何工作的?与特定变量混淆[重复]

gulp 项目构建 代码压缩与混淆

js压缩混淆和加密

js压缩混淆和加密

谁给推荐个c++代码混淆工具