soranoo / next-css-obfuscator

A package deeply inspired by PostCSS-Obfuscator but for Next.js.
https://next-css-obfuscator.vercel.app
MIT License
71 stars 3 forks source link

`Different` class names are but `Same` obfuscated name #18

Closed hoangnhan2ka3 closed 6 months ago

hoangnhan2ka3 commented 7 months ago

Version: v2.2.2 released

As the title:

Screenshot 2024-02-06 101425

I tried it twice so I think this is not a 1% random error case (cuz I don't know if this plugin supports making sure the class names won't overlap)

The .xjun0e class (aka .pr-[1.41dvw]) should be in <main> tag ✅:

image

Below, right where .side-box-line should be, there should be another obfuscated class name. But it has the same name as .pr-[1.41dvw] ⛔:

image

Note: .side-box-line is just a className, no direct styles were applied to it, it only gets styles through class like this `[&.side-box-line]:left-0and this class is also not in

` (I explain like this to avoid misunderstanding)_

That causes .side-box-line, which should look like this ✅:

image

to look like this ⛔:

image

The green color is the padding-right effect:

image

hoangnhan2ka3 commented 7 months ago

https://github.com/soranoo/next-css-obfuscator/assets/147973044/7d2cff1c-413a-4db1-a846-38fe17b30d91

This feature doesn't seem really stable yet, although I see this as a feature that would be really great 🤩.

This is the seed I used in the video:

module.exports = {
   ...
    generatorSeed: 848178188989999,
   ...
}

image

soranoo commented 7 months ago

A new issue was created. https://github.com/soranoo/recoverable-random/issues/1

hoangnhan2ka3 commented 6 months ago

Hi @soranoo, just because I'm too lazy to create a new issue, I'm commenting on the old bug here.

I think it's very rare that this happens, but is there any way to be sure it doesn't overlap anymore?

image

Package version 2.2.6

I just hope this patch won't change the class name again, because it seems like you'll be editing the recovery-random package.

My next-css-obfuscator.config.cjs:

module.exports = {
    enable: true, // Enable or disable the plugin.
    mode: "random", // Obfuscate mode, "random" or "simplify".
    buildFolderPath: ".next", // Build folder of your project.
    classConversionJsonFolderPath: "./css-obfuscator", // The folder path to store the before obfuscate and after obfuscated classes conversion table.
    refreshClassConversionJson: false, // Refresh the class conversion JSON file.

    classLength: 6, // Length of the obfuscated class name.
    classPrefix: "n", // Prefix of the obfuscated class name.
    classSuffix: "", // Suffix of the obfuscated class name.

    classIgnore: [
        "dark",
        "light",
        "no-transition",
        "opa-hidden",
        "big",
        "small",
        /__.*/,
        /os-scrollbar*/,
    ], // The class names to be ignored during obfuscation.

    allowExtensions: [".jsx", ".tsx", ".js", ".ts", ".html", ".rsc"], // The file extensions to be processed.

    contentIgnoreRegexes: [/\.jsxs\)\("\w+"/g], // The regexes to match the file content to be ignored during obfuscation.

    whiteListedFolderPaths: [], // Only obfuscate files in these folders

    blackListedFolderPaths: ["./.next/cache"], // Don't obfuscate files in these folders

    enableMarkers: false, // Enable or disable the obfuscate marker classes.
    markers: ["obf"], // Classes that indicate component(s) need to obfuscate.
    removeMarkersAfterObfuscated: true, // Remove the obfuscation markers from HTML elements after obfuscation.

    removeOriginalCss: true, // Delete original CSS from CSS files if it has a obfuscated version.

    generatorSeed: 84817818898, // The seed for the random generator.

    //! Experimental feature
    enableJsAst: false, // Whether to obfuscate JS files using abstract syntax tree parser (Experimental feature)

    logLevel: "info", // Log level
};
soranoo commented 6 months ago

It is not necessary to comment on both issues. It is redundant.

Any issue with random generation may related to the underlay random generation algo if a new algo is introduced the rng behaviour will be changed and a new class name will be generated.

If you want to keep the old class name for some reason, you can simply modify the JSON manually.

hoangnhan2ka3 commented 6 months ago

Added ClassName Duplication Check & New Random

Sounds cool!

Have you had time to push it to npm yet, or is there still work to be done?

I still think it's a good idea that you can have it check if there is a duplicate class in conversion.json and replace it with another random string.

However, I still wonder if I'm that unlucky, in

$36^6 = 2,176,782,336$

possible cases, I have 2 overlapping classes... or is it called luck?

soranoo commented 6 months ago

I found I forgot to pull it Sorry about that.

Do you mean the collision before the update?

hoangnhan2ka3 commented 6 months ago

Yes, in v2.2.6

hoangnhan2ka3 commented 6 months ago

🤔

image image
soranoo commented 6 months ago

You have to use string seed.

hoangnhan2ka3 commented 6 months ago

omg when did I remove the " from generatorSeed😂, sorry for the brainless question.

soranoo commented 6 months ago

If it is no dulipcation report after 24hrs I will close this issue.

But plz feel free to comment here if it happened again.

hoangnhan2ka3 commented 6 months ago

It seems like this bug needs to wait until someone "lucky" encounters the same situation as I mentioned above to be sure it works haha

hoangnhan2ka3 commented 6 months ago

Bruhh, I understand how you feel when you comment on the postcss-obfuscator project and get no response, so much so that you had to create this project.

No need to wait anymore, I'm the "lucky" one 🤣

soranoo commented 6 months ago

Yes, exactly. So I try my best to give response in any format to let the issue raiser know "someone" is care about it.