# 🧩 CSSGuard
A powerful, **Open-source** JavaScript library that **protects** and **obfuscates** your CSS from theft and inspection.We first apply our raw **CSS-hiding** method to fully conceal the stylesheet, and then encode the result using the obfuscator.io library.
---
## ✨ Features
- 🔐 **Advanced CSS Encryption** - Multi-layer encryption & encoding
- 🌐 **Domain Lock** - Restrict CSS to specific domains only
- 🛡️ **DevTools Protection** - Blocks F12, Inspect Element, and right-click
- 🚫 **Debugger Detection** - Detects and prevents debugging attempts
- ⚡ **Auto Minification** - Automatically minifies CSS before encryption
- 🎯 **Easy Integration** - Simple API, just one function call
- 📦 **No Dependencies** - Works standalone (dynamically loads obfuscator)
- 🧠 **Obfuscation up to 1 MB**
---
## 📦 Installation
Add the library to your HTML file:
```html
```
That's it! The library will automatically load all required dependencies.
---
## 🎮 Live Demo
### Demo 1: No Domain Lock
```html
CSS Protector - No Domain Lock
```
### Demo 2: With Domain Lock
```html
CSS Protector - Domain Lock
```
---
## 📚 API Reference
### `CSSProtector.protect(cssCode, options)`
Protects and obfuscates CSS code.
#### Parameters
| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `cssCode` | String | ✅ Yes | Your CSS code to protect |
| `options` | Object | ❌ No | Configuration options |
#### Options Object
```javascript
{
lockToDomain: String | Array // Domain(s) to lock the CSS to
}
```
#### Supported Domain Formats
All formats are automatically normalized:
```javascript
'example.com' // ✅ Clean domain
'www.example.com' // ✅ With www
'https://example.com' // ✅ With protocol
'http://example.com' // ✅ HTTP protocol
'example.com/' // ✅ With trailing slash
'https://www.example.com/path' // ✅ With path
```
#### Return Value
Returns a `Promise` that resolves with the protected JavaScript code (string).
#### Usage Examples
```javascript
// Single domain
CSSProtector.protect(css, {
lockToDomain: 'example.com'
});
// Multiple domains
CSSProtector.protect(css, {
lockToDomain: ['example.com', 'subdomain.example.com', 'another.com']
});
// No domain lock
CSSProtector.protect(css);
```
---
## 🌐 Domain Lock Feature
### How It Works
When domain lock is enabled:
1. The protected CSS checks the current domain
2. Compares against allowed domain(s)
3. Only executes if domain matches
4. Shows error message if domain doesn't match
### Domain Matching Rules
- **www handling**: Both `example.com` and `www.example.com` are treated as the same
- **Subdomain support**: `blog.example.com` is different from `example.com`
- **Protocol agnostic**: Works with both HTTP and HTTPS
- **Path independent**: Works on any page of the domain
### Examples
```javascript
// Single domain
lockToDomain: 'mywebsite.com'
// ✅ Works on: mywebsite.com, www.mywebsite.com
// ❌ Blocked on: blog.mywebsite.com, other.com
// Multiple domains
lockToDomain: ['site1.com', 'site2.com', 'blog.site1.com']
// ✅ Works on all three domains
// ❌ Blocked on any other domain
// Subdomain specific
lockToDomain: 'blog.example.com'
// ✅ Works on: blog.example.com
// ❌ Blocked on: example.com, shop.example.com
```
---
## 💡 Best Practices
### 1. Development vs Production
```javascript
const isDev = window.location.hostname === 'localhost' ||
window.location.hostname === '127.0.0.1';
const options = isDev ? {} : {
lockToDomain: 'production-domain.com'
};
CSSProtector.protect(css, options)
.then(code => eval(code));
```
### 2. Error Handling
```javascript
CSSProtector.protect(css, options)
.then(protectedCode => {
eval(protectedCode);
console.log('✅ CSS protection successful');
})
.catch(error => {
console.error('❌ Protection failed:', error);
// Fallback: inject CSS normally
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
});
```
### 3. Large CSS Files
For very large CSS files, consider:
- Splitting into multiple smaller chunks
- Loading critical CSS first
- Using async/defer for non-critical CSS
```javascript
// Critical CSS (protect and load immediately)
CSSProtector.protect(criticalCSS)
.then(code => eval(code));
// Non-critical CSS (protect and load after page load)
window.addEventListener('load', () => {
CSSProtector.protect(nonCriticalCSS)
.then(code => eval(code));
});
```
### 4. Multiple CSS Files
```javascript
const cssFiles = {
layout: `/* layout CSS */`,
components: `/* components CSS */`,
utilities: `/* utilities CSS */`
};
Promise.all([
CSSProtector.protect(cssFiles.layout, options),
CSSProtector.protect(cssFiles.components, options),
CSSProtector.protect(cssFiles.utilities, options)
])
.then(protectedCodes => {
protectedCodes.forEach(code => eval(code));
});
```
---
## 🔧 Troubleshooting
### Common Issues
| Issue | Solution |
|-------|----------|
| CSS not loading | Check browser console for errors |
| Domain lock not working | Verify domain format is correct |
| Works on localhost but not production | Remove domain lock for localhost testing |
| Library not loading | Check CDN URL and internet connection |
| Protected code too large | Consider splitting CSS into smaller chunks |
### Debug Mode
```javascript
CSSProtector.protect(css, options)
.then(code => {
console.log('Protected code length:', code.length);
console.log('Original CSS length:', css.length);
eval(code);
})
.catch(error => {
console.error('Error details:', error);
console.error('CSS input:', css);
console.error('Options:', options);
});
```
### Checking If Protection Is Active
```javascript
// The protected code will block these actions:
// - F12 (blocked)
// - Ctrl+Shift+I (blocked)
// - Right-click (blocked)
// - Ctrl+U (blocked)
// Check in console:
console.log('CSSProtector loaded:', typeof CSSProtector !== 'undefined');
```
---
## ⚙️ static web protection
This project is also built with the same **CSS obfuscation library**
> [▶️ Test Site](https://web0x1.vercel.app/)
---
## 📄 License
License - **Free** to use in personal and commercial projects
---