background

Some time ago, for a big event, we used an old native HTML project to make a quick H5, which was launched directly due to time constraints

Turns out… The next day it was copied by some big company… Adjust a little color, change some copywriting directly copy and online… We didn’t even change our variable names…

Later, we quickly compressed and obfuscated the project code to avoid being copied in subsequent iterations…

The whole thing is so angry and funny…

After this, I put together a summary of JS, CSS, HTML compression and obfuscation, increase the page loading speed at the same time, but also prevent pages from being copied

Js confusion

Js confusion, in fact, is to make your JS code difficult to understand, to achieve the effect of anti-plagiarism

The javascript- Obfuscator library is commonly used in the industry

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("Confounding results:", result.getObfuscatedCode())
Copy the code

So this is a code that confuses a simple addition code, and the result is

If you analyze it, you will find that there is actually a dictionary, all method variables, are stored in the dictionary, call the dictionary restore method name variables before execution

Js compressed

Compression used to be uglifyjs, but now terser is used more

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("Compression result:", result.code)
Copy the code

After compression, the results are as follows:

function add(d,n){return d+n}var v=add(1.2);console.log(v);
Copy the code

Turn all parameters into a single character, remove all space that can be reduced, and convert it into a line of code, maximizing the size of the code

CSS compression

CSS compression, I use clean-CSS, and of course there are a lot of great CSS plug-ins out there like PostCSS, but I’m going to show you a little bit about 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("Compression result:", output.styles)
Copy the code

The compressed result is as follows:

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

HTML compression

The htML-Minifier is the most common HTML compression plug-in in the industry. It is powerful and can compress JAVASCRIPT and CSS in HTML directly

We compress a piece of code with HTML, JS, and CSS

The code to perform compression is as follows:

const htmlMinify = require("html-minifier").minify
const result = htmlMinify(htmlCode, {
        minifyCSS: true./ / compress CSS
        minifyJS: true.Js / / compression
        collapseWhitespace: true.// Remove Spaces in HTML to achieve HTML compression
        removeAttributeQuotes: true.// If possible, remove the double quotes in HTML tags to achieve HTML compression
        removeComments: true.// Remove comments from HTML
        removeCommentsFromCDATA: true.// Comments removed from scripts and styles
    });
console.log("Compression result:", result)

Copy the code

The compression results are as follows:

<html><head><style>a{font-weight:700}.vb{border:1px silid red}</style></head><body><div class=foreword>Little tadpole, hee hee</div><script type=text/javascript>function add(d,n){return d+n}var v=add(1.2);console.log(v)</script></body></html>
Copy the code

By setting the corresponding configuration items minifyCSS and minifyJS, we directly compress THE HTML, JS and CSS together, which is very convenient

Unfortunately, it seems that htML-minifier doesn’t support JS obfuscation, so I’ll separate out the JS obfuscation

At the end

The plagiarism reflected the irregularities in the on-line process of our team

But for being copied by other teams, this kind of behavior can only be morally condemned here, grumble

Take it as a fall into the pit and learn from it, hee hee

More technical articles and source code analysis in github, welcome to clap brick github