DEV Community: Bhutto Sahab

How to Remove Location Data From a Photo (Step by Step)

Bhutto Sahab — Fri, 16 Oct 2026 04:28:44 +0000

You take a photo at home, send it to a stranger online, and without knowing it, you may also send them your address.

That sounds dramatic, but it is simple to explain. Most phone photos carry a block of hidden information called EXIF metadata. It can include the date, the phone model and, if location is switched on, the GPS coordinates of where you stood when you took the picture.

This guide shows you how to check a photo, how to remove the location data, and what you still need to watch out for.

Disclosure: I build PrivacyKit, a free browser tool that I mention near the end. Every step before that works without it.

Do photos really contain your location?

Often, yes. If the camera app has permission to use location, it writes the coordinates into the file. Anyone who gets the original file can read them with a free viewer.

Many big social networks remove this data when you upload a photo. But you should not count on it. Email attachments, cloud links and some chat apps can pass the original file along, location included.

How to check if a photo has GPS data
Windows: Right-click the file, choose Properties, then open the Details tab. Look for GPS with latitude and longitude.
Mac: Open the photo in Preview, go to Tools → Show Inspector, and look for a GPS tab. If there is no tab, there is no location data.
iPhone: Open the photo in Photos and swipe up. A small map means a location is saved.
Android: Open the photo in your gallery or Google Photos and tap the info icon.
How to remove location data from a photo
On iPhone
Open the photo and tap the Share button.
Tap Options at the top of the share sheet.
Turn off Location.
Send or save the copy.

The photo you send will not have the coordinates. The original stays unchanged on your phone.

On Windows
Right-click the photo and choose Properties.
Open the Details tab.
Click Remove Properties and Personal Information.
Choose Remove the following properties from this file and tick the GPS fields. Or create a copy with all possible properties removed.
On Mac
Open the photo in Preview.
Go to Tools → Show Inspector and open the GPS tab.
Click Remove Location Info.
On Android

Android phones differ, so the exact menu names can vary. The usual options are:

Open your Camera app's settings and turn off Location tags (sometimes called Save location), so new photos are not tagged.
For photos you already took, use a metadata remover app or a browser tool, since many gallery apps cannot edit this data.
In your browser (any device)

If you do not want to click through menus, you can use an online EXIF remover. I made the PrivacyKit EXIF and GPS remover. You drop in a photo, see what metadata it holds, and download a clean copy. It runs inside your browser, so the photo is not uploaded to a server. You do not have to take my word for it: open your browser's developer tools, go to the Network tab, and watch for upload requests while you use any tool like this.

Stop recording location in the first place

If you rarely need GPS tags, switch them off at the source:

iPhone: Settings → Privacy & Security → Location Services → Camera → Never
Android: Camera app → Settings → turn off Location tags

You can still turn location on later for trips. Just remember to turn it off again.

What removing metadata does not fix

Cleaning the file is good, but it is not magic. A photo can still give away where you are through what you can see in it:

street signs or house numbers
a recognizable view from a window
reflections in glass or sunglasses
shop names or landmarks in the background

Look at the picture itself before you post it. If something shows your location, crop it or blur it.

Quick checklist
Check the photo's properties for GPS data.
Remove the location with a built-in option or a browser tool.
Open the new copy and check again.
Look at what the image itself shows.
Keep the original private if you need the location for yourself.
FAQ

Does removing EXIF data reduce image quality? Removing metadata only deletes the hidden information. The pixels stay the same, so the picture looks identical.

Does WhatsApp or Instagram remove location data? Many apps strip it from the version other people see, but behavior can change and depends on how you send the file. Sending a photo as a "document" or file often keeps the original data. Clean the file yourself if it matters.

Can I add the location back later? Only if you kept the original. Always work on a copy.

Is it legal to share a photo with someone's location in it? That depends on where you live and on what you share. When in doubt, remove it, and ask people before you post pictures of them.

If you want more detail, I wrote a longer guide on removing hidden GPS location from photos.

Building Zero-Trust Privacy Utilities with Web Crypto API & Canvas (Zero Backend, 100% In-Browser)

Bhutto Sahab — Tue, 06 Oct 2026 13:49:04 +0000

Every developer uses online file and text utilities daily: PDF metadata scrubbers, photo EXIF strippers, AES-256 encryptors, and prompt cleaners.

However, a serious architectural flaw exists across most legacy web utilities: your sensitive files and tokens get transmitted to a remote backend server for processing. Whether it's an authorization bearer token, a confidential legal PDF, or a photo with embedded GPS coordinates, trusting a third-party server creates unnecessary security liability.

In this guide, we'll explore how modern browser APIs—specifically the Web Cryptography API (SubtleCrypto) and HTML5 Canvas 2D API—allow us to build high-performance, military-grade security utilities that run 100% in client-side RAM with zero server infrastructure.

1. AES-256-GCM Encryption with PBKDF2 (Native Web Crypto)

Instead of pulling heavy NPM packages like CryptoJS, modern browsers ship with hardware-accelerated cryptographic primitives via window.crypto.subtle.

Here is a production-ready TypeScript implementation that derives a 256-bit key using PBKDF2 with 250,000 SHA-256 iterations and encrypts plaintext using AES-GCM (Authenticated Encryption with Associated Data):

export async function encryptClientSide(plaintext: string, passphrase: string): Promise<string> {
  const enc = new TextEncoder();
  const salt = window.crypto.getRandomValues(new Uint8Array(16));
  const iv = window.crypto.getRandomValues(new Uint8Array(12)); // 96-bit IV for GCM

  // 1. Import raw passphrase into CryptoKey
  const keyMaterial = await window.crypto.subtle.importKey(
    'raw',
    enc.encode(passphrase),
    { name: 'PBKDF2' },
    false,
    ['deriveKey']
  );

  // 2. Derive strong AES-256 key with 250,000 PBKDF2 iterations
  const key = await window.crypto.subtle.deriveKey(
    {
      name: 'PBKDF2',
      salt: salt,
      iterations: 250000,
      hash: 'SHA-256',
    },
    keyMaterial,
    { name: 'AES-GCM', length: 256 },
    false,
    ['encrypt', 'decrypt']
  );

  // 3. Encrypt payload
  const encryptedBuffer = await window.crypto.subtle.encrypt(
    { name: 'AES-GCM', iv },
    key,
    enc.encode(plaintext)
  );

  // 4. Pack Salt + IV + Ciphertext into single Base64 bundle
  const combined = new Uint8Array(salt.length + iv.length + encryptedBuffer.byteLength);
  combined.set(salt, 0);
  combined.set(iv, salt.length);
  combined.set(new Uint8Array(encryptedBuffer), salt.length + iv.length);

  return btoa(String.fromCharCode(...combined));
}

Why AES-GCM Over AES-CBC?

AES-GCM is an AEAD cipher that includes built-in tamper detection (128-bit authentication tag). If a single bit in the ciphertext is altered or if the decryption passphrase is incorrect, crypto.subtle.decrypt() automatically throws a cryptographic exception. This eliminates the need for custom HMAC verification and protects against padding oracle vulnerabilities.

2. In-Browser Forensic EXIF Stripping via Canvas Rasterization

Removing GPS coordinates, camera serial numbers, and thumbnail previews from JPEG/PNG images can be done without server-side ImageMagick or Node.js backends.

By drawing the image onto an offscreen HTML5 <canvas> element and re-encoding it into a fresh raster blob, all ancillary EXIF, TIFF, and XMP metadata blocks are stripped cleanly in browser RAM:

export async function stripExifClientSide(imageFile: File): Promise<Blob> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const objectUrl = URL.createObjectURL(imageFile);

    img.onload = () => {
      URL.revokeObjectURL(objectUrl);
      const canvas = document.createElement('canvas');
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;

      const ctx = canvas.getContext('2d');
      if (!ctx) return reject(new Error('Canvas 2D context unavailable'));

      ctx.drawImage(img, 0, 0);
      canvas.toBlob(
        (blob) => {
          if (blob) resolve(blob);
          else reject(new Error('Blob generation failed'));
        },
        imageFile.type,
        0.95
      );
    };

    img.onerror = () => reject(new Error('Image failed to load'));
    img.src = objectUrl;
  });
}

3. Two-Way AI Prompt Sanitization (Mask & Restore PII)

When sending internal source code, error logs, or confidential documents to LLMs like ChatGPT or Claude, Personally Identifiable Information (PII) such as emails, IP addresses, and API keys must be intercepted before transmission.

The Two-Way Masking Workflow:

Interception: A client-side regex engine replaces sensitive patterns with synthetic tokens ([EMAIL_1], [IP_1], [API_KEY_1]).
Local Session Map: A temporary Map<string, string> stores the mapping strictly in volatile browser memory.
LLM Execution: The sanitized prompt is pasted into ChatGPT without leaking the real identities.
1-Click Restore: When ChatGPT returns the response containing the placeholder tokens, the local lookup table swaps the original values back into place.

4. Stripping URL Tracking Query Parameters

Marketing platforms and social networks append tracking parameters (utm_source, fbclid, gclid, mc_eid) to URLs to build invasive cross-site user profiles.

A lightweight client-side URL sanitizer strips all invasive query parameters using the standard URL and URLSearchParams browser APIs:

const TRACKING_PARAMS = new Set([
  'utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
  'fbclid', 'gclid', 'msclkid', 'dclid', 'twclid', 'mc_eid', '_ga'
]);

export function cleanUrl(rawUrl: string): string {
  try {
    const parsed = new URL(rawUrl);
    for (const key of Array.from(parsed.searchParams.keys())) {
      if (TRACKING_PARAMS.has(key.toLowerCase()) || key.startsWith('utm_')) {
        parsed.searchParams.delete(key);
      }
    }
    return parsed.toString();
  } catch {
    return rawUrl;
  }
}

🚀 Live Implementation & Open Architecture

If you want to test these utilities live or inspect network requests in Chrome DevTools to verify that zero bytes leave your device, check out the live suite on PrivacyKit.

Key Architectural Benefits for Web Engineers:

$0 Backend Infrastructure: Serving pure client-side static bundles on Vercel/Cloudflare Pages means infinite scalability with zero server compute costs.
Instant Offline Execution: Utilities continue to execute without interruption even if you disconnect from Wi-Fi.
GDPR by Design: No server database means zero risk of data breach liabilities under GDPR Article 5(1)(c).

What client-side tools are you currently building with the Web Crypto API? Let's discuss in the comments below! 👇

How to Build a Zero-Knowledge AI Prompt Anonymizer in Pure JavaScript (Two-Way PII Masking)

Bhutto Sahab — Sun, 04 Oct 2026 12:42:29 +0000

Every day, developers, lawyers, and founders paste confidential source code, customer records, and internal business metrics directly into ChatGPT, Claude, and Gemini.

When you paste raw client data like "Sarah Jenkins from TechNova GmbH paid $45,000" into public LLM chats, that private information is sent across the internet, logged into provider telemetry databases, and potentially used to retrain future AI models.

In this guide, we will build a 100% client-side, zero-knowledge AI prompt sanitizer in pure JavaScript. It replaces confidential names, emails, and financial figures with structured placeholder tokens, and features a 1-click two-way restoration engine that maps real names back into AI responses without uploading a single byte to any external server.

1. Why Server-Side Redaction Destroys Privacy

Most online PII (Personally Identifiable Information) scrubbers operate by uploading your prompt to their own cloud servers to run machine learning models.

This creates a serious privacy trap: to protect your data from OpenAI, you are sending your confidential text to an unknown third-party server.

The Traditional Cloud Trap:
Your Prompt -> Third-Party Redaction Server -> OpenAI LLM
[--- Risk of Leaks / Logs at Every Step ---]

The Zero-Knowledge Client-Side Approach:
Your Prompt -> Local Browser RAM (Regex + Bracket Tokenization) -> OpenAI LLM
[--- 0 Network Requests / 0 Logs / 100% Private ---]

2. The Two-Way Masking Workflow

The secret to safe AI prompting is pseudonymization with reverse mapping:

Step 1 (Tokenize): Replace sensitive entities with typed tokens ([PERSON_1], [COMPANY_1], [CURRENCY_1]).
Step 2 (Prompt AI): Send the sanitized text to ChatGPT or Claude. The AI understands the context perfectly and returns a response containing the tokens.
Step 3 (Restore): Paste the AI reply back into your local browser tool. The in-memory dictionary swaps the tokens back into original names with one click.

Common Sensitive Data Types & Replacement Patterns

Data Type	Example Real Value	Safe Token Replacement	Detection Method
Custom Secret Words	`[Project Titan]`	`[CUSTOM_1]`	Bracket `[ ]` Delimiter
Client Names	`Sarah Jenkins`	`[PERSON_1]`	Title Case Capitalization
Companies	`Acme Corp / TechNova GmbH`	`[COMPANY_1]`	Corporate Suffix Regex
Emails	`sarah@technova.com`	`[EMAIL_1]`	Standard RFC 5322 Regex
Phone Numbers	`+1 (555) 234-5678`	`[PHONE_1]`	International Phone Pattern
Financial Amounts	`$45,000 / €12,500`	`[CURRENCY_1]`	Currency Symbol Regex

3. Implementing the JavaScript Anonymizer Engine

Here is the complete, self-contained JavaScript implementation that handles tokenization, state management, and reverse restoration directly in memory:

class PromptAnonymizer {
  constructor() {
    this.tokenMap = new Map(); // Maps [TOKEN] -> Real Value
    this.counters = {
      CUSTOM: 0,
      EMAIL: 0,
      PHONE: 0,
      CURRENCY: 0,
      COMPANY: 0,
      PERSON: 0
    };
  }

  // Generate unique token and store in local dictionary
  createToken(type, originalValue) {
    // Return existing token if value was already masked
    for (let [token, val] of this.tokenMap.entries()) {
      if (val.toLowerCase() === originalValue.toLowerCase()) {
        return token;
      }
    }
    this.counters[type] = (this.counters[type] || 0) + 1;
    const token = `[${type}_${this.counters[type]}]`;
    this.tokenMap.set(token, originalValue);
    return token;
  }

  // Anonymize raw prompt text
  anonymize(text) {
    let output = text;

    // 1. Manual Bracket Masking: [Any Secret Phrase]
    output = output.replace(/\[([^\]]+)\]/g, (match, content) => {
      return this.createToken('CUSTOM', content);
    });

    // 2. Email Addresses
    const emailRegex = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
    output = output.replace(emailRegex, (match) => {
      return this.createToken('EMAIL', match);
    });

    // 3. Currency Figures ($45,000 / €100M / £500)
    const currencyRegex = /([$€£¥₹])\s?(\d{1,3}(?:,\d{3})*(?:\.\d+)?(?:k|m|b|K|M|B)?)/g;
    output = output.replace(currencyRegex, (match) => {
      return this.createToken('CURRENCY', match);
    });

    // 4. Corporate Entities (Inc, LLC, GmbH, Ltd)
    const companyRegex = /\b([A-Z][A-Za-z0-9&.-]+(?:\s+[A-Z][A-Za-z0-9&.-]+)*\s+(?:GmbH|LLC|Inc|Corp|Ltd|AG|SA|Pvt))\b/g;
    output = output.replace(companyRegex, (match) => {
      return this.createToken('COMPANY', match);
    });

    return output;
  }

  // Restore AI response back to original identities
  restore(aiResponseText) {
    let restored = aiResponseText;
    for (let [token, realValue] of this.tokenMap.entries()) {
      // Replace all instances of [TOKEN] globally
      restored = restored.split(token).join(realValue);
    }
    return restored;
  }
}

4. Testing the Engine: Step-by-Step Execution

Let's test our engine on a real confidential business prompt:

const sanitizer = new PromptAnonymizer();

const confidentialPrompt = 
  "Write an email to [Sarah Jenkins] at TechNova GmbH thanking her for the $45,000 project payment. Contact her at sarah@technova.com.";

// 1. Sanitize before sending to AI
const safePrompt = sanitizer.anonymize(confidentialPrompt);
console.log("Safe Prompt for AI:\n", safePrompt);

// 2. Simulated response returned by ChatGPT / Claude
const mockAiResponse = 
  "Subject: Thank you for your payment\n\nDear [CUSTOM_1],\n\nThank you for confirming the [CURRENCY_1] payment on behalf of [COMPANY_1]. We will reach out to [EMAIL_1] with next steps.";

// 3. Restore original identities locally in 1 click
const finalRestoredText = sanitizer.restore(mockAiResponse);
console.log("\nFinal Restored Email:\n", finalRestoredText);

Execution Output:

Safe Prompt for AI:
Write an email to [CUSTOM_1] at [COMPANY_1] thanking her for the [CURRENCY_1] project payment. Contact her at [EMAIL_1].

Final Restored Email:
Subject: Thank you for your payment

Dear Sarah Jenkins,

Thank you for confirming the $45,000 payment on behalf of TechNova GmbH. We will reach out to sarah@technova.com with next steps.

5. Security & Architectural Benefits

Deterministic Accuracy: Regex and bracket delimiter parsing runs in < 2 milliseconds directly in browser V8 engine RAM.
Grammar Preservation: By using typed semantic placeholders like [COMPANY_1] and [PERSON_1], the LLM maintains perfect grammar and pronoun alignment (he/she/they).
Zero Telemetry Liability: Because no tokens leave the client device, your workflows remain fully compliant with GDPR, HIPAA, and SOC 2 pre-prompt guidelines.

Discussion & Questions

How does your team protect sensitive customer data and credentials when using generative AI tools? Do you use browser extensions, manual search-and-replace, or strict data loss prevention (DLP) rules? Let's discuss in the comments below!

Why Photos Leak Your Home GPS Coordinates (And How to Strip EXIF Metadata in Client-Side JavaScript)

Bhutto Sahab — Thu, 01 Oct 2026 10:47:29 +0000

Every time you snap a photo with your iPhone or Android smartphone and share the original image file over email, cloud storage, Discord, or web forums, you might be broadcasting your exact physical home address to the entire world.

Smartphones automatically embed invisible metadata headers into photos called EXIF (Exchangeable Image File Format). These hidden headers contain precise GPS latitude/longitude coordinates, device serial numbers, camera model, lens parameters, altitude, and exact timestamps.

In this technical breakdown, we'll examine the binary structure of JPEG EXIF headers (APP1 marker 0xFFE1), explain the privacy attack vectors of location leaks, and write a 100% client-side JavaScript engine to sanitize and strip EXIF metadata without uploading files to any remote server.

1. What Hidden Metadata Lives Inside Your Photos?

When a digital camera or mobile phone captures an image, it constructs a complex metadata tree in standard TIFF/EXIF format before saving JPEG pixel data:

Sensitive EXIF Tags Embedded by Default

EXIF Metadata Tag	Example Leak Value	Real-World Privacy & Security Threat
GPSLatitude & GPSLongitude	`37°46'29.8"N 122°25'09.5"W`	Pinpoints exact home, office, or school location
GPSAltitude & Timestamp	`14.2m / 2026-10-01 08:42:15`	Establishes daily routines and precise movement patterns
Make & Model	`Apple iPhone 15 Pro Max`	Device fingerprinting and targeted OS exploit staging
Camera Serial Number	`DN6ZX098N1`	Correlates anonymous photos across disparate web accounts
Lens & Software	`24mm f/1.78 / iOS 18.2`	High-fidelity hardware forensic profiling

2. Anatomy of a JPEG File & The APP1 (0xFFE1) Segment

A standard JPEG image file starts with a Start of Image (SOI) marker (0xFFD8). Immediately following SOI, camera firmware inserts application-specific metadata segments:

[0xFFD8] -> Start of Image (SOI)
[0xFFE1] -> APP1 Marker (EXIF Header & GPS Metadata, Length: 2 Bytes)
   ├── "Exif\0\0" (Header String)
   ├── TIFF Header (Endianness: 'II' Little-Endian or 'MM' Big-Endian)
   ├── IFD0 (Image File Directory: Make, Model, Orientation)
   └── GPS IFD (Sub-directory: GPSLatitude, GPSLongitude, GPSAltitude)
[0xFFDB] -> Quantization Tables (DQT)
[0xFFC0] -> Start of Frame (SOF0 - Image Dimensions)
[0xFFDA] -> Start of Scan (SOS - Actual Compressed Raw Pixels)
[0xFFD9] -> End of Image (EOI)

3. How to Strip EXIF Metadata in Pure Client-Side JavaScript

There are two primary methods to strip EXIF metadata inside the browser:

Method A: HTML5 Canvas Pixel Re-Encoding (Fast & Universal)

When you draw an image onto an HTML5 Canvas and export it via canvas.toBlob('image/jpeg', 0.95), the browser extracts only the raw pixel raster and discards all EXIF segments entirely.

async function stripExifViaCanvas(imageFile, quality = 0.92) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const objectUrl = URL.createObjectURL(imageFile);

    img.onload = () => {
      URL.revokeObjectURL(objectUrl);

      const canvas = document.createElement('canvas');
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;

      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);

      canvas.toBlob((blob) => {
        if (blob) {
          resolve(new File([blob], imageFile.name.replace(/\.[^.]+$/, '_clean.jpg'), {
            type: 'image/jpeg',
            lastModified: Date.now()
          }));
        } else {
          reject(new Error('Canvas blob generation failed'));
        }
      }, 'image/jpeg', quality);
    };

    img.onerror = () => reject(new Error('Failed to load image file'));
    img.src = objectUrl;
  });
}

Method B: Binary ArrayBuffer APP1 Marker Stripping (Lossless)

For zero compression loss, you can parse the raw ArrayBuffer with DataView and splice out the 0xFFE1 byte slice directly:

async function stripExifLossless(file) {
  const arrayBuffer = await file.arrayBuffer();
  const dataView = new DataView(arrayBuffer);

  if (dataView.getUint16(0, false) !== 0xFFD8) {
    throw new Error('Invalid JPEG format');
  }

  let offset = 2;
  const length = arrayBuffer.byteLength;
  const segments = [new Uint8Array(arrayBuffer.slice(0, 2))]; // Keep SOI

  while (offset < length) {
    const marker = dataView.getUint16(offset, false);
    offset += 2;

    // Check if End of Image or Start of Scan reached
    if (marker === 0xFFDA || marker === 0xFFD9) {
      segments.push(new Uint8Array(arrayBuffer.slice(offset - 2)));
      break;
    }

    const segmentLength = dataView.getUint16(offset, false);

    // Skip APP1 (0xFFE1) EXIF segment
    if (marker !== 0xFFE1) {
      segments.push(new Uint8Array(arrayBuffer.slice(offset - 2, offset + segmentLength)));
    }

    offset += segmentLength;
  }

  const totalLength = segments.reduce((acc, s) => acc + s.byteLength, 0);
  const cleanBuffer = new Uint8Array(totalLength);
  let pos = 0;
  for (const seg of segments) {
    cleanBuffer.set(seg, pos);
    pos += seg.byteLength;
  }

  return new Blob([cleanBuffer], { type: 'image/jpeg' });
}

4. Summary & Best Practices

Never upload raw photos to untrusted servers when your intention is to clean them — process them 100% locally in browser memory.
Turn off Camera Location permissions in iOS / Android Settings if you don't actively organize photos by geo-tagging.
Use client-side Web Workers for batch processing large photo libraries without locking the main browser UI thread.

Questions for Developers:

Do you prefer lossless binary slice stripping or HTML5 canvas rasterization when preparing user-submitted images in your web applications? Let us know in the comments below!

How to Build a Zero-Knowledge IPv4 Subnet & CIDR Calculator in Pure Client-Side JavaScript

Bhutto Sahab — Thu, 01 Oct 2026 10:12:12 +0000

When network engineers, DevOps specialists, and security researchers plan cloud Virtual Private Clouds (VPCs), configure firewall Access Control Lists (ACLs), or isolate Docker/Kubernetes container networks, the first utility they reach for is an IP Subnet & CIDR Calculator.

However, most legacy online subnet calculators operate via traditional server-side request/response pipelines. Every time you enter internal corporate subnets (like 10.240.16.0/20), that private infrastructure topology is transmitted over HTTP to a third-party backend where it may sit in Nginx access logs, telemetry databases, or ad tracking platforms.

In this deep dive, we’ll explore how IPv4 CIDR binary mathematics actually works and how to implement a 100% client-side, zero-knowledge subnet calculation engine in pure JavaScript using 32-bit bitwise operators.

1. Anatomy of an IPv4 Address: 32 Bits in 4 Octets

Every IPv4 address is mathematically a single 32-bit unsigned integer, typically formatted as four 8-bit octets separated by dots (dotted-decimal notation).

Dotted Decimal:    192    .    168    .     1     .     1
Binary Octets:   11000000 . 10101000 . 00000001 . 00000001
32-Bit Integer:  3232235777 (0xC0A80101)

In Classless Inter-Domain Routing (CIDR), the prefix (e.g. /24) represents the exact number of contiguous high-order bits (1s) allocated to identify the Network ID, while the remaining bits (0s) represent the Host address space.

CIDR /24 Subnet Mask:
11111111.11111111.11111111.00000000  ->  255.255.255.0
[----- 24 Network Bits -----][8 Host Bits]

IPv4 Binary Octet & Subnet Mask Grid

Format	Octet 1	Octet 2	Octet 3	Octet 4	32-Bit Decimal / Note
Dotted Decimal	`192`	`168`	`1`	`1`	`3232235777`
Binary Octets	`11000000`	`10101000`	`00000001`	`00000001`	`0xC0A80101` (Hex)
/24 Subnet Mask	`11111111`	`11111111`	`11111111`	`00000000`	`255.255.255.0` (24 Net / 8 Host)

2. Converting IP Addresses to 32-Bit Unsigned Integers

To perform blazingly fast subnet calculations without floating-point inaccuracies or regex overhead, the most efficient approach is converting IP strings into 32-bit unsigned integers using bitwise shifts.

// Convert Dotted Decimal IP to 32-bit unsigned integer
function ipToInt(ip) {
  const octets = ip.trim().split('.');
  if (octets.length !== 4) throw new Error('Invalid IP format');

  return octets.reduce((acc, octet) => {
    const val = parseInt(octet, 10);
    if (isNaN(val) || val < 0 || val > 255) throw new Error(`Invalid octet: ${octet}`);
    return ((acc << 8) | val) >>> 0;
  }, 0) >>> 0;
}

// Convert 32-bit unsigned integer back to Dotted Decimal
function intToIp(int) {
  return [
    (int >>> 24) & 255,
    (int >>> 16) & 255,
    (int >>> 8) & 255,
    int & 255
  ].join('.');
}

3. Bitwise Math: Calculating Network, Broadcast & Usable Range

With our integer converter in place, calculating every subnet parameter requires just standard 32-bit bitwise boolean logic:

function calculateSubnet(ipStr, cidr) {
  if (cidr < 0 || cidr > 32) throw new Error('CIDR must be between 0 and 32');

  const ipInt = ipToInt(ipStr);

  // Calculate Subnet Mask: shift 32 1-bits left by (32 - cidr)
  const maskInt = cidr === 0 ? 0 : (((~0) << (32 - cidr)) >>> 0);

  // Wildcard Mask: bitwise NOT of Subnet Mask
  const wildcardInt = (~maskInt) >>> 0;

  // Network Address: IP AND Subnet Mask
  const networkInt = (ipInt & maskInt) >>> 0;

  // Broadcast Address: Network OR Wildcard Mask
  const broadcastInt = (networkInt | wildcardInt) >>> 0;

  // Total and Usable Host Counts
  const totalHosts = Math.pow(2, 32 - cidr);
  const usableHosts = cidr >= 31 ? (cidr === 31 ? 2 : 1) : Math.max(0, totalHosts - 2);

  // Usable Host Ranges
  let firstHostInt, lastHostInt;
  if (cidr === 31) {
    firstHostInt = networkInt;
    lastHostInt = broadcastInt;
  } else if (cidr === 32) {
    firstHostInt = networkInt;
    lastHostInt = networkInt;
  } else {
    firstHostInt = (networkInt + 1) >>> 0;
    lastHostInt = (broadcastInt - 1) >>> 0;
  }

  return {
    ip: ipStr,
    cidr: `/${cidr}`,
    subnetMask: intToIp(maskInt),
    wildcardMask: intToIp(wildcardInt),
    networkAddress: intToIp(networkInt),
    broadcastAddress: intToIp(broadcastInt),
    firstUsableHost: intToIp(firstHostInt),
    lastUsableHost: intToIp(lastHostInt),
    totalHosts: totalHosts.toLocaleString(),
    usableHosts: usableHosts.toLocaleString()
  };
}

4. Execution Example: Calculating `10.240.16.55/20`

const result = calculateSubnet('10.240.16.55', 20);
console.log(result);

Result:

{
  "ip": "10.240.16.55",
  "cidr": "/20",
  "subnetMask": "255.255.240.0",
  "wildcardMask": "0.0.15.255",
  "networkAddress": "10.240.16.0",
  "broadcastAddress": "10.240.31.255",
  "firstUsableHost": "10.240.16.1",
  "lastUsableHost": "10.240.31.254",
  "totalHosts": "4,096",
  "usableHosts": "4,094"
}

5. Why Client-Side Execution Matters for Security

Zero Corporate Topology Leaks: Subnet CIDR layouts describe your entire VPC / DMZ architecture. Running calculations 100% inside local browser RAM guarantees no network logs are created.
Offline Capable: Works instantly in air-gapped data centers without requiring internet access.
Sub-Millisecond Speed: Pure bitwise integer arithmetic evaluates in less than 0.05ms.

Questions for the Community:

How do you manage internal CIDR allocations in your cloud clusters? Do you use spreadsheet IPAMs, Terraform IPAM modules, or custom CLI scripts? Share your thoughts below!