Data Encoding & Security

Convert binary data to text format

// JavaScript Base64 encoding/decoding
const originalString = "Hello, World! 🌍";

// Encoding
const encoded = btoa(originalString);
console.log(encoded); // "SGVsbG8sIFdvcmxkISDwn5iB"

// Decoding
const decoded = atob(encoded);
console.log(decoded); // "Hello, World! 🌍"

// For Unicode strings
const utf8Bytes = new TextEncoder().encode(originalString);
const base64 = btoa(String.fromCharCode(...utf8Bytes));

const decodedBytes = Uint8Array.from(atob(base64), c => c.charCodeAt(0));
const decodedString = new TextDecoder().decode(decodedBytes);

Use Cases:

• Embedding binary data in text formats (JSON, XML)
• Basic obfuscation (not encryption)
• Data URIs for images
• HTTP Basic Authentication

Security Note:

Base64 is encoding, not encryption. It provides no security benefits.

Convert bytes to hexadecimal representation

// Convert string to hex
function stringToHex(str) {
    return Array.from(str)
        .map(char => char.charCodeAt(0).toString(16).padStart(2, '0'))
        .join('');
}

// Convert hex back to string
function hexToString(hex) {
    const bytes = [];
    for (let i = 0; i < hex.length; i += 2) {
        bytes.push(parseInt(hex.substr(i, 2), 16));
    }
    return String.fromCharCode(...bytes);
}

// Usage
const original = "Hello";
const hex = stringToHex(original);
console.log(hex); // "48656c6c6f"

const back = hexToString(hex);
console.log(back); // "Hello"

// ArrayBuffer to hex
function arrayBufferToHex(buffer) {
    return Array.from(new Uint8Array(buffer))
        .map(byte => byte.toString(16).padStart(2, '0'))
        .join('');
}

Use Cases:

• Displaying binary data in logs
• Hash representations (MD5, SHA-256)
• Color codes in CSS/HTML
• Memory addresses and debugging

Encode data for safe URL transmission

// JavaScript URL encoding
const data = "Hello World & Special Characters!";

// encodeURIComponent (for URL components)
const encoded = encodeURIComponent(data);
console.log(encoded); // "Hello%20World%20%26%20Special%20Characters%21"

// encodeURI (for complete URLs)
const url = "https://example.com/search?q=" + encodeURIComponent("node.js & react");
console.log(url);

// Decoding
const decoded = decodeURIComponent(encoded);
console.log(decoded); // "Hello World & Special Characters!"

// Manual URL encoding
function customUrlEncode(str) {
    return str.replace(/[^a-zA-Z0-9]/g, char => {
        return '%' + char.charCodeAt(0).toString(16).toUpperCase();
    });
}

// Handle special characters properly
function safeUrlEncode(obj) {
    return Object.keys(obj).map(key => {
        return encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]);
    }).join('&');
}

Use Cases:

• Query parameters in URLs
• Form data submission
• API endpoints with special characters
• Preventing URL injection attacks

Encode HTML special characters

// HTML entity encoding
function htmlEncode(str) {
    const entityMap = {
        '&': '&',
        '<': '<',
        '>': '>',
        '"': '"',
        "'": ''',
        '/': '/',
        '`': '`',
        '=': '='
    };

    return str.replace(/[&<>"'`=]/g, char => entityMap[char]);
}

// Usage
const userInput = '';
const safeHtml = htmlEncode(userInput);
console.log(safeHtml); // "<script>alert("XSS")</script>"

// Decoding
function htmlDecode(str) {
    const entityMap = {
        '&': '&',
        '<': '<',
        '>': '>',
        '"': '"',
        ''': "'",
        '/': '/',
        '`': '`',
        '=': '='
    };

    return str.replace(/&[a-zA-Z0-9#]+;/g, entity => entityMap[entity] || entity);
}

Use Cases:

• Preventing XSS attacks
• Displaying user-generated content
• HTML attribute values
• JSON in HTML contexts