Skip to content

Commit d35156b

Browse files
n4j1Br4ch1Dn4j1Br4ch1D
committed
publish v 1.4.0 Beta
1 parent 7f74349 commit d35156b

20 files changed

+1161
-0
lines changed

‎.gitignore

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
test/demo/build
13+
test/demo/out
14+
test/demo/css-obsucator
15+
16+
# misc
17+
.DS_Store
18+
.env.local
19+
.env.development.local
20+
.env.test.local
21+
.env.production.local
22+
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# personalFiles & localFiles
28+
/MYFILES

‎.npmignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/test
2+
/assets

‎README.md

+300
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,300 @@
1+
<a href="#Intro" title="Section Intro">Intro</a>➤<a href="#Motivation" title="Section Motivation">Motivation</a>➤<a href="#Features" title="Section Features">Features</a>➤<a href="#Installation" title="Section Installation">Installation</a>➤<a href="#Usage" title="Section Usage">Usage</a>➤<a href="#Configuration" title="Section Configuration">Configuration</a>➤<a href="#Extras" title="Section Extra">Extra</a>➤<a href="#Releases" title="Section Releases">Releases</a>➤<a href="#Contributing" title="Section Contributing">Contributing</a>
2+
# :space_invader: PostCSS Obfuscator
3+
- :date:**19-22-2023** :pushpin:**Beta Version 1.4.0**
4+
- :computer:<a href="https://github.com/n4j1Br4ch1D" target="_blank" title="NajibRachid: Agile full-stack developer">NajibRachid</a> :purple_circle:<a href="https://anmoonweb.com/?ref=postcss-obfuscator" target="_blank" title="ANMOON: Right talents at the right place ">ANMOON</a> :office: <a href="https://x-hub.io/?ref=anmoon-postcss-obfuscator" target="_blank" title="XHUB: For Developers By Developers">XHUB</a>
5+
6+
<img src="https://raw.githubusercontent.com/n4j1Br4ch1D/postcss-obfuscator/main/assets/postcss-obfuscator.png" alt="postcss-obfuscator cli">
7+
8+
PostCSS plugin that helps you protect your CSS code by obfuscating class names and divs. with customizable configuration.
9+
10+
This plugin provides obfuscation capabilities to your CSS files by replacing class and id selectors with prefixed, simpliied or randomly generated strings. This can help to protect your CSS code from reverse engineering and unauthorized copying, while also reducing the file size of your CSS files. plugin offers advanced customizable configuration.
11+
12+
**keywords:** _postcss, plugin, obfuscation, css, css classes, class renamer, postcss-rename-selectors, class prefixer, Postcss obfuscator, PostCSS obfuscation plugin, CSS obfuscation, Class name scrambling, CSS security, Obfuscate CSS code, Protect CSS code, Prevent CSS reverse-engineering, tailwindcss, tailwindcss classes list, tailwindcss classes array json, bootstrap, bootstrap classes array json, Scramble HTML classes, CSS anti-theft protection, code privacy, CSS code obfuscator, CSS class name encryption, anti web scraping, Anti-scraping tools, Anti-scraping technology, Web scraping prevention, Web crawling protection._
13+
14+
**Check Also:** <a href="https://github.com/n4j1Br4ch1D/postcss-prependr" target="_blank" title="postcss-prepend:prepends a comment to the top of your CSS files">PostCSS-prepend</a>
15+
16+
**Turn This into this:**
17+
18+
<div style="display:flex">
19+
<img src="https://raw.githubusercontent.com/n4j1Br4ch1D/postcss-obfuscator/main/assets/json-Obfuscation.png" alt="json-Obfuscation" height="400" width="500"/>
20+
<img src="https://raw.githubusercontent.com/n4j1Br4ch1D/postcss-obfuscator/main/assets/css-Obfuscation.png" alt="css-Obfuscation" height="400" width="500"/>
21+
<img src="https://raw.githubusercontent.com/n4j1Br4ch1D/postcss-obfuscator/main/assets/html-Obfuscation.png" alt="html-Obfuscation" height="400" width="500"/>
22+
<img src="https://raw.githubusercontent.com/n4j1Br4ch1D/postcss-obfuscator/main/assets/react-Obfuscation.png" alt="react-Obfuscation" height="400" width="500"/>
23+
</div>
24+
25+
---
26+
27+
## Motivation
28+
- Protecting Intellectual Property, Licensing and Distribution: make it hard for others from stealing it or using it without your permission.
29+
- Protect against Web scraping, data mining or any malicious activities like stealing data or content: make it hard extracting data from websites automatically using software tools, which use class names & ids.
30+
- Minfiy Your code even more: obsfucation/uglify can slightly reduce file size and improve its performance.
31+
32+
## Features
33+
- [x] No 3rd parties, Dependencies. Just vanilla Nodejs code.
34+
- [x] Quicker then you think.
35+
- [X] Postcss plugin, hence its intended to work with any build tool or task runner.
36+
- [x] Advanced Customizable configuration (Control is yours).
37+
- [X] Supports all files: .html, .js, .and, .php, .vue, ... you name it.
38+
- [x] Supports a wide range of CSS frameworks (Tailwidcss, bootstrap, Bulma).
39+
## Installation
40+
41+
```sh
42+
# npm
43+
npm install postcss-obfuscator --save-dev
44+
```
45+
46+
```sh
47+
# yarn
48+
yarn add postcss-obfuscator --dev
49+
```
50+
51+
## Usage
52+
First, you need to add postcss-obfuscate to your PostCSS configuration. For example, if you're using postcss-cli, you can add it to your postcss.config.js file:
53+
54+
```js
55+
//postcss.config.js
56+
module.exports = {
57+
plugins: [
58+
require('postcss-obfuscate')({
59+
/* options */
60+
})
61+
]
62+
}
63+
```
64+
65+
You can also make you own custome separate script like so:
66+
67+
First install postcss:
68+
69+
```sh
70+
#npm
71+
npm i postcss --save-dev
72+
73+
#yarn
74+
yarn add postcss --dev
75+
```
76+
Then require postcss and postcss-obfuscator plugin in your script:
77+
78+
```js
79+
//postcss-obfuscate.js
80+
const postcss = require("postcss");
81+
const obfuscator = require("postcss-obfuscator");
82+
83+
postcss([obfuscator({
84+
/* options */
85+
})])
86+
.process(css)
87+
.then((result) => {
88+
console.log("Task Completed!", result);
89+
})
90+
.catch((error) => {
91+
console.error(error);
92+
});
93+
94+
95+
```
96+
97+
## Configuartion
98+
99+
The plugin has several options that you can configure to customize its behavior. Here are the available options:
100+
- **enable:** Enable plugin, __default is true.__
101+
- **length:** Random name length for both ids and classes, __default is 5.__
102+
- **classMethod:** Obfuscation method for classes, options are: 'random', 'simple', 'none'. 'simple' will remove pronounced vowels and digits, 'none' will keep original name in case you want to just use prefixes or suffixes. __deafult is 'random'.__
103+
- **classPrefix:** Prefix for class names, __default is nothig.__
104+
- **classSuffix:** Suffix for class names, __default is nothig.__
105+
- **classIgnore:** Array of classes to ignore from obfuscation. __deafult is none.__
106+
- **ids:** Enable id Obfuscation, __default is false.__
107+
- **idMethod:** Obfuscation method for ids, options are: 'random', 'simple', 'none', __deafult is 'random'._
108+
- **idPrefix:** Prefix for id names, __default is nothig.__
109+
- **idSuffix:** Suffix for id names, __default is nothig.__
110+
- **idIgnore:** Array of ids to ignore from obfuscation. __deafult is none.__
111+
- **indicator:** Indicator used to replace names. __default is none.__
112+
- **jsonsPath:** Path and Name where to save obfuscation data __default is: css-obsucator.__
113+
- **srcPath:** Path for your source files, __default is: src.__
114+
- **desPath:** Destination Path for obfuscated html/js/.. files, __default is: out__.
115+
- **extensions:** Extesnions Array of files you want osbfucated ['.html', '.php', '.js', '.svelte'], __default is none.__
116+
- **htmlExcludes:** Files and paths to exclude from html obfuscation replacement, __default is none.__
117+
- **cssExcludes:** Files and paths to exclude from css obfuscation, __default is none.__
118+
- **fresh:** Create New obfuscation data List or use already existed one (to keep Production Cache or prevent data scrapping). __deafult is false.__
119+
- **multi:** Generate obsfucated data file for each css file, __default is false.__
120+
- **differMulti:** Generate differnt Raandom names for each file, __default is false.__
121+
- **formatJson:** Format obfuscation data JSON file, __default is false.__
122+
- **showConfig:** Show config on terminal when runinng, __default is false.__
123+
- **keepData:** Keep or delete Data after osbfucation is finished? __default is true.__
124+
- **callBack:** Callback function to call after obfuscation is done. __default is an empty function__
125+
126+
**Here's the default donfiguration:**
127+
128+
129+
```js
130+
const defaultOptions = {
131+
enable: true, // Enable plugin
132+
length: 5, // Random name length.
133+
classMethod: 'random', // 'random', 'simple', 'none' obfuscation method for classes.
134+
classPrefix: "", // ClassName prefix.
135+
classSuffix: "", // ClassName suffix.
136+
classIgnore: [], // Class to ignore from obfuscation.
137+
ids: false, // Obfuscate #IdNames.
138+
idMethod: 'random', // 'random', 'simple', 'none' obfuscation method for ids .
139+
idPrefix: "", // idName Prefix.
140+
idSuffix: "", // idName suffix.
141+
idIgnore: [], // Ids to ignore from obfuscation.
142+
indicator: null, // Indicator used to replace names.
143+
jsonsPath: "css-obsucator", // Path and Name where to save obfuscation data.
144+
srcPath: "src", // Source of your files.
145+
desPath: "out", // Destination for obfuscated html/js/.. files.
146+
extensions: [], // Extesnion of files you want osbfucated ['.html', '.php', '.js', '.svelte'].
147+
htmlExcludes: [], // Files and paths to exclude from html obfuscation replacement.
148+
cssExcludes: [], // Files and paths to exclude from css obfuscation.
149+
fresh: false, // Create New obfuscation data List or use AlreadyExistedOne (to keep Production Cache or prevent data scrapping).
150+
multi: false, // Generate obsfucated data file for each css file.
151+
differMulti: false, // Generate differnt Raandom names for each file.
152+
formatJson: false, // Format obfuscation data JSON file.
153+
showConfig: false, // Show config on terminal when runinng.
154+
keepData: true, // Keep or delete Data after osbfucation is finished?
155+
callBack: function () {console.log("Call Me back! ;)");} // Callback function to call after obfuscation is done.
156+
};
157+
158+
```
159+
160+
## npm scripts example
161+
Then npm scripts can be something like this:
162+
163+
```json
164+
"postcss": "postcss src/**/*.css --dir build",
165+
"postcss:watch": "postcss src/**/*.css --dir build --watch"
166+
"obfuscate": "node postcss-obfuscate", // for custome script.
167+
```
168+
## Extras
169+
170+
### How it Works Basicly?
171+
1. Loop over all css files.
172+
2. Uses Buildting fucntion(regex) to find classes & ids.
173+
3. Saves Ids & classes in a Json file key represting orginal Names. then genarates random names as values.
174+
4. Creates new folder from source folder.
175+
5. Loops throw files and replaces those keys with values from JSON File.
176+
177+
### Caveats?
178+
- Only CSS Supported so call the extension After your code was converted to css (Example: scss to css). Its genarlly better to call at as the last plugin.
179+
- One of best practices is to avoid naming your ids & classes reserved words like html elemnts name or attributes. (same for JS & CSS).
180+
- It uses builting function to find divs & css classes. so it may not work perfectly with advanced CSS selectors.
181+
- I advice to keepData as deafult true and to use a diffrent build directory: using same directory will replace your files and you may loose orginal classes and ids names. you will get a warning for that.
182+
- Postcss doesnt support nested dirctories by default. this is If u intend to work with the plugin's multi option.
183+
184+
### Enable based on environment mode
185+
186+
To use based on environment mode variable you may do so like this:
187+
188+
```js
189+
const isDevMode = process.env.NODE_ENV === 'development'; // production
190+
191+
enable: isDevMode, // Force Run on Dev Env or when srcPath equals desPath.
192+
```
193+
194+
### Destination Folder:
195+
Its Better to keep your source files as they are for easy development. Consider specifing another folder for build, if you choose your build directory to be same as source directory you will be replaced and you will loose your orginal files.
196+
197+
### Use Indicators?
198+
### Use Indicators?
199+
As mentioned this plugin uses Regex to replace all apperances of classes & ids on files with extension you specify (be it html, cs, js, ...).
200+
Generally if your classes names are unique and avoids reserved keywords, then you got nothing to worry about, otherwise, we got you covered just use the indicator option
201+
202+
```js
203+
indicator: "@",
204+
```
205+
Now whenever you mention your ids or classes use like this: so it will only replace ones with the indicator around them.
206+
207+
```html
208+
<script>
209+
let anotherClass = "@anotherClass@"
210+
</script>
211+
<div class="@myClass@">MyClass</div>
212+
```
213+
### Support for css Framworks?
214+
- In Beta Tests so far it working fine but we always working on improvements.
215+
- Tailwindcss: few issues are to be fixed very soon.
216+
- Bootstrap
217+
- Bulma
218+
219+
### How To Use With?
220+
221+
#### laravel
222+
#### react/nextjs
223+
224+
## Releases
225+
226+
```txt
227+
- Initial Version 1.0.0 : 18/02/2023
228+
- Project Setup.
229+
- Theory & prove of concept.
230+
- Initial Version 1.0.3 : 19/02/2023
231+
- Essential default confugration options (length, jsonPath, placeholder).
232+
- Settled on a no dependcies solution. built own parser.
233+
- Developing class finder function.
234+
- Initial Version 1.0.7 : 20/02/2023
235+
- Set confugration options.
236+
- Introduce Id obsfucation.
237+
- Add prefixers option.
238+
- Add suffixes option.
239+
- Initial Version 1.0.9 : 21/02/2023
240+
- Add srcPath option.
241+
- Add desPath option.
242+
- Initial Version 1.1.2 : 21/02/2023
243+
- Improving class finder method regex.
244+
- Add showConfig Option.
245+
- Add formatJson Option.
246+
- Alpha Version 1.1.5 : 22/02/2023
247+
- Introducing the Multi option.
248+
- Refactor & improve code performance.
249+
- Introduce CLI UI.
250+
- Alpha Version 1.1.8 : 23/02/2023
251+
- Introducing the fresh option.
252+
- Introducing the keepSame option.
253+
- Adding Logger & logs.
254+
- Alpha Version 1.2.2 : 24/02/2023
255+
- Introducing the callback option.
256+
- Adding proccess stats/data log.
257+
- Use a copy method solution.
258+
- Improve Replace Regex (exclude HTML attributes).
259+
- Alpha Version 1.2.6 : 24/02/2023
260+
- Adding Indicator option.
261+
- deprecate keepSame option.
262+
- Introduce the differMulti option.
263+
- Make keepData true as default.
264+
- Alpha Version 1.3.2 : 25/02/2023
265+
- Add extensions options.
266+
- fix differMulti option Bug(class repeation).
267+
- Deprecate placeholder option.
268+
- Introducing ExcludeCss option.
269+
- Introducing ExcludeHTML option.
270+
- Fix Edge case (Css file count).
271+
- Alpha Version 1.3.4 : 26/02/2023
272+
- Fix Files Count (count diffrent extensions).
273+
- Improve simplify function (add random letter if <1).
274+
- Alpha Version 1.3.8 : 27/02/2023
275+
- Add idIgnore/classIgnore Option,
276+
- Add classMethod option (random/simplify/none).
277+
- Fix issue (delete data wrong path).
278+
- Fix bug (Find multiple Ids).
279+
- Beta Version 1.4.0 : 28/02/2023
280+
- Improve Exclude Css Option allow Paths.
281+
- Improve Exclude HTML Option allow Paths.
282+
- [Agenda] Beta Version 1.4.1 : 01/03/2023
283+
-Fix Error copying directory: Invalid regular expression: /(?<!</?)\b(sm\:group-hover\)\b(?!=)/: Unterminated
284+
group
285+
286+
```
287+
288+
## Contributing
289+
290+
Contributions are welcome! If you find a bug or have a feature request, please open an issue on the GitHub repository.
291+
292+
Tests included:
293+
294+
```sh
295+
npm test
296+
```
297+
298+
### License
299+
300+
This project is licensed under the MIT License. See the LICENSE file for more information. Feel free to use it in your own projects, or contribute to its development on GitHub.

‎assets/css-obsfuscation,png.png

98.2 KB
Loading

‎assets/html-obsfuscation.png

125 KB
Loading

‎assets/json-obsfuscation,png.png

40.4 KB
Loading

‎assets/postcss-obfuscator.png

16.2 KB
Loading

‎assets/react-obsfuscation.png

63.7 KB
Loading

0 commit comments

Comments
 (0)