|
| 1 | +# Email Supervision Dashboard |
| 2 | + |
| 3 | +A secure, read-only email supervision dashboard built with Next.js for monitoring IMAP mailboxes. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +- **Read-only access** - View emails without ability to send, reply, or delete |
| 8 | +- **Multi-account support** - Monitor multiple email accounts from one interface |
| 9 | +- **Secure authentication** - Master password with bcrypt hashing and rate limiting |
| 10 | +- **IMAP only** - Server-side IMAP connections, no SMTP |
| 11 | +- **Content sanitization** - HTML emails sanitized to prevent XSS |
| 12 | +- **Security hardened** - CSP, HSTS, CSRF protection, and more |
| 13 | +- **High performance** - Aggressive caching, client-side processing, smart preloading |
| 14 | + |
| 15 | +## Security |
| 16 | + |
| 17 | +This application is designed with security as the top priority. See [SECURITY.md](./SECURITY.md) for complete security |
| 18 | +documentation. |
| 19 | + |
| 20 | +**Key security features:** |
| 21 | + |
| 22 | +- All IMAP operations server-side only |
| 23 | +- No credentials exposed to client |
| 24 | +- Rate limiting on all endpoints |
| 25 | +- Comprehensive security headers |
| 26 | +- HTML sanitization with sanitize-html |
| 27 | +- CSRF protection for state changes |
| 28 | + |
| 29 | +## Quick Start |
| 30 | + |
| 31 | +### Prerequisites |
| 32 | + |
| 33 | +- Node.js 18+ |
| 34 | +- IMAP email account(s) with credentials |
| 35 | + |
| 36 | +### Installation |
| 37 | + |
| 38 | +1. Clone the repository |
| 39 | +2. Install dependencies: |
| 40 | + |
| 41 | + ```bash |
| 42 | + npm install |
| 43 | + ``` |
| 44 | + |
| 45 | +3. Set up configuration (see Configuration below) |
| 46 | + |
| 47 | +4. Run development server: |
| 48 | + |
| 49 | + ```bash |
| 50 | + npm run dev |
| 51 | + ``` |
| 52 | + |
| 53 | +5. Open [http://localhost:3000](http://localhost:3000) |
| 54 | + |
| 55 | +## Configuration |
| 56 | + |
| 57 | +### 1. Environment Variables |
| 58 | + |
| 59 | +Set up environment variables (`.env.local` for development, or in Vercel dashboard for production): |
| 60 | + |
| 61 | +```bash |
| 62 | +# Generate with: node -e "const bcrypt = require('bcryptjs'); bcrypt.hash('your-password', 10).then(console.log)" |
| 63 | +MASTER_PASSWORD_BCRYPT_HASH=your-bcrypt-hash-here |
| 64 | + |
| 65 | +# Generate with: openssl rand -base64 32 |
| 66 | +SESSION_SECRET=your-random-secret-here |
| 67 | + |
| 68 | +# IMAP Configuration (base64-encoded JSON) |
| 69 | +# Create your JSON config, then encode: Buffer.from(JSON.stringify(config)).toString('base64') |
| 70 | +IMAP_CONFIG=base64-encoded-json-here |
| 71 | +``` |
| 72 | + |
| 73 | +### 2. IMAP Configuration Details |
| 74 | + |
| 75 | +The `IMAP_CONFIG` environment variable accepts a base64-encoded JSON string with the following structure: |
| 76 | + |
| 77 | +**First, create your JSON configuration:** |
| 78 | + |
| 79 | +```json |
| 80 | +{ |
| 81 | + "accounts": [ |
| 82 | + { |
| 83 | + "id": "unique-account-id", |
| 84 | + "label": "Display Name", |
| 85 | + "imap": { |
| 86 | + "host": "imap.example.com", |
| 87 | + "port": 993, |
| 88 | + "secure": true, |
| 89 | + "user": "your-email@example.com", |
| 90 | + "password": "your-password" |
| 91 | + } |
| 92 | + } |
| 93 | + ] |
| 94 | +} |
| 95 | +``` |
| 96 | + |
| 97 | +**Then encode it to base64:** |
| 98 | + |
| 99 | +```javascript |
| 100 | +const config = { |
| 101 | + "accounts": [...] |
| 102 | +}; |
| 103 | +const base64Config = Buffer.from(JSON.stringify(config)).toString('base64'); |
| 104 | +console.log(base64Config); |
| 105 | +``` |
| 106 | + |
| 107 | +**Example with multiple accounts:** |
| 108 | + |
| 109 | +```json |
| 110 | +{ |
| 111 | + "accounts": [ |
| 112 | + { |
| 113 | + "id": "it", |
| 114 | + "label": "IT Department", |
| 115 | + "imap": { |
| 116 | + "host": "imap.wesmun.com", |
| 117 | + "port": 993, |
| 118 | + "secure": true, |
| 119 | + "user": "it@wesmun.com", |
| 120 | + "password": "your-app-password" |
| 121 | + } |
| 122 | + }, |
| 123 | + { |
| 124 | + "id": "finance", |
| 125 | + "label": "Finance", |
| 126 | + "imap": { |
| 127 | + "host": "imap.wesmun.com", |
| 128 | + "port": 993, |
| 129 | + "secure": true, |
| 130 | + "user": "finance@wesmun.com", |
| 131 | + "password": "your-app-password" |
| 132 | + } |
| 133 | + } |
| 134 | + ] |
| 135 | +} |
| 136 | +``` |
| 137 | + |
| 138 | +**Common IMAP Settings:** |
| 139 | + |
| 140 | +- **Gmail / Google Workspace (including custom domains)**: |
| 141 | + - Host: `imap.gmail.com` |
| 142 | + - Port: `993` |
| 143 | + - Secure: `true` |
| 144 | + - Note: You must enable "App Passwords" in Google Account settings |
| 145 | + |
| 146 | +- **Outlook / Office 365 (including custom domains)**: |
| 147 | + - Host: `outlook.office365.com` |
| 148 | + - Port: `993` |
| 149 | + - Secure: `true` |
| 150 | + |
| 151 | +- **Yahoo Mail**: |
| 152 | + - Host: `imap.mail.yahoo.com` |
| 153 | + - Port: `993` |
| 154 | + - Secure: `true` |
| 155 | + |
| 156 | +- **Custom IMAP Server** (like your own domain's mail server): |
| 157 | + - Host: Your mail server hostname (e.g., `imap.yourdomain.com` or `mail.yourdomain.com`) |
| 158 | + - Port: Usually `993` (SSL/TLS) or `143` (STARTTLS) |
| 159 | + - Secure: `true` for port 993, check your server docs for port 143 |
| 160 | + - User: Your full email address |
| 161 | + - Password: Your email password or app-specific password |
| 162 | + |
| 163 | +**Note**: With base64 encoding, special characters in passwords (like `$`, `#`, `!`) are automatically handled - no |
| 164 | +escaping needed! |
| 165 | + |
| 166 | +See [SECURITY.md](./SECURITY.md) for detailed configuration instructions. |
| 167 | + |
| 168 | +## Deployment |
| 169 | + |
| 170 | +### Vercel (Recommended) |
| 171 | + |
| 172 | +1. Push code to GitHub |
| 173 | +2. Import project to Vercel |
| 174 | +3. Add environment variables in Vercel dashboard: |
| 175 | + - `MASTER_PASSWORD_BCRYPT_HASH` - Your bcrypt password hash |
| 176 | + - `SESSION_SECRET` - Random secret for sessions |
| 177 | + - `IMAP_CONFIG` - Your IMAP configuration JSON (single line) |
| 178 | +4. Deploy |
| 179 | + |
| 180 | +### Docker |
| 181 | + |
| 182 | +```bash |
| 183 | +docker build -t email-supervision . |
| 184 | +docker run -p 3000:3000 --env-file .env.local email-supervision |
| 185 | +``` |
| 186 | + |
| 187 | +### Self-hosted |
| 188 | + |
| 189 | +```bash |
| 190 | +npm run build |
| 191 | +npm start |
| 192 | +``` |
| 193 | + |
| 194 | +## Tech Stack |
| 195 | + |
| 196 | +- **Framework**: Next.js 16 (App Router) |
| 197 | +- **Authentication**: bcryptjs + JWT |
| 198 | +- **IMAP**: node-imap + mailparser |
| 199 | +- **Sanitization**: sanitize-html |
| 200 | +- **UI**: React + Tailwind CSS + shadcn/ui |
| 201 | +- **TypeScript**: Full type safety |
| 202 | + |
| 203 | +## Project Structure |
| 204 | + |
| 205 | +``` |
| 206 | +├── app/ |
| 207 | +│ ├── api/ # API routes |
| 208 | +│ ├── login/ # Login page |
| 209 | +│ └── page.tsx # Dashboard |
| 210 | +├── components/ # React components and UI |
| 211 | +├── types/ # TypeScript types |
| 212 | +├── lib/ |
| 213 | +│ ├── auth.ts # Authentication |
| 214 | +│ ├── csrf.ts # CSRF protection |
| 215 | +│ ├── rate-limit.ts # Rate limiting |
| 216 | +│ ├── ui.ts # UI CN Function |
| 217 | +│ ├── imap-config.ts # IMAP configuration parsing |
| 218 | +│ └── imap-service.ts # IMAP service |
| 219 | +│ |
| 220 | +├── .env # Environment variables file to be imported (git ignored) |
| 221 | +├── proxy.ts # Middleware |
| 222 | +└── SECURITY.md # Security notes |
| 223 | +``` |
| 224 | + |
| 225 | +## Contributing |
| 226 | + |
| 227 | +This is an open-source project. Contributions are welcome, but please: |
| 228 | + |
| 229 | +1. Read [SECURITY.md](./SECURITY.md) first |
| 230 | +2. Never commit credentials or secrets |
| 231 | +3. Follow existing security patterns |
| 232 | + |
| 233 | +## Disclaimer |
| 234 | + |
| 235 | +This software is provided as-is with no warranty. Use at your own risk. Always review the code and security practices |
| 236 | +before deploying in production. |
| 237 | + |
| 238 | +## Support |
| 239 | + |
| 240 | +For security issues, please email the maintainer directly. For other issues, open a GitHub issue. |
0 commit comments